Пошук уроків, статей та іншого контенту
Дослідите app directory, правила вкладених маршрутів і спосіб перетворення папок на URL-адреси.
app directoryapp directory — це спеціальна папка Next.js, у якій створюють сторінки, вкладені маршрути та спільні макети застосунку.
Вона розташовується в корені проєкту:
my-next-app/
├── app/
├── public/
├── package.json
└── ...Усередині app кожна папка може відповідати окремому сегменту URL-адреси. Файл page.js або page.tsx перетворює папку на доступний маршрут.
Наприклад:
app/
├── page.js
├── about/
│ └── page.js
└── blog/
└── page.jsЦя структура створює такі маршрути:
| Файл | URL | |---|---| | app/page.js | / | | app/about/page.js | /about | | app/blog/page.js | /blog |
Файл app/page.js відповідає за головну сторінку застосунку:
export default function HomePage() {
return (
<main>
<h1>Головна сторінка</h1>
<p>Вітаємо в нашому Next.js застосунку.</p>
</main>
);
}Експортована за замовчуванням функція є React-компонентом сторінки. Її назва може бути будь-якою, але файл має називатися саме page.js або page.tsx.
Щоб створити сторінку /about, потрібно створити папку about усередині app, а в ній файл page.js:
app/
├── page.js
└── about/
└── page.jsВміст app/about/page.js:
export default function AboutPage() {
return (
<main>
<h1>Про нас</h1>
<p>Це сторінка з інформацією про застосунок.</p>
</main>
);
}Тепер сторінка буде доступна за адресою:
/aboutНазва компонента AboutPage не впливає на URL. URL формується з назв папок.
Маршрути можуть мати кілька рівнів вкладеності. Наприклад, структура:
app/
└── dashboard/
└── settings/
└── page.jsвідповідає URL:
/dashboard/settingsФайл app/dashboard/settings/page.js може містити:
export default function SettingsPage() {
return (
<main>
<h1>Налаштування</h1>
<p>Керуйте параметрами свого профілю.</p>
</main>
);
}Кожна папка додає один сегмент до URL:
app/
└── dashboard/
└── settings/
└── page.jsdashboard → /dashboard
settings → /dashboard/settings
page.js → сторінка маршруту
layout.jsУ app зазвичай створюють кореневий файл layout.js. Він містить спільну структуру всіх сторінок застосунку.
Кореневий макет є обов’язковим для App Router. Він має приймати children і містити теги <html> та <body>:
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>{children}</body>
</html>
);
}children — це поточна сторінка або вкладений макет, який Next.js вставляє всередину кореневого макета.
Базова структура застосунку може мати такий вигляд:
app/
├── layout.js
├── page.js
└── about/
└── page.jsФайл app/layout.js:
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>
<header>
<nav>Навігація</nav>
</header>
{children}
</body>
</html>
);
}Файл app/page.js:
export default function HomePage() {
return (
<main>
<h1>Головна</h1>
</main>
);
}Файл app/about/page.js:
export default function AboutPage() {
return (
<main>
<h1>Про нас</h1>
</main>
);
}І головна сторінка, і сторінка /about отримають спільний <header> з layout.js.
Окремий маршрут також може мати власний layout.js. Такий макет застосовується до сторінки та всіх її вкладених сторінок.
Структура:
app/
├── layout.js
└── dashboard/
├── layout.js
├── page.js
└── settings/
└── page.jsУ цьому прикладі:
app/layout.js застосовується до всього застосунку;
app/dashboard/layout.js застосовується до /dashboard;
app/dashboard/layout.js також застосовується до /dashboard/settings.
Файл app/dashboard/layout.js:
export default function DashboardLayout({ children }) {
return (
<section>
<aside>
<p>Меню панелі керування</p>
</aside>
<div>{children}</div>
</section>
);
}Файл app/dashboard/page.js:
export default function DashboardPage() {
return <h1>Панель керування</h1>;
}Файл app/dashboard/settings/page.js:
export default function DashboardSettingsPage() {
return <h1>Налаштування панелі керування</h1>;
}Сторінка /dashboard/settings буде вкладена спочатку в dashboard/layout.js, а потім у кореневий app/layout.js.
Для звичайних маршрутів діють такі правила:
Папка всередині app створює сегмент URL.
page.js визначає вміст сторінки цього маршруту.
app/page.js відповідає за URL /.
Назви папок використовуються в URL без змін.
Вкладені папки формують вкладені URL.
layout.js не додає сегмент URL, а визначає спільну структуру сторінок.
Наприклад:
app/
├── page.js
├── products/
│ ├── page.js
│ └── reviews/
│ └── page.js
└── contact/
└── page.jsМаршрути:
app/page.js → /
app/products/page.js → /products
app/products/reviews/page.js → /products/reviews
app/contact/page.js → /contactСтруктура:
app/
├── layout.js
├── page.js
├── about/
│ └── page.js
└── products/
└── page.jsapp/layout.js:
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>
<header>
<h2>Мій магазин</h2>
</header>
{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/page.js:
const products = ['Ноутбук', 'Клавіатура', 'Миша'];
export default function ProductsPage() {
return (
<main>
<h1>Товари</h1>
<ul>
{products.map((product) => (
<li key={product}>{product}</li>
))}
</ul>
</main>
);
}Після запуску застосунку ці файли створять:
/ — головна сторінка;
/about — інформація про магазин;
/products — список товарів.
page.jsЦя структура не створить маршрут:
app/
└── about/
└── AboutComponent.jsNext.js не вважає довільний файл сторінкою. Потрібен файл із зарезервованою назвою:
app/
└── about/
└── page.jspage.jsФайл page.js має бути всередині папки маршруту:
app/about/page.jsФайл app/about.js не створює маршрут /about в App Router.
layout.jsДля app потрібен кореневий макет із тегами <html> і <body>:
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>{children}</body>
</html>
);
}page до URLНазва page.js не є частиною URL.
app/about/page.js → /aboutа не:
/about/pageНазви папок є частиною URL. Наприклад:
app/Products/page.jsвідповідає маршруту:
/ProductsЦе не те саме, що /products. Щоб уникати плутанини, зазвичай використовують назви папок у нижньому регістрі.
app — основна папка для маршрутів у Next.js App Router.
Папки всередині app перетворюються на сегменти URL.
page.js створює сторінку для відповідного маршруту.
app/page.js відповідає за головну адресу /.
Вкладені папки створюють вкладені URL, наприклад /dashboard/settings.
layout.js містить спільний інтерфейс і не додає сегмент до URL.
Кореневий app/layout.js має містити <html>, <body> і children.