Пошук уроків, статей та іншого контенту
Дізнаєтеся, як Private Folders приховують службові директорії від маршрутизації та впорядковують код.
Private Folders — це директорії в app, назва яких починається з підкреслення (_).
Next.js не використовує такі директорії як сегменти URL. Вони виключаються з маршрутизації, але їхній код можна імпортувати в інші компоненти та сторінки.
Наприклад:
app/
├── page.tsx
├── dashboard/
│ ├── page.tsx
│ └── _components/
│ └── StatsCard.tsx
└── _lib/
└── formatCurrency.tsУ цьому прикладі:
app/page.tsx відповідає маршруту /;
app/dashboard/page.tsx відповідає маршруту /dashboard;
_components не створює маршрут;
_lib також не створює маршрут;
файли з _components і _lib можна використовувати в коді застосунку.
У app-директорії структура папок зазвичай відповідає структурі URL. Через це службові файли можуть виглядати як частина маршрутизації, хоча насправді вони потрібні лише для внутрішньої організації коду.
Private Folders допомагають розділити:
сторінки та layout-компоненти;
компоненти, які використовуються лише в певному маршруті;
допоміжні функції;
локальні типи;
службову логіку.
Наприклад, компоненти для сторінки dashboard можна зберігати поруч із самою сторінкою:
app/
└── dashboard/
├── page.tsx
├── loading.tsx
├── error.tsx
└── _components/
├── StatsCard.tsx
└── RecentOrders.tsxПри цьому URL /dashboard/_components/StatsCard не з’явиться.
Розглянемо просту сторінку dashboard із локальним компонентом.
app/
└── dashboard/
├── page.tsx
└── _components/
└── StatsCard.tsx// app/dashboard/_components/StatsCard.tsx
type StatsCardProps = {
title: string;
value: string;
};
export function StatsCard({ title, value }: StatsCardProps) {
return (
<article>
<h2>{title}</h2>
<p>{value}</p>
</article>
);
}// app/dashboard/page.tsx
import { StatsCard } from "./_components/StatsCard";
export default function DashboardPage() {
return (
<main>
<h1>Панель керування</h1>
<StatsCard title="Користувачі" value="1 248" />
<StatsCard title="Замовлення" value="386" />
</main>
);
}У результаті:
сторінка доступна за адресою /dashboard;
StatsCard використовується сторінкою;
адреса /dashboard/_components/StatsCard не створюється;
_components залишається деталлю внутрішньої структури проєкту.
Private Folder можна створити на будь-якому рівні всередині app.
app/
├── _components/
│ └── Header.tsx
├── page.tsx
└── about/
└── page.tsx_components не впливає на маршрути / і /about, але його компоненти можуть використовуватися в різних частинах застосунку.
app/
└── settings/
├── page.tsx
└── _components/
└── SettingsForm.tsxКомпонент SettingsForm призначений для маршруту /settings, але не є окремим маршрутом.
app/
└── projects/
└── [projectId]/
├── page.tsx
└── _components/
└── ProjectDetails.tsxУ цьому випадку:
[projectId] є динамічним сегментом маршруту;
сторінка відповідає URL /projects/some-id;
_components виключений із URL;
ProjectDetails можна імпортувати у page.tsx.
Назва звичайної директорії в app може стати частиною URL:
app/
└── profile/
└── page.tsxЦя структура створює маршрут:
/profileЯкщо директорія має префікс _:
app/
└── _profile/
└── page.tsxвона не використовується як маршрут. page.tsx у такій директорії не створює доступну сторінку.
Отже, порівняння виглядає так:
app/
├── profile/
│ └── page.tsx → /profile
└── _profile/
└── page.tsx → не створює маршрутДля приватної директорії використовується підкреслення на початку назви:
_components
_lib
_types
_utilsНазва може містити кілька слів:
_form-components
_server-utils
_shared-typesГоловна умова — перший символ назви директорії має бути _.
За домовленістю можна використовувати різні назви залежно від призначення:
_components — компоненти;
_lib — допоміжні модулі;
_utils — утилітарні функції;
_types — локальні типи;
_constants — константи.
Важливо, щоб команда застосовувала послідовне правило іменування.
Private Folder особливо корисний, коли код належить лише одному маршруту.
app/
└── checkout/
├── page.tsx
├── _components/
│ ├── CartSummary.tsx
│ └── PaymentForm.tsx
└── _lib/
└── calculateTotal.tsУ такій структурі легко зрозуміти призначення файлів:
page.tsx — сторінка checkout;
_components — компоненти лише для checkout;
_lib — допоміжна логіка лише для checkout.
Якщо компонент використовується багатьма маршрутами, його можна розмістити в приватній директорії в корені app:
app/
├── _components/
│ └── Button.tsx
├── dashboard/
│ └── page.tsx
└── settings/
└── page.tsxТоді сторінки можуть імпортувати його відносним шляхом або через налаштований alias:
import { Button } from "../_components/Button";Точний шлях імпорту залежить від розташування файлу, але префікс _ не заважає імпортуванню.
Private Folders і Route Groups обидва можуть не відображатися в URL, але вирішують різні завдання.
Позначається підкресленням:
app/
└── dashboard/
└── _components/
└── StatsCard.tsxПризначення:
приховати службову директорію від маршрутизації;
зберігати внутрішні компоненти та модулі;
організувати код поруч із маршрутом.
Позначається круглими дужками:
app/
└── (marketing)/
├── page.tsx
└── pricing/
└── page.tsxПризначення:
організувати маршрути в групу;
впливати на структуру layout;
не додавати назву групи до URL.
У цьому прикладі:
(marketing) не входить до URL;
page.tsx відповідає /;
pricing/page.tsx відповідає /pricing.
Private Folder призначений переважно для службового коду, а Route Group — для організації маршрутів і layout-компонентів.
Private Folder приховує директорію від маршрутизації, але не є механізмом безпеки.
Якщо код помістити в _lib, це не означає, що він автоматично стає захищеним від доступу з клієнта. Безпека залежить від того:
де використовується код;
чи потрапляє він у клієнтський бандл;
чи перевіряються права доступу;
чи є серверна логіка доступною через окремі обробники.
Private Folder — це спосіб організації файлів, а не система контролю доступу.
Також назва папки з _ не змінює правила імпорту. Компонент усе одно потрібно експортувати та імпортувати звичайним способом.
Структура:
app/
└── _help/
└── page.tsxне створює маршрут /_help.
Якщо потрібна доступна сторінка, директорія не повинна мати префікс _:
app/
└── help/
└── page.tsxПрефікс _ не захищає дані та не обмежує доступ користувачів.
Не слід покладатися на таку структуру для перевірки автентифікації або прав доступу.
Ці синтаксичні позначення мають різне призначення:
_components — приватна директорія для службового коду
(marketing) — група маршрутівЯкщо потрібно лише зберегти компонент поза маршрутизацією, використовуйте _components. Якщо потрібно логічно згрупувати маршрути або налаштувати layout для групи, використовуйте Route Group.
Private Folders мають допомагати навігації по проєкту. Якщо для кожного файлу створювати окрему директорію, структура може стати складнішою.
Створюйте приватні директорії там, де вони справді відокремлюють службовий код від маршрутів.
Private Folder — це директорія, назва якої починається з _.
Next.js виключає її з маршрутизації.
Файли з Private Folder можна імпортувати у сторінки, layout-компоненти та інші модулі.
Private Folders зручно використовувати для локальних компонентів, типів, утиліт і допоміжної логіки.
app/dashboard/_components не створює маршрут /dashboard/_components.
Private Folder не є механізмом захисту даних.
Не плутайте Private Folders із Route Groups: вони приховуються від URL з різних причин і мають різне призначення.