Nested routes

This page explains how to create nested routes in Next.js.

Creating nested routes

To create nested routes, you organize folders within your app directory to match your desired URL structure. Here’s how to set up routes for:

• localhost:3000/blog
• localhost:3000/blog/first
• localhost:3000/blog/second

Parent route

Create a blog folder in your app directory and add a page.tsx file that exports a React component as its default export:

app/blog/page.tsx

export default function Blog() {
  return <h1>My blog</h1>;
}

This component renders when users visit /blog.

Child routes

For the nested routes, create two folders inside blog named first and second. Add a page.tsx file in each:

app/blog/first/page.tsx

export default function FirstBlog() {
  return <h1>First blog post</h1>;
}

Create a similar component for the second blog page in app/blog/second/page.tsx.

app/blog/second/page.tsx

export default function SecondBlog() {
  return <h1>Second blog post</h1>;
}

Route structure

The folder structure directly maps to your URL paths:

• Directoryapp/

  • Directoryblog/

    • page.tsx /blog
    • Directoryfirst/

      • page.tsx /blog/first
    • Directorysecond/

      • page.tsx /blog/second
  • page.tsx /

Next.js automatically creates routes based on this folder hierarchy, making nested routing straightforward and predictable.