Skip to main content

Які теки є обов'язковими?

Next.jsMiddle~1 хв читання
Запропонувати правку

У Next.js немає «жорстко обов'язкової» структури - усе максимально ліниве. Але є мінімум, без якого застосунок не має сенсу.

Обов'язкові теки (по факту)

app/ або pages/

Хоча б одна з них

  • app/ - сучасний стандарт (App Router)
  • pages/ - старий Pages Router

Без однієї з них роутингу не буде взагалі.

Що обов'язково всередині app/

page.tsx

Мінімум одна сторінка

txt
app/page.tsx → /

Без page.tsx:

  • білд збереться
  • але жодної сторінки не буде

Необов'язкові (але часто потрібні)

layout.tsx

  • не обов'язковий
  • але якщо є page.tsx, Next сам створить дефолтний layout

Однак у реальному проєкті layout майже завжди потрібен

loading.tsx

Skeleton / fallback Не обов'язковий

not-found.tsx

Кастомний 404 Не обов'язковий

error.tsx

Error Boundary Не обов'язковий

Решта тек - повністю опціональні

ТекаОбов'язковаНавіщо
components/НіUI-компоненти
features/НіFSD
shared/Ніутиліти, UI
styles/Ніглобальні стилі
lib/Ніхелпери, сервіси
public/Ністатика
api/Ніbackend-роути
hooks/Нікастомні хуки

Next нічого з цього не вимагає.

Мінімально валідний проєкт

txt
app/ └─ page.tsx

Так, цього реально достатньо.

Часті хибні уявлення

«layout.tsx обов'язковий» → ні

«потрібен components/» → ні

«потрібен _app.tsx» → лише в pages/

«без public/ проєкт не запуститься» → запуститься

Практичний висновок

Next.js ≠ фреймворк із жорсткою архітектурою

Він:

  • дає правила роутингу
  • але не нав'язує структуру

Ти сам вирішуєш:

  • FSD / MVC / flat
  • монорепа / single
  • frontend-only чи fullstack

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку