Собеседование Next.js крутится вокруг стратегий рендеринга, App Router, серверных компонентов и кеширования — того, что отличает Next от обычного React. Ниже — самые частые вопросы с эталонными ответами. Junior: базовая теория, определения и простые практические кейсы.
Серверный рендерится на сервере, своего кода в браузер не отправляет и может читать базу напрямую. Клиентский работает в браузере, и он нужен для состояния, эффектов и обработчиков событий. Всё является серверным, пока вы не написали 'use client', а эта директива обозначает границу: всё, что импортировано ниже, тоже становится клиентским кодом.
Обозначает границу между серверным и клиентским кодом, а не отдельный файл. Поставив её в начало компонента, вы отправляете в браузер и его, и всё, что он импортирует. Поэтому ей место как можно глубже в дереве: 'use client' в лейауте затягивает в бандл всё поддерево.
Pages Router кладёт маршрут в файл и грузит данные через getServerSideProps или getStaticProps. App Router использует папки с page.tsx, поддерживает вложенные лейауты, не перерисовывающиеся при навигации, и грузит данные асинхронными компонентами. Новые проекты берут App Router; Pages существует потому, что миграции требуют времени.
page.tsx — собственное содержимое маршрута. layout.tsx оборачивает его и всё вложенное и, что важно, не перерисовывается при переходах между дочерними — поэтому навигация и боковые панели живут именно там. Состояние в лейауте переживает переход, состояние в странице нет.
Сделать серверный компонент async и дождаться данных прямо в нём — без хука, без эффекта, без состояния загрузки внутри компонента. Next отрисует его, когда промис разрешится. Файл loading.tsx рядом со страницей даёт заглушку на это время.
Link переходит на клиенте, оставляет лейаут смонтированным и предзагружает маршрут, когда тот попадает в область видимости. Обычный <a> перезагружает страницу целиком, выбрасывая дерево React и всё состояние. Использовать якорь для внутренней навигации — самый быстрый способ сделать быстрое приложение медленным на ощупь.
На собеседовании ты говоришь вслух под давлением. Кем задаст эти же вопросы, оценит каждый ответ и покажет, что именно подтянуть.
Пройти интервью Junior Next.js →