Якщо у кандидата є досвід роботи з кількома фреймворками: який будете використовувати для наступного проєкту? Які фактори будуть впливати на вибір?

Повне пояснення

Що це і навіщо Next.js 14 – фреймворк, що об’єднує серверний рендеринг (SSR), статичну генерацію сторінок (SSG) і клієнтський рендеринг у одному React‑проєкті. Він підвищує продуктивність, полегшує SEO і забезпечує швидку розробку.

Ключові принципи/терміни

• SSR / SSG – серверний рендеринг і статична генерація.
• React – бібліотека для побудови UI.
• TypeScript – статична типізація, що зменшує кількість runtime‑помилок.
• File‑based routing – маршрутизація за файловою структурою.

Як це працює

1. При запиті сервер рендерить компонент, повертаючи готовий HTML.
2. Після завантаження клієнтський JavaScript «підключається» (hydration).
3. Для SSG сторінки генеруються під час збірки і розміщуються як статичні файли.

Практика та реалізація (JS/TS)

// app/page.tsx – простий компонент
export default function Home() {
  return <h1>Привіт, Next.js!</h1>;
}

// middleware.ts – глобальний перехоплювач
import { NextResponse } from 'next/server';
export function middleware(request) {
  return NextResponse.next();
}

Тестування

• Jest + React Testing Library для юніт‑тестів компонент.
• Playwright для end‑to‑end тестування маршруту.

import { test, expect } from '@playwright/test';

test('home page loads', async ({ page }) => {
  await page.goto('/');
  expect(await page.textContent('h1')).toBe('Привіт, Next.js!');
});

Дизайн‑рішення та моделі даних

• Використання React Query або SWR для кешування даних.
• API‑роутинг через app/api/* з підтримкою JSON.

Производительность і масштабування

• Вбудований Image Optimization.
• Підтримка Incremental Static Regeneration (ISR) для оновлення сторінок без повної збірки.

Безпека і приватність

• Middleware для аутентифікації.
• Захист CSRF через заголовки XSRF-TOKEN.

Фактори вибору фреймворку

1. Технічні вимоги – SSR/SSG, SEO, TypeScript.
2. Командний досвід – знання React і Node.js.
3. Екосистема – підтримка бібліотек, плагінів і спільноти.
4. Термін розробки – швидка поставка MVP.
5. Масштабування – можливість горизонтального масштабування через Vercel, Netlify або власний VPS.

Часті помилки та edge cases

• Необхідність правильно налаштувати next.config.js для кастомних роутів.
• Перевірка типу undefined у серверних функціях, щоб уникнути runtime‑помилок.
• Забезпечення кешування даних у SSR, щоб уникнути дублювання запитів.

Cheatsheet

• npm create next-app@latest – створення нового проєкту.
• next dev – локальний сервер.
• next build && next start – продакшн збірка.

Follow‑up питання

• Як реалізувати SSR з Auth0 у Next.js?
• Які переваги ISR порівняно з традиційним SSG?