“Static” and “dynamic” can describe both the shape of a path and when a page is created. Dynamic addresses can also be generated in advance, so read these as two separate axes.
§ 00 · Routing — connect a URL to a screen
Routing determines which screen a browser URL connects to. A path whose segments are fixed, such as /about, is a fixed path. A path with values that differ between pages, such as /products/42, uses a dynamic segment to handle multiple URLs through one rule.
In the Next.js App Router, folders create URL segments and a page file defines the UI shown at that path. products/[id]/page handles /products/42 and /products/99 under the same page rule, reading the id value from params.
§ 01 · Static and dynamic routes
A static route has fixed path segments, as in /about or /pricing. A dynamic route receives actual URL values in named positions such as [id] or [slug], representing multiple pages for data such as products, posts and users. Here, “dynamic” means part of the address rule is a variable. This distinction is often called static versus dynamic routing.
Nested folders produce nested URLs. You can use multiple dynamic segments, as in /shop/[category]/[product]; a catch-all segment accepts several subsequent segments together. Do not trust dynamic values as received: check their existence and format, and return 404 for invalid addresses.
§ 02 · Shared UI can remain as you navigate
Link is a navigation tool for moving to paths inside the application. It preserves the semantics and accessibility of an ordinary link while letting the framework apply prefetching and client-side transitions. As a rule, express navigation between documents with links rather than buttons that change the address.
A layout wraps UI shared by several child paths and can persist during navigation. loading handles the waiting screen, error an error boundary, and not-found the response for a missing path. Routing is not just a list of addresses; it is the user flow through navigation, waiting and failure.
§ 03 · Rendering — when and where the screen is created
In client-side rendering (CSR), the browser executes JavaScript to create UI. In server-side rendering (SSR), the server creates HTML when a request arrives. Prerendering creates and caches HTML ahead of time during a build or revalidation. These approaches can be combined within one application according to the route and component.
Even server-generated HTML needs browser JavaScript to attach events for interaction. This process is called hydration. Server rendering and client-side transitions work together rather than being opposing choices: the server can show the first screen quickly, then subsequent navigation can continue smoothly.
§ 04 · Do not confuse address shape with generation time
A dynamic route is not necessarily generated on the server for every request. If the possible slug or id values are known at build time, multiple pages with dynamic segments can be generated ahead of time. Conversely, a fixed URL can be rendered dynamically each time by reading request cookies or search conditions.
When asked whether something is static or dynamic, first establish what the question means: the URL pattern or the time HTML is generated? Separating the questions avoids confusion even when similar terms such as static routing and dynamic rendering appear in the same sentence.
| Path shape | Generation time | Possible example |
|---|---|---|
| Fixed path | Prerendering | Generate /about in advance at build time |
| Fixed path | Request-time rendering | Generate /dashboard for each user request |
| Dynamic path | Prerendering | Generate the list of /posts/[slug] pages at build time |
| Dynamic path | Request-time rendering | Generate /products/[id] from request data |
Read this note at sass.studio.