❤ Like

🔖 Save

🔗 Share

Eric Hu

Next.js Routing

Next.js uses the file system to define routes. Folders create URL segments, and special folder syntax enables advanced patterns.

Convention	Example	Matches
Static segment	`app/blog/`	`/blog`
Dynamic segment	`app/blog/[slug]/`	`/blog/hello`
Catch-all	`app/docs/[...slug]/`	`/docs/a`, `/docs/a/b`
Optional catch-all	`app/shop/[[...slug]]/`	`/shop`, `/shop/a`, `/shop/a/b`
Route group	`app/(marketing)/`	No URL segment added
Private folder	`app/_components/`	Excluded from routing
Parallel route	`app/@modal/`	Rendered alongside, not a URL
Intercepting	`app/(.)photo/`	Intercepts a route from here

Static segments

A plain folder name creates a static URL segment.

text

app
├── page.tsx          → /
└── blog
    └── page.tsx      → /blog

tsx

// app/blog/page.tsx → /blog
export default function BlogPage() {
  return <h1>Blog</h1>;
}

Dynamic segments

Use square brackets to create a dynamic segment.

text

app
└── blog
    └── [slug]
        └── page.tsx      → /blog/hello

hello will be passed to page.tsx as a param.

tsx

// app/blog/[slug]/page.tsx → /blog/hello-world
export default async function Post({ params }) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Generate static params at build time.

tsx

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

Catch-all segments

Match multiple segments with [...slug].

text

app
└── docs
    └── [...slug]
        └── page.tsx      → /docs/a, /docs/a/b

tsx

// app/docs/[...slug]/page.tsx
 
// /docs/a → { slug: ["a"] }
// /docs/a/b → { slug: ["a", "b"] }
 
export default async function Docs({ params }) {
  const { slug } = await params;
}

Optional catch-all segments

Use [[...slug]] to also match the parent path.

text

app
└── shop
    └── [[...slug]]
        └── page.tsx      → /shop, /shop/a, /shop/a/b

tsx

// app/shop/[[...slug]]/page.tsx
 
// /shop → { slug: undefined }
// /shop/a → { slug: ["a"] }
// /shop/a/b → { slug: ["a", "b"] }
 
export default async function Shop({ params }) {
  const { slug } = await params;
}

Route groups

Wrap a folder in parentheses to organize routes without affecting the URL.

text

app
├── (marketing)
│   ├── about
│   │   └── page.tsx      → /about
│   └── pricing
│       └── page.tsx      → /pricing
└── (shop)
    └── cart
        └── page.tsx      → /cart

Route groups let you apply different layouts to sections at the same URL level.

Private folders

Prefix a folder with an underscore to exclude it from routing.

text

app
├── _components
│   └── Button.tsx        # not a route
└── page.tsx

Parallel routes

Use @folder slots to render multiple pages in the same layout simultaneously.

text

app
├── @modal
│   ├── default.tsx       # fallback when no modal is active
│   └── login
│       └── page.tsx
├── @analytics
│   └── page.tsx
└── layout.tsx            # receives slots as props

tsx

// app/layout.tsx
export default function Layout({ children, analytics, modal }) {
  return (
    <>
      {children}
      {analytics}
      {modal}
    </>
  );
}

Slots are passed as props and don't affect the URL. Add a default.tsx to each slot as a fallback.

Intercepting routes

Intercept a route to show it in a different context, like a modal.

text

app
├── feed
│   ├── page.tsx
│   └── (..)photo
│       └── [id]
│           └── page.tsx  # intercepts /photo/[id] from /feed
└── photo
    └── [id]
        └── page.tsx

Convention	Matches
`(.)`	Segments on the same level
`(..)`	Segments one level above
`(..)(..)`	Segments two levels above
`(...)`	Segments from the root

❤ Like

🔖 Save

🔗 Share

Eric Hu

Next.js Routing

Next.js uses the file system to define routes. Folders create URL segments, and special folder syntax enables advanced patterns.

Convention	Example	Matches
Static segment	`app/blog/`	`/blog`
Dynamic segment	`app/blog/[slug]/`	`/blog/hello`
Catch-all	`app/docs/[...slug]/`	`/docs/a`, `/docs/a/b`
Optional catch-all	`app/shop/[[...slug]]/`	`/shop`, `/shop/a`, `/shop/a/b`
Route group	`app/(marketing)/`	No URL segment added
Private folder	`app/_components/`	Excluded from routing
Parallel route	`app/@modal/`	Rendered alongside, not a URL
Intercepting	`app/(.)photo/`	Intercepts a route from here

Static segments

A plain folder name creates a static URL segment.

text

app
├── page.tsx          → /
└── blog
    └── page.tsx      → /blog

tsx

// app/blog/page.tsx → /blog
export default function BlogPage() {
  return <h1>Blog</h1>;
}

Dynamic segments

Use square brackets to create a dynamic segment.

text

app
└── blog
    └── [slug]
        └── page.tsx      → /blog/hello

hello will be passed to page.tsx as a param.

tsx

// app/blog/[slug]/page.tsx → /blog/hello-world
export default async function Post({ params }) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Generate static params at build time.

tsx

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

Catch-all segments

Match multiple segments with [...slug].

text

app
└── docs
    └── [...slug]
        └── page.tsx      → /docs/a, /docs/a/b

tsx

// app/docs/[...slug]/page.tsx
 
// /docs/a → { slug: ["a"] }
// /docs/a/b → { slug: ["a", "b"] }
 
export default async function Docs({ params }) {
  const { slug } = await params;
}

Optional catch-all segments

Use [[...slug]] to also match the parent path.

text

app
└── shop
    └── [[...slug]]
        └── page.tsx      → /shop, /shop/a, /shop/a/b

tsx

// app/shop/[[...slug]]/page.tsx
 
// /shop → { slug: undefined }
// /shop/a → { slug: ["a"] }
// /shop/a/b → { slug: ["a", "b"] }
 
export default async function Shop({ params }) {
  const { slug } = await params;
}

Route groups

Wrap a folder in parentheses to organize routes without affecting the URL.

text

app
├── (marketing)
│   ├── about
│   │   └── page.tsx      → /about
│   └── pricing
│       └── page.tsx      → /pricing
└── (shop)
    └── cart
        └── page.tsx      → /cart

Route groups let you apply different layouts to sections at the same URL level.

Private folders

Prefix a folder with an underscore to exclude it from routing.

text

app
├── _components
│   └── Button.tsx        # not a route
└── page.tsx

Parallel routes

Use @folder slots to render multiple pages in the same layout simultaneously.

text

app
├── @modal
│   ├── default.tsx       # fallback when no modal is active
│   └── login
│       └── page.tsx
├── @analytics
│   └── page.tsx
└── layout.tsx            # receives slots as props

tsx

// app/layout.tsx
export default function Layout({ children, analytics, modal }) {
  return (
    <>
      {children}
      {analytics}
      {modal}
    </>
  );
}

Slots are passed as props and don't affect the URL. Add a default.tsx to each slot as a fallback.

Intercepting routes

Intercept a route to show it in a different context, like a modal.

text

app
├── feed
│   ├── page.tsx
│   └── (..)photo
│       └── [id]
│           └── page.tsx  # intercepts /photo/[id] from /feed
└── photo
    └── [id]
        └── page.tsx

Convention	Matches
`(.)`	Segments on the same level
`(..)`	Segments one level above
`(..)(..)`	Segments two levels above
`(...)`	Segments from the root

Next.js Routing

Static segments

Dynamic segments

Catch-all segments

Optional catch-all segments

Route groups

Private folders

Parallel routes

Intercepting routes

Full-Stack AI Developer Roadmap

Next.js Routing

Static segments

Dynamic segments

Catch-all segments

Optional catch-all segments

Route groups

Private folders

Parallel routes

Intercepting routes

Full-Stack AI Developer Roadmap