Пошук уроків, статей та іншого контенту
Розберетеся, як App Router формує маршрути з файлової структури та як Next.js обробляє переходи між сторінками.
В App Router маршрути Next.js визначаються структурою папки app. Кожна папка відповідає одному сегменту URL, а файл page.js або page.tsx робить цей сегмент доступним як сторінку.
Наприклад:
app/
├── page.js
├── about/
│ └── page.js
└── products/
├── page.js
└── reviews/
└── page.jsЦя структура створює такі маршрути:
| Файл | URL | |---|---|
app/page.js/app/about/page.js/aboutapp/products/page.js/productsapp/products/reviews/page.js/products/reviewsНазва папки стає частиною URL, а page.js не додається до адреси.
Файл app/page.js відповідає за кореневий маршрут /.
export default function HomePage() {
return (
<main>
<h1>Головна сторінка</h1>
<p>Вітаємо в нашому застосунку.</p>
</main>
);
}Компонент сторінки має бути експортований за замовчуванням (default export). Next.js використовує цей компонент для відображення відповідного маршруту.
Щоб створити маршрут /about, потрібно додати папку about із файлом page.js:
app/
├── page.js
└── about/
└── page.jsВміст app/about/page.js:
export default function AboutPage() {
return (
<main>
<h1>Про нас</h1>
<p>Це сторінка з інформацією про застосунок.</p>
</main>
);
}Тепер сторінка доступна за адресою:
/aboutТак само папка app/blog/posts із файлом page.js створює маршрут /blog/posts.
Файл layout.js визначає спільну структуру сторінки для маршруту та його дочірніх маршрутів. Кореневий app/layout.js зазвичай містить обов’язкові HTML-елементи html і body.
import Link from 'next/link';
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>
<header>
<nav>
<Link href="/">Головна</Link>
{' | '}
<Link href="/about">Про нас</Link>
</nav>
</header>
{children}
</body>
</html>
);
}children — це поточна сторінка або вкладений layout.
Наприклад, коли користувач переходить на /about, Next.js відображає:
app/layout.js;
app/about/page.js замість children.
Layout не перемонтовується під час переходу між його дочірніми сторінками. Це дає змогу зберігати спільну структуру інтерфейсу.
LinkДля навігації між маршрутами використовуйте компонент Link з next/link:
import Link from 'next/link';
export default function HomePage() {
return (
<main>
<h1>Головна сторінка</h1>
<Link href="/about">Перейти до сторінки «Про нас»</Link>
</main>
);
}Після натискання на посилання Next.js виконує клієнтський перехід між сторінками. Браузер не завантажує весь документ заново, тому навігація зазвичай відбувається швидше, ніж у випадку звичайного HTML-посилання.
Для переходу на зовнішній сайт використовуйте звичайний елемент <a>:
<a href="https://example.com">Зовнішній сайт</a>Link призначений насамперед для маршрутів усередині поточного Next.js-застосунку.
Іноді частина URL має бути змінною. Наприклад, сторінки товарів можуть мати адреси:
/products/1
/products/2
/products/3Для цього використовується папка в квадратних дужках:
app/
└── products/
└── [id]/
└── page.jsФайл app/products/[id]/page.js може виглядати так:
export default async function ProductPage({ params }) {
const { id } = await params;
return (
<main>
<h1>Товар</h1>
<p>ID товару: {id}</p>
</main>
);
}У цьому випадку сегмент [id] відповідає будь-якому значенню в цій частині URL:
/products/1 → id дорівнює "1";
/products/abc → id дорівнює "abc".
У сучасних версіях Next.js параметри сторінки в App Router можуть бути асинхронними, тому в прикладі використано await params.
Структура застосунку:
app/
├── about/
│ └── page.js
├── products/
│ └── [id]/
│ └── page.js
├── layout.js
└── page.jsapp/layout.js:
import Link from 'next/link';
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>
<nav>
<Link href="/">Головна</Link>
{' | '}
<Link href="/about">Про нас</Link>
{' | '}
<Link href="/products/42">Товар 42</Link>
</nav>
{children}
</body>
</html>
);
}app/page.js:
export default function HomePage() {
return (
<main>
<h1>Головна</h1>
<p>Оберіть сторінку в навігації.</p>
</main>
);
}app/about/page.js:
export default function AboutPage() {
return (
<main>
<h1>Про нас</h1>
<p>Це сторінка про наш застосунок.</p>
</main>
);
}app/products/[id]/page.js:
export default async function ProductPage({ params }) {
const { id } = await params;
return (
<main>
<h1>Сторінка товару</h1>
<p>Ви переглядаєте товар з ID: {id}</p>
</main>
);
}Після запуску застосунку маршрути працюватимуть так:
/ — головна сторінка
/about — сторінка «Про нас»
/products/42 — сторінка товару з id = 42У більшості випадків для переходів достатньо Link. Але іноді перехід потрібно виконати після дії користувача, наприклад після натискання кнопки або завершення форми.
Для цього можна використати useRouter з next/navigation. Компонент, який використовує цей хук, має бути клієнтським компонентом:
'use client';
import { useRouter } from 'next/navigation';
export default function GoToAboutButton() {
const router = useRouter();
function handleClick() {
router.push('/about');
}
return <button onClick={handleClick}>Перейти до «Про нас»</button>;
}Основні методи router:
router.push('/about') — перейти на маршрут;
router.replace('/about') — замінити поточний запис в історії браузера;
router.back() — повернутися на попередню сторінку.
Для звичайних посилань на сторінки краще використовувати Link. useRouter потрібен тоді, коли навігація є частиною JavaScript-логіки.
Коли користувач відкриває маршрут або переходить на нього через Link, Next.js:
визначає відповідну структуру папок у app;
знаходить потрібний page.js;
передає сторінці параметри динамічних сегментів, якщо вони є;
відображає сторінку всередині відповідного layout;
оновлює URL браузера.
Під час клієнтського переходу через Link Next.js може завчасно підготувати дані для маршруту. Це називається попереднім завантаженням маршруту. У результаті наступна сторінка часто відкривається без повного перезавантаження браузера.
page.jsФайл page.js має знаходитися всередині папки app або її підпапки:
app/about/page.jsФайл app/about.js не створить маршрут /about в App Router.
hrefДля маршруту /about потрібно вказати:
<Link href="/about">Про нас</Link>Не додавайте до href назву файлу page.js.
useRouter без use clientЯкщо компонент використовує useRouter, обробники подій або інші клієнтські можливості, на початку файлу має бути:
'use client';Без цієї директиви компонент за замовчуванням є серверним і не може використовувати клієнтські хуки.
Link і звичайним посиланнямДля внутрішніх маршрутів Next.js використовуйте:
<Link href="/about">Про нас</Link>Звичайний <a> теж може перейти на адресу, але він викликає повне завантаження документа.
default exportСторінка повинна експортувати компонент за замовчуванням:
export default function AboutPage() {
return <h1>Про нас</h1>;
}Експорт лише через export function AboutPage() не визначає сторінку в очікуваний спосіб.
App Router визначає маршрути на основі структури папки app.
Файл page.js створює доступну сторінку.
app/page.js відповідає маршруту /.
Вкладені папки створюють вкладені URL.
layout.js містить спільну структуру для сторінок.
Link використовується для переходів між внутрішніми маршрутами.
Папка [id] створює динамічний сегмент маршруту.
useRouter дає змогу виконувати навігацію з JavaScript-коду.