Вложенные маршруты

Вложенный маршрут — адрес из нескольких сегментов, например /posts/hello-nextjs/comments. Каждый сегмент — это папка, и папки вкладываются друг в друга так же, как части адреса.

Страница комментариев

Сделаем отдельную страницу с комментариями к статье. Создайте папку comments внутри app/posts/[slug]:

// app/posts/[slug]/comments/page.tsx
export default async function CommentsPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
 
  return <h1>Комментарии к статье {slug}</h1>;
}

Откройте /posts/hello-nextjs/comments — появится «Комментарии к статье hello-nextjs». Вложенная страница получает в params и параметры родительских папок.

Дерево папок блога

app/
├── page.tsx                  /
├── about/
│   └── page.tsx              /about
└── posts/
    ├── layout.tsx
    ├── page.tsx              /posts
    ├── new/
    │   └── page.tsx          /posts/new
    └── [slug]/
        ├── page.tsx          /posts/hello-nextjs
        └── comments/
            └── page.tsx      /posts/hello-nextjs/comments

Макет app/posts/layout.tsx оборачивает все эти страницы, кроме / и /about.

Обычная папка важнее динамической

Папки new и [slug] лежат рядом. Адрес /posts/new подходит под обе, но Next.js выбирает папку с точным именем. Создайте страницу формы:

// app/posts/new/page.tsx
export default function NewPostPage() {
  return <h1>Новая статья</h1>;
}

По адресу /posts/new откроется «Новая статья», а не страница статьи со slug равным new. Порядок файлов значения не имеет.

Несколько параметров

Если в адресе два динамических сегмента, у папок должны быть разные имена:

// app/users/[userId]/posts/[slug]/page.tsx
type Props = { params: Promise<{ userId: string; slug: string }> };
 
export default async function UserPostPage({ params }: Props) {
  const { userId, slug } = await params;
  return <p>Автор {userId}, статья {slug}</p>;
}

Адрес /users/anna/posts/hello-nextjs покажет «Автор anna, статья hello-nextjs».

Ссылка на вложенную страницу

Из страницы статьи на комментарии ведёт обычная ссылка:

// app/posts/[slug]/page.tsx (фрагмент)
<Link href={`/posts/${slug}/comments`}>Комментарии</Link>

Частая ошибка

Положить рядом две динамические папки с разными именами, например app/posts/[slug] и app/posts/[id]. Next.js не сможет решить, какая из них подходит, и при запуске выдаст ошибку «You cannot use different slug names for the same dynamic path». На одном уровне может быть только одна динамическая папка.