Please enable JavaScript.

Coggle requires JavaScript to display documents.

Routing - Coggle Diagram

- - - - matcher allows you to filter Middleware to run on specific paths.
  - - - The waitUntil() method takes a promise as an argument, and extends the lifetime of the Middleware until the promise settles. This is useful for performing work in the background.
- - - - Link to Dynamic segments
      - checking Active Links
      - Scrolling to an id
      - Disabling scroll restoration
  - - - Use it to add a new entry to the browser's history stack. The user can navigate back to the previous state.
    - - Use it to replace the current entry on the browser's history stack. The user is not able to navigate back to the previous state.
- - - - This enables parts of the page to be displayed sooner, without waiting for all the data to load before any UI can be rendered.
      - Streaming allows you to break down the page's HTML into smaller chunks and progressively send those chunks from the server to the client.
- - - - Route Handlers are cached by default when using the GET method with the Response object.
    - - You can consider a route the lowest level routing primitive.
  - - - Route Handlers can use Dynamic Segments to create request handlers from dynamic data.
    - - Cookies
        
        You can read or set cookies with cookies from next/headers. This server function can be called directly in a Route Handler, or nested inside of another function.
        
        You can also use the underlying Web APIs to read cookies from the request (NextRequest)
      - Headers
        
        You can read headers with headers from next/headers. This server function can be called directly in a Route Handler, or nested inside of another function.
        
        This headers instance is read-only. To set headers, you need to return a new Response with new headers.
        
        You can also use the underlying Web APIs to read headers from the request (NextRequest)
    - - The request object passed to the Route Handler is a NextRequest instance, which has some additional convenience methods, including for more easily handling query parameters.
    - - You can revalidate cached data using the next.revalidate option
    - - You can set CORS headers for a specific Route Handler using the standard Web API methods
    - - You can use Route Handlers to return non-UI content. Note that sitemap.xml, robots.txt, app icons, and open graph images all have built-in support.
    - - Route Handlers use the same route segment configuration as pages and layouts.
- - - - Private folders can be created by prefixing a folder with an underscore: _folderName
      - This indicates the folder is a private implementation detail and should not be considered by the routing system, thereby opting the folder and all its subfolders out of routing.
    - - Next.js supports Module Path Aliases which make it easier to read and maintain imports across deeply nested project files.
    - - Route groups can be created by wrapping a folder in parenthesis: (folderName)
    - - Next.js supports storing application code (including app) inside an optional src directory. This separates application code from project configuration files which mostly live in the root of a project.
  - - - This strategy stores all application code in shared folders in the root of the app directory.
    - - This strategy stores globally shared application code in the root app directory and splits more specific application code into the route segments that use them.
    - - This strategy stores all application code in shared folders in the root of your project and keeps the app directory purely for routing purposes.
- - - - You can define a default.js file to render as a fallback for unmatched slots during the initial load or full-page reload.
    - - Both useSelectedLayoutSegment and useSelectedLayoutSegments accept a parallelRoutesKey parameter, which allows you to read the active route segment within a slot.
  - - - You can add a layout inside a slot to allow users to navigate the slot independently. This is useful for creating tabs.
      - create a layout file to share the tabs between the two pages
    - - Parallel Routes can be used together with Intercepting Routes to create modals.
    - - Parallel Routes can be streamed independently, allowing you to define independent error and loading states for each route
    - - You can use Parallel Routes to conditionally render routes based on certain conditions, such as user role. For example, to render a different dashboard page for the /admin or /user roles