routing & file conventions

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Deferring param awaiting to deeper tree levels

Instead of awaiting params at the layout level (which prevents prerendering), pass the params promise down and await in a child component wrapped in Suspense. This allows the layout, sidebar, and fallback to be part of the static shell while only the param-dependent content streams at request time.

Deferring params example

Example: `export default function Layout({ children, params }: LayoutProps<'/shop/[slug]'>) { return (<div><Sidebar /><Suspense fallback={<h1>Loading...</h1>}>{params.then(({ slug }) => (<SlugHeading slug={slug} />))}</Suspense>{children}</div>); }`

Dynamic route segments syntax

Dynamic route segments are created by wrapping a folder name in square brackets (e.g., [slug]). They allow you to create routes from dynamic data like blog posts or product pages and are generated from data at request time.

App Router introduced in version 13

The Next.js App Router was introduced in version 13 and is built on top of React Server Components. It uses file-system based routing and supports layouts, nested routing, loading states, and error handling.

Catch-all segments syntax and purpose

Catch-all segments use the [...folder]/page.js syntax and can match multiple URL parts. These segments capture all remaining URL segments and are useful for implementing features like documentation sites or file browsers.

Intercepting Routes pattern

Intercepting Routes is a routing pattern that allows loading a route from another part of your application within the current layout. It is useful for displaying content like modals without the user switching context, while keeping the URL shareable.

Private Folders naming and purpose

Private Folders are folders prefixed with an underscore (e.g., _components) that are excluded from the routing system. These folders are used for code organization and shared utilities without creating accessible routes.

Parallel Routes pattern and syntax

Parallel Routes is a pattern that allows simultaneously or conditionally rendering multiple pages within the same layout. It is created using named slots with the @folder convention, useful for dashboards, modals, and complex layouts.

Redirect implementation options

Redirects send users from one URL to another. In Next.js, redirects can be configured in next.config.js, returned from Proxy, or triggered programmatically with the redirect() function.

Rewrite definition and use case

A Rewrite maps an incoming request path to a different destination path without changing the URL in the browser. It is configured in next.config.js or returned from Proxy. Rewrites are useful for proxying to external services or legacy URLs.

Route Groups syntax and purpose

Route Groups are created by wrapping a folder name in parentheses (e.g., (marketing)). They are a way to organize routes without affecting the URL structure, helping organize related routes and enabling per-group layouts.

Route Handler definition and supported methods

A Route Handler is a function that handles HTTP requests for a specific route, defined in a route.js file. Route Handlers use the Web Request and Response APIs and can handle GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS methods.

Route Segment definition

A Route Segment is a part of the URL path (between two slashes) defined by a folder in the app directory. Each folder represents a segment in the URL structure.

Static Assets storage and usage

Static Assets are files such as images, fonts, videos, and other media that are served directly without processing. Static assets are typically stored in the public directory and referenced by their relative paths.

URL data definition and types

URL data is data that identifies a specific URL, such as the pathname and query parameters. In the App Router this means params and searchParams, and the client hooks that read them like usePathname and useSearchParams. URL data varies per link, not per session, so it can't be part of a shared App Shell.

Give your agent this brain