FSD и Next.js
Вопрос
Как FSD уживается с Next.js, где роутинг задан структурой папок?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
папка app или pages у Next занята роутингом, слой app к ней не приравнивается
обычный приём - держать FSD в src, а роутовые файлы делать тонкими
файл роута только импортирует страницу из слоя pages
слой pages переименовывают, чтобы не путать с роутингом Next
серверные и клиентские границы ложатся на сегменты api и ui
правило импортов проверяется тем же линтером, роутинг ему не мешает
Что могут спросить следом
- Куда класть server actions?
- А middleware и layout?
Разбор
Конфликт только в именах. У Next папка app/ (или pages/) занята роутингом,
а в FSD так называются слои.
Рабочая схема: роутовые файлы держат тонкими - они лишь импортируют экран из FSD-слоя и ничего не решают:
// app/products/[id]/page.tsx
import { ProductPage } from '@/views/product';
export default ProductPage;
Слой pages при этом часто переименовывают в views или screens, чтобы имя не
пересекалось с роутингом. Это допускается: методология про правила, а не про буквы
в названиях.
Серверные компоненты и use client ложатся на сегменты естественно: данные - в api,
разметка - в ui. Правило импортов от этого не меняется.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.