React (next.js) Router
Introduction
Next.js ver 13 (oct 2022) introduced new router concept - App Router (src/app folder).
Old one is called Pages Router (still works, app router has higher priority on conflict case).
- Folders are used to define routes.
- Route is a single path of nested folders,
- Final element is
page.tsx
(it's like index.html)
Pages
Create page.tsx inside any folder to make route accessible.
Layouts
A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.
Layout.tsx component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
- Only the root layout can contain
<html>
and<body>
tags. - When a layout.js and page.js file are defined in the same folder, the layout will wrap the page.
Metadata can only be defined in the root layout.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
Linking
<Link>
Component- useRouter hook (Client Components)
- redirect function (Server Components)
- native History API
1 2 3 4 5 |
|
Use usePathname() to determine if a link is active. For example, to add a class to the active link, you can check if the current pathname matches the href of the link.
1 2 3 4 5 6 7 8 9 |
|
The useRouter hook allows you to programmatically change routes from Client Components.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Component hierarchy
Next.js provides a set of special files to create UI with specific behavior in nested routes.
- layout
- Shared UI for a segment and its children
- page
- Unique UI of a route and make routes publicly accessible
- loading
- Loading UI for a segment and its children
- not-found
- Not found UI for a segment and its children
- error
- Error UI for a segment and its children
- global-error
- Global Error UI
- route
- Server-side API endpoint
- template
- Specialized re-rendered Layout UI
- default
- Fallback UI for Parallel Routes
Only the contents returned by page.tsx or route.tsx are publicly addressable.
Dynamic routes
A Dynamic Segment can be created by wrapping a folder's name in square brackets: [folderName]
.
Dynamic Segments are passed as the params prop to layout, page, route, and generateMetadata functions.
Catch-all Segments
Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...folderName]
.
Catch-all Segments can be made optional by including the parameter in double square brackets: [[...folderName]]
.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|