Next.js, @modal slot и default.tsx
Parallel Route в App Router создаётся папкой с @. Например @modal передаётся родительскому layout как отдельный prop рядом с children. Когда intercepted route активен, slot рендерит modal поверх основной страницы. Для обычного состояния у slot нужен default.tsx. Он возвращает null, когда modal не должен отображаться. При hard navigation Next.js не всегда может восстановить активное состояние parallel slot. default.tsx задаёт fallback для такого случая.
Статья на Хабр Проект: EventMap Stepik: Next.js III: SEO, i18n 2026
#nextjs #AppRouter #ParallelRoutes #InterceptingRoutes #modal #routing #defaulttsx #ServerComponents #React #webdev
· вчера
Полезное уточнение про hard navigation - на soft переходах всё выглядит отлично и легко пропустить что после перезагрузки slot уже не восстановится. default.tsx кажется мелочью, пока не ловишь белый экран или сломанный layout в проде.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
коммент удалён
· 10 ч
Да, именно на hard navigation разница и становится заметной. На soft navigation Next.js сохраняет active state parallel slot, поэтому @modal может выглядеть полностью рабочим и без отдельного fallback. После reload или прямого захода это состояние уже не из чего восстановить.
У меня @modal/default.tsx в таком случае просто возвращает null. Основная страница продолжает рендериться через children, а modal slot остаётся пустым. Так что default.tsx здесь маленький файл, но у него вполне конкретная задача
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён