Пошук уроків, статей та іншого контенту
Ознайомитеся з призначенням основних папок і файлів Next.js проєкту та їхньою роллю в розробці.
Next.js проєкт складається з файлів конфігурації, папок із кодом застосунку та службових директорій. Частину структури створює інструмент create-next-app, а частину розробник додає під час роботи.
Сучасні проєкти Next.js зазвичай використовують App Router. У такому випадку основний код розміщується в папці app або src/app.
Приклад типової структури:
my-next-app/
├── app/
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── public/
├── node_modules/
├── .gitignore
├── next.config.mjs
├── package.json
├── package-lock.json
└── tsconfig.jsonЯкщо під час створення проєкту була вибрана папка src, структура може виглядати так:
my-next-app/
├── public/
├── src/
│ └── app/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── package.json
└── ...app і src/app виконують однакову роль. Важливо використовувати лише один із цих варіантів.
appПапка app містить сторінки, макети та інші частини інтерфейсу застосунку.
Усередині app назва папки зазвичай відповідає частині URL, а спеціальні назви файлів мають визначене призначення.
Наприклад:
app/
├── about/
│ └── page.tsx
├── layout.tsx
└── page.tsxЦя структура створює два маршрути:
app/page.tsx — сторінка за адресою /;
app/about/page.tsx — сторінка за адресою /about.
page.tsxФайл page.tsx визначає вміст сторінки для певного маршруту.
Приклад головної сторінки:
export default function HomePage() {
return (
<main>
<h1>Вітаємо у моєму Next.js застосунку</h1>
<p>Це головна сторінка сайту.</p>
</main>
);
}Компонент, експортований за замовчуванням, використовується Next.js як вміст маршруту.
Для сторінки /about файл матиме такий вигляд:
export default function AboutPage() {
return (
<main>
<h1>Про нас</h1>
<p>Це сторінка з інформацією про проєкт.</p>
</main>
);
}layout.tsxФайл layout.tsx містить спільну структуру для сторінки та її дочірніх маршрутів. Найчастіше в ньому розміщують:
елементи html і body;
спільний заголовок;
навігацію;
футер;
провайдери застосунку.
Кореневий макет є обов’язковою частиною App Router. Він має приймати властивість children.
import type { ReactNode } from "react";
import "./globals.css";
type RootLayoutProps = {
children: ReactNode;
};
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="uk">
<body>
<header>
<h1>Мій сайт</h1>
</header>
{children}
</body>
</html>
);
}children — це поточна сторінка або вкладений макет, який Next.js вставляє всередину кореневого макета.
Папки всередині app створюють вкладені маршрути:
app/
├── blog/
│ ├── page.tsx
│ └── first-post/
│ └── page.tsx
└── page.tsxМаршрути будуть такими:
app/page.tsx → /;
app/blog/page.tsx → /blog;
app/blog/first-post/page.tsx → /blog/first-post.
Назва папки стає частиною адреси, а файл page.tsx визначає сторінку.
globals.cssФайл globals.css містить глобальні стилі, які застосовуються до всього застосунку.
Зазвичай його імпортують у кореневому layout.tsx:
import "./globals.css";Приклад globals.css:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #222;
background-color: #f5f5f5;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 32px 16px;
}Глобальні стилі зручно використовувати для базових правил застосунку. Стилі, які стосуються лише одного компонента, краще зберігати окремо, наприклад у CSS Modules.
CSS Module — це файл із суфіксом .module.css. Його класи локальні для компонента.
Структура:
app/
├── page.tsx
├── page.module.css
└── ...Файл page.module.css:
.title {
color: darkblue;
font-size: 32px;
}Використання у page.tsx:
import styles from "./page.module.css";
export default function HomePage() {
return <h1 className={styles.title}>Головна сторінка</h1>;
}Такий клас не конфліктує з класами в інших компонентах.
publicПапка public призначена для статичних файлів:
зображень;
шрифтів;
файлів PDF;
іконок;
інших ресурсів, які потрібно віддавати без додаткової обробки.
Наприклад:
public/
├── logo.png
└── documents/
└── rules.pdfФайл із public/logo.png доступний у браузері за адресою /logo.png.
Його можна використати в компоненті:
export default function HomePage() {
return (
<main>
<h1>Мій сайт</h1>
<img src="/logo.png" alt="Логотип сайту" />
</main>
);
}Для шляху до файлу з public не потрібно писати /public. Папка public є коренем для таких URL.
package.jsonpackage.json містить основну інформацію про проєкт:
назву;
версію;
команди запуску;
залежності;
залежності для розробки.
Приклад:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "latest",
"react": "latest",
"react-dom": "latest"
}
}Найважливіші команди:
npm run dev — запускає сервер розробки;
npm run build — створює production-збірку;
npm run start — запускає вже створену production-збірку;
npm run lint — перевіряє код за правилами лінтера, якщо така команда налаштована.
Точний вміст package.json може відрізнятися залежно від версій Next.js і вибраних під час створення проєкту опцій.
node_modulesnode_modules містить встановлені пакети, зокрема:
Next.js;
React;
TypeScript;
інші залежності проєкту.
Ця папка створюється після встановлення залежностей командою:
npm installЗазвичай node_modules не додають до системи контролю версій. Для цього вона вже вказана у файлі .gitignore.
package-lock.jsonpackage-lock.json зберігає точні версії встановлених пакетів і їхніх залежностей.
Завдяки цьому різні розробники та середовища можуть встановити однаковий набір пакетів.
Якщо проєкт використовує npm, цей файл потрібно зберігати в репозиторії разом із package.json.
next.config.mjsnext.config.mjs містить налаштування Next.js.
Наприклад, у ньому можна налаштовувати підтримку зовнішніх зображень або інші параметри фреймворку:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
export default nextConfig;На початку роботи цей файл часто не потрібно змінювати. Його налаштовують тоді, коли проєкту потрібна конкретна можливість Next.js.
tsconfig.jsonЯкщо проєкт створено з TypeScript, файл tsconfig.json містить налаштування TypeScript.
Він визначає, зокрема:
правила перевірки типів;
параметри компіляції;
шляхи до файлів, які входять до проєкту.
Next.js може автоматично оновлювати цей файл під час роботи, тому не варто без потреби змінювати його налаштування.
У JavaScript-проєктах замість tsconfig.json може використовуватися jsconfig.json або жоден із цих файлів.
.gitignore і .env.gitignoreФайл .gitignore визначає, які файли Git не повинен додавати до репозиторію.
Зазвичай до нього входять:
node_modules;
.next;
локальні файли середовища;
тимчасові файли.
.envФайли середовища використовують для змінних конфігурації, наприклад адреси сервісу або ключа API.
Приклад:
API_URL=https://api.example.comФайл із секретними значеннями не слід додавати до репозиторію. Такі значення потрібно зберігати в локальних або захищених змінних середовища.
Для змінної, яку потрібно передати в браузер, у Next.js використовується префікс NEXT_PUBLIC_. Наприклад:
NEXT_PUBLIC_SITE_NAME=Мій сайтЗмінні з таким префіксом не є секретними, оскільки їхнє значення може потрапити до клієнтського коду.
.nextПапка .next створюється Next.js автоматично під час запуску або збірки проєкту.
У ній зберігаються:
результати компіляції;
кеш;
підготовлені файли для запуску.
Не потрібно редагувати файли в .next вручну. Також цю папку зазвичай не додають до Git.
Мінімальний застосунок може мати таку структуру:
my-next-app/
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── public/
│ └── logo.png
├── package.json
└── tsconfig.jsonapp/layout.tsx:
import type { ReactNode } from "react";
import "./globals.css";
type LayoutProps = {
children: ReactNode;
};
export default function Layout({ children }: LayoutProps) {
return (
<html lang="uk">
<body>{children}</body>
</html>
);
}app/page.tsx:
export default function HomePage() {
return (
<main>
<h1>Каталог товарів</h1>
<p>Оберіть товар, який вас цікавить.</p>
<img src="/logo.png" alt="Логотип магазину" />
</main>
);
}app/globals.css:
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f0f2f5;
}
main {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px;
}
h1 {
color: #1f2937;
}Після запуску командою:
npm run devголовна сторінка буде доступна за адресою /, а зображення public/logo.png — за адресою /logo.png.
page.tsxФайл сторінки повинен мати назву page.tsx або page.jsx і розташовуватися всередині app.
Неправильно:
app/
└── home.tsxПравильно:
app/
└── home/
└── page.tsx/publicНеправильно:
<img src="/public/logo.png" alt="Логотип" />Правильно:
<img src="/logo.png" alt="Логотип" />layout.tsxКореневий layout.tsx потрібен для App Router. Він повинен містити html, body і властивість children.
.next.next — це результат роботи Next.js, а не папка для вихідного коду. Зміни потрібно вносити в app, public або інші папки проєкту.
Не слід записувати паролі та приватні ключі безпосередньо у файлах компонентів або додавати їх до відкритого репозиторію. Для конфігурації використовують змінні середовища.
app або src/app містить сторінки та макети застосунку.
page.tsx визначає сторінку маршруту.
layout.tsx містить спільну структуру сторінки та вкладених маршрутів.
Назви папок усередині app формують URL.
globals.css містить глобальні стилі.
public зберігає статичні файли, доступні через URL від кореня сайту.
package.json містить залежності та команди проєкту.
next.config.mjs містить налаштування Next.js.
tsconfig.json налаштовує TypeScript.
.next і node_modules створюються автоматично та не призначені для ручного редагування.