Next.js: вопросы на собеседовании

Вопросы и ответы по Next.js: подготовка, примеры и типичные ошибки.

1. В чём разница между App Router и Pages Router в Next.js?
   Middle· спрашивают почти всегда
2. Как работает кэширование в Next.js 14/15? Объясните Request Memoization, Data Cache, Full Route Cache и Router Cache.
   Senior· спрашивают почти всегда· полный разбор — Jobs/Boost
3. В каких типах frontend-проектов Next.js даёт реальный выигрыш, а где будет избыточен или неудачен?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
4. Какие security-риски есть у Server Actions и как защищаться от CSRF/IDOR?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
5. Как оптимизировать производительность Next.js-приложения?
   Senior· спрашивают почти всегда· полный разбор — Jobs/Boost
6. Что такое React Server Components в Next.js? Чем они отличаются от Client Components?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
7. Объясните SSR, SSG, ISR и CSR в Next.js. Когда использовать каждый подход?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
8. Как реализовать аутентификацию в приложении Next.js App Router?
   Senior· полный разбор — Jobs/Boost
9. Как работает получение данных (data fetching) в App Router? Как получать данные в Server Components?
   Middle· полный разбор — Jobs/Boost
10. Что такое файловая система маршрутизации в Next.js? Объясните динамические маршруты, catch-all маршруты и группы маршрутов.
    Junior· полный разбор — Jobs/Boost
11. Как обрабатывать отправку форм с помощью Server Actions и useFormState?
    Middle· полный разбор — Jobs/Boost
12. Что такое Incremental Static Regeneration (ISR) и как настроить ревалидацию?
    Senior· полный разбор — Jobs/Boost
13. Что такое layouts в App Router Next.js? Как работают вложенные layouts?
    Junior· полный разбор — Jobs/Boost
14. Что такое Middleware в Next.js и каковы его варианты использования?
    Middle
15. Как сравнить Next.js с ближайшими альтернативами по DX, performance, SEO, accessibility, hiring и поддержке команды?
    Middle· полный разбор — Jobs/Boost
16. Как понять, что проблема в проекте связана с Next.js, а не с API, сетью, дизайном состояния или плохой архитектурой?
    Senior
17. Представьте, приложение на Next.js стало медленно открываться или часто перерисовываться. Как вы будете искать причину?
    Senior· полный разбор — Jobs/Boost
18. Какие архитектурные решения Next.js навязывает вокруг rendering, state, routing, styling, data loading или deployment?
    Middle
19. Какие production-риски есть у Next.js: hydration, bundle size, caching, accessibility, browser compatibility или observability?
    Senior· полный разбор — Jobs/Boost
20. Проект на Next.js вырос из небольшого интерфейса в большой продукт. Какие архитектурные проблемы вы ожидаете увидеть?
    Senior· полный разбор — Jobs/Boost
21. Как настроить API-маршруты в App Router с помощью Route Handlers?
    Junior
22. Как App Router в Next.js управляет SEO? Что такое generateMetadata?
    Middle· полный разбор — Jobs/Boost
23. Что такое Server Actions в Next.js и как они работают?
    Middle
24. Что такое Streaming в Next.js и как он работает с loading.tsx и Suspense?
    Middle· полный разбор — Jobs/Boost
25. Когда следует добавлять "use client" в компонент? Какие компромиссы это несёт?
    Junior· полный разбор — Jobs/Boost
26. Как развернуть Next.js-приложение на Vercel и в самостоятельно управляемой среде?
    Senior· полный разбор — Jobs/Boost
27. Как обрабатывать ошибки в Next.js App Router с помощью error.tsx и not-found.tsx?
    Junior· полный разбор — Jobs/Boost
28. В чём разница между generateStaticParams и getStaticPaths?
    Middle· полный разбор — Jobs/Boost
29. Как реализовать интернационализацию (i18n) в Next.js?
    Middle· полный разбор — Jobs/Boost
30. Что такое next.config.js и какие параметры конфигурации наиболее важны?
    Middle
31. Что такое модуль next/font и почему его рекомендуют использовать?
    Junior
32. Как компонент Image в Next.js оптимизирует изображения?
    Junior
33. Что такое Cache Components в Next.js 16 и чем они меняют модель PPR?
    Middle· полный разбор — Jobs/Boost
34. Расскажите о случае, когда вы улучшали performance, accessibility, testing или maintainability в проекте на Next.js.
    Middle
35. Каковы ключевые отличия между Next.js 13, 14, 15 и 16 для App Router, caching и rendering model?
    Middle· полный разбор — Jobs/Boost
36. Что такое PPR (Partial Prerendering) в Next.js 15 и как его модель меняется с Cache Components в Next.js 16?
    Middle
37. Что делают директивы use cache, use cache: private и use cache: remote?
    Middle
38. Что такое Parallel Routes и Intercepting Routes?
    Middle· полный разбор — Jobs/Boost
39. Что такое unstable_cache и revalidateTag?
    Middle
40. Как управлять переменными окружения в Next.js? В чём разница между серверными и клиентскими переменными?
    Junior
41. Что такое Turbopack и чем он отличается от Webpack в Next.js?
    Middle· полный разбор — Jobs/Boost