> Какие преимущества у Next.js (JavaScript, Next.js)

Короткий ответ

Next.js - это React-фреймворк, который даёт SSR, SSG, ISR и API-роуты из коробки. Основные преимущества: улучшенный SEO за счёт серверного рендеринга, автоматическое разделение кода, встроенная оптимизация изображений и шрифтов, file-based routing, middleware, а также поддержка React Server Components и App Router. Это снижает overhead разработки и упрощает деплой.

Подробное объяснение

Next.js решает ключевые проблемы React SPA: плохой SEO, медленный initial load и сложность настройки сборки. Основные преимущества:

• SSR (Server-Side Rendering): страницы рендерятся на сервере, отдаётся готовый HTML - это улучшает SEO и время до первого отображения (FCP).
• SSG (Static Site Generation): генерация статики на этапе сборки - идеально для контентных сайтов, минимальное время загрузки.
• ISR (Incremental Static Regeneration): комбинация SSG и динамики - страницы обновляются в фоне без полной пересборки.
• File-based routing: файловая система определяет роуты, не нужно писать React Router вручную.
• API routes: можно создавать backend-эндпоинты прямо в проекте, без отдельного сервера.
• Image Optimization: встроенный компонент next/image автоматически оптимизирует изображения (resize, WebP, lazy loading).
• Middleware: выполнение кода до завершения запроса - для редиректов, A/B тестов, проверки авторизации.
• React Server Components (App Router): разделение клиентского и серверного кода, уменьшение bundle-размера.
• Automatic code splitting: каждый роут получает только свой JS, без загрузки всего приложения.
• Edge Runtime: возможность запускать код на граничной сети (Vercel Edge) для минимальной задержки.

На практике

Для senior-разработчика ключевые моменты:

• Выбор стратегии рендеринга: не всегда SSR - лучшее решение. Для дашбордов с частыми обновлениями подойдёт CSR или ISR с коротким revalidate. Для блогов - SSG.
• App Router vs Pages Router: App Router (с 13 версии) - новый стандарт, но требует понимания Server Components и streaming. Pages Router - стабильнее, но legacy.
• Оптимизация производительности: используйте next/dynamic для lazy loading компонентов, next/image для изображений, избегайте излишнего 'use client' в Server Components.
• Middleware: не злоупотребляйте - каждый middleware выполняется на каждый запрос, что может замедлить ответ.
• Data fetching: в App Router используйте fetch с кэшированием (force-cache, no-store) и параллельные запросы через Promise.all.
• Деплой: на Vercel - минимальная конфигурация, на собственном сервере - настройка Node.js окружения и обработка статики.

Пример кода

JSX
// app/page.js - Server Component (App Router)
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } });
  return res.json();
}

export default async function Home() {
  const posts = await getPosts();
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

JSX
// app/api/auth/route.js - API Route
export async function POST(request) {
  const body = await request.json();
  // проверка токена
  return Response.json({ status: 'ok' });
}

Как отвечать на собеседовании

Начните с ключевых преимуществ: SSR/SSG/ISR, file-based routing, оптимизация. Затем переходите к практическим аспектам: когда выбирать App Router, как управлять кэшированием, как избегать типичных ошибок (например, излишнего использования 'use client'). Упомяните trade-off: Next.js не всегда нужен - для простого SPA без SEO он избыточен. Покажите понимание внутренних механизмов: как работает hydration, streaming, как Next.js оптимизирует bundle. Если спросят про деплой - объясните разницу между Vercel и self-hosted.

Что проверяет интервьюер

• Понимание разницы между SSR, SSG, ISR и когда что применять.
• Знание App Router и React Server Components.
• Умение оптимизировать производительность (image, fonts, code splitting).
• Опыт с middleware и API routes.
• Понимание ограничений Next.js (например, сложность с WebSocket, большие проекты).

Типичные ошибки

• Путаница между SSR и SSG: думают, что SSR всегда быстрее - на самом деле SSG быстрее для статики.
• Злоупотребление 'use client': превращают Server Components в Client Components, теряя преимущества.
• Игнорирование кэширования: не используют revalidate или no-store, что приводит к избыточным запросам.
• Middleware для тяжёлых операций: выполняют запросы к БД в middleware - это блокирует все запросы.
• Неправильная работа с изображениями: не используют next/image, загружают огромные картинки без оптимизации.
• Забывают про streaming: не используют loading.js или Suspense, что ухудшает UX.