← Усі теми

Питання на співбесіді з Next.js (Middle) з відповідями

75 запитань для співбесіди з теми Next.js (Middle) - з правильними відповідями, поясненнями й посиланнями на документацію.

Пройти цей тест
  1. 1.Що таке Server Function (Server Action) у Next.js?
  2. 2.Що дає <form action={createPost}> із Server Action порівняно з onSubmit + fetch?
  3. 3.Що робить revalidatePath('/blog') після мутації?
  4. 4.Чим updateTag відрізняється від revalidateTag у Next.js 16?
  5. 5.Чи кешуються запити fetch у серверних компонентах за замовчуванням (Next.js 15+, без Cache Components)?
  6. 6.Що робить директива 'use cache'?
  7. 7.Чому всередині функції з 'use cache' не можна викликати cookies()?
  8. 8.Який профіль cacheLife застосовується, якщо його не вказати в 'use cache'?
  9. 9.Для чого cacheTag('products') усередині закешованої функції?
  10. 10.Що робить loading.tsx під час клієнтської навігації на сегмент із повільними даними?
  11. 11.Що робить generateStaticParams?
  12. 12.Як у Next.js показати сторінку з повільними даними, не затримуючи її повністю?
  13. 13.Як уникнути водоспаду запитів, якщо компоненту потрібні незалежні getUser() і getPosts()?
  14. 14.Як уникнути подвійного запиту до БД, якщо getUser(id) викликають і generateMetadata, і сторінка?
  15. 15.Як гарантувати, що модуль із секретами ніколи не потрапить у клієнтський бандл?
  16. 16.Чи можна використовувати next/dynamic з ssr: false у серверному компоненті?
  17. 17.Навіщо обгортати компонент із useSearchParams() у <Suspense>?
  18. 18.Що таке паралельні маршрути (@slot)?
  19. 19.Для чого потрібні перехоплювальні маршрути (.)photo/[id]?
  20. 20.Як прочитати cookie в серверному компоненті Next.js 16?
  21. 21.Що робить proxy.ts (колишній middleware)?
  22. 22.Що викликати в клієнтському компоненті, щоб перезапитати серверні компоненти поточного маршруту?
  23. 23.Чим global-error.tsx відрізняється від error.tsx?
  24. 24.Що робить export const dynamic = 'force-dynamic' (без Cache Components)?
  25. 25.Які props можна передати із серверної сторінки в клієнтський компонент?
  26. 26.Як в App Router отримати дані для generateMetadata і сторінки без подвійного запиту до API через fetch?
  27. 27.Як правильно робити оптимістичний UI для Server Action на клієнті?
  28. 28.Що станеться за redirect() усередині try/catch у Server Action?
  29. 29.Чим <Form> з next/form відрізняється від звичайного <form> для форми пошуку?
  30. 30.Що робить generateMetadata порівняно зі статичним metadata?
  31. 31.Як підтримати кілька мов в App Router?
  32. 32.Як у Route Handler повернути JSON зі статусом 201?
  33. 33.Що таке Partial Prerendering (PPR) у Next.js 16?
  34. 34.Як попередньо завантажити дані для клієнтських компонентів, використовуючи TanStack Query в App Router?
  35. 35.Що станеться під час імпорту серверного компонента у файл із 'use client'?
  36. 36.Як виконати код (наприклад, аналітику) після надсилання відповіді, не затримуючи користувача?
  37. 37.Як у Next.js отримати для клієнта лише частину даних із БД, щоб не передати зайвого (наприклад, хеш пароля)?
  38. 38.Чим revalidatePath('/blog/[slug]', 'page') відрізняється від revalidatePath('/blog/my-post')?
  39. 39.Де зберігати секретний API-ключ, що використовується в серверному компоненті?
  40. 40.Що робить connection() з next/server?
  41. 41.Чим useFormStatus зручний у формах із Server Actions?
  42. 42.Який файл задає fallback для слота паралельного маршруту під час повного перезавантаження сторінки?
  43. 43.Чим статичний маршрут відрізняється від динамічного в контексті рендерингу?
  44. 44.Де правильніше перевіряти авторизацію в App Router?
  45. 45.Як обмежити, на які шляхи спрацьовує proxy.ts?
  46. 46.Чим корисний opengraph-image.tsx?
  47. 47.Де виконується код клієнтського компонента під час першого завантаження сторінки?
  48. 48.Як оновляться дані на сторінці після дії, якщо використовується revalidateTag(tag, 'max')?
  49. 49.Чим керує staleTimes у next.config?
  50. 50.Як у Server Action повернути помилки валідації у форму?
  51. 51.Як лейауту підсвітити активну вкладку серед дочірніх сегментів?
  52. 52.Що станеться в Next.js 16, якщо слот паралельного маршруту @modal не має default.tsx?
  53. 53.Чим rewrite відрізняється від redirect у next.config.ts?
  54. 54.Де додати заголовки безпеки на кшталт X-Frame-Options до всіх відповідей, не чіпаючи сторінок?
  55. 55.Форма завантажує файл на 5 МБ через Server Action і падає. Яка ймовірна причина?
  56. 56.Що робить redirect() у Server Action для форми, надісланої до завантаження JavaScript?
  57. 57.Чому не можна викликати (await cookies()).set(...) під час рендеру серверного компонента?
  58. 58.Для чого корисний output: 'standalone'?
  59. 59.Як згенерувати динамічну Open Graph-картинку (наприклад, із заголовком поста) у коді?
  60. 60.Як розбити sitemap на 200 000 URL товарів?
  61. 61.Для чого потрібен instrumentation-client.ts?
  62. 62.Що дозволяє 'use cache: private'?
  63. 63.Як із Cache Components не допустити new Date() у статичну оболонку?
  64. 64.Як глибоко вкладений серверний компонент прочитає сегмент [lang] кореневого лейауту без прокидання пропсів?
  65. 65.Для чого потрібен catchError з next/error?
  66. 66.Пакет монорепозиторію @acme/ui постачається нетранспільованим TypeScript. Як використати його в Next.js?
  67. 67.Як віддавати відповідь із Route Handler поступово (наприклад, токени ШІ)?
  68. 68.Що робить export const maxDuration = 60 у сторінці чи Route Handler?
  69. 69.Чому з cacheComponents: true не працює export const revalidate = 60 у сторінці?
  70. 70.Як рекомендується тестувати async серверний компонент?
  71. 71.Як викликати Server Action з onClick кнопки (не з форми) і показати стан очікування?
  72. 72.Чому з Cache Components форма зберігає введений текст після переходу з неї й натискання «Назад»?
  73. 73.Коли має сенс prefetch={false} у <Link>?
  74. 74.Що відбувається під час переходу між маршрутами з різними кореневими лейаутами (через групи маршрутів)?
  75. 75.Server Action працює локально, але падає за зворотним проксі з іншим хостом. Яка опція допоможе?