You can visit my GitHub repo to follow along with me.
Nested routing
- Next.js uses file-system routing
- Folders are used to create nested routes
- Each folder represents a route segment that maps to a URL segment
You can create separate UIs for each route using layout.tsx and page.tsx files. page.tsx exports a React component, and it's required for the route to be accessible.
To create a nested route, nest folders inside each other and add page.tsx files inside them.
Colocation
A special name for page files allows you to colocate UI components, test files, and other related code with your routes. Only the content inside the page file will be publicly accessible.
Layout
Use a layout.tsx file to create navigation UI that is shared between multiple pages. Any components imported into /app/dashboard/layout.tsx will be part of the layout. The <Layout /> component receives a children prop. This child can either be a page or another layout.
Partial Rendering
Benefit of layouts in Next.js: On navigation, only the page components update while the layout won't re-render.
Any UI added to the root layout will be shared across all pages. You can use the root layout to modify <html> and <body> tags, and add metadata.
Top comments (0)