Skip to content

Instantly share code, notes, and snippets.

@quacksire
Last active December 29, 2023 08:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save quacksire/a5f70700fc2d5c89d1f86502a0ebc921 to your computer and use it in GitHub Desktop.
Save quacksire/a5f70700fc2d5c89d1f86502a0ebc921 to your computer and use it in GitHub Desktop.
NextJS Routing

App Router

/app
    /page.tsx - index page
    /layout.tsx - the layout of the root page
                  This may include the header, footer, etc.
    /path1
        /page.tsx - path1 page
                  - since no layout, use the root layout
    /path2
        /page.tsx - path2 page
        /layout.tsx - the layout of the path2 page, acts ontop the root layout
                      This may path2 specific layout changes
    /path3
        /page.tsx - path3 page
        /[id]
            /page.tsx - path3/[id] page
                        A page that is dynamic, and can be accessed by path3/1, path3/2, etc.
                        This page will be rendered with the path3 layout
    /path4
        /page.tsx - path4 page
        /layout.tsx - the layout of the path4 page, acts ontop the root layout
                      This may include path4 specific layout changes
        /[[...slug]]
            /page.tsx - path4/[[...slug]] page
                        A page that is dynamic, and can be accessed at /path4/*
                        This page will be rendered with the path4 layout
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment