Самые популярные вопросы по Next.js на собеседовании: разбор с примерами

Next.js — один из самых популярных React-фреймворков для создания production-приложений. На собеседованиях вопросы по Next.js проверяют не только знание API, но и понимание архитектуры, рендеринга и оптимизации. Мы собрали более 30 самых популярных вопросов с подробными ответами и примерами, которые помогут вам уверенно пройти интервью.

1. Что такое Next.js?

Next.js — это React-фреймворк для создания production-приложений. Он предоставляет возможности, которых нет в чистом React:

• Маршрутизация на основе файловой системы.
• Различные стратегии рендеринга (SSR, SSG, ISR, CSR).
• Встроенная оптимизация (изображения, шрифты, скрипты).
• Поддержка API-маршрутов.
• Автоматическое разделение кода.
• Поддержка middleware и Server Actions.

2. Чем Next.js отличается от React?

React — это библиотека для создания пользовательских интерфейсов. Next.js — это фреймворк, построенный на React, который добавляет:

3. Что такое App Router?

App Router — это новая система маршрутизации, представленная в Next.js 13. Она базируется на директории app/ и поддерживает:

• Server Components по умолчанию.
• Вложенные маршруты и макеты.
• Загрузочные и ошибочные состояния.
• Параллельные и перехватывающие маршруты.
• Поддержка Suspense.

Каждая папка в app/ представляет маршрут, а специальные файлы (page.js, layout.js, loading.js и др.) определяют поведение.

4. Что такое Server Components?

Server Components — это компоненты React, которые рендерятся исключительно на сервере. Они:

• Не имеют клиентского JavaScript-бандла (уменьшают размер).
• Имеют прямой доступ к серверным ресурсам (БД, файловая система).
• Не могут использовать хуки или интерактивность.
• Могут импортировать Client Components.

В App Router все компоненты по умолчанию являются Server Components, если не указана директива 'use client'.

5. Чем Server Components отличаются от Client Components?

6. Как работает SSR (Server-Side Rendering) в Next.js?

SSR (Server-Side Rendering) — это рендеринг страницы на сервере при каждом запросе. В Pages Router использовался getServerSideProps. В App Router SSR достигается через динамические страницы (без generateStaticParams) и использование серверных компонентов. Данные можно получать напрямую в компоненте.

// app/products/page.jsx
export default async function ProductsPage() {
    const products = await fetch('https://api.example.com/products').then(r => r.json());
    return <div>{products.map(p => <div>{p.name}</div>)}</div>;
}

7. Что такое SSG (Static Site Generation)?

SSG (Static Site Generation) — это генерация статических HTML-страниц во время сборки. В Pages Router использовались getStaticProps и getStaticPaths. В App Router SSG достигается через generateStaticParams.

// app/products/[id]/page.jsx
export async function generateStaticParams() {
    const products = await fetch('https://api.example.com/products').then(r => r.json());
    return products.map(product => ({ id: product.id }));
}

export default async function ProductPage({ params }) {
    const product = await fetch(`https://api.example.com/products/${params.id}`).then(r => r.json());
    return <div>{product.name}</div>;
}

8. Что такое ISR (Incremental Static Regeneration)?

ISR (Incremental Static Regeneration) — это гибрид SSG и SSR. Страницы генерируются статически при сборке, но могут обновляться в фоне при обращении пользователей. В App Router ISR достигается через опцию next: { revalidate } в fetch или через revalidate в generateStaticParams.

// app/products/page.jsx
export default async function ProductsPage() {
    const products = await fetch('https://api.example.com/products', {
        next: { revalidate: 3600 } // Обновлять раз в час
    }).then(r => r.json());
    return <div>...</div>;
}

9. Как SSR, SSG и ISR используются в App Router?

В App Router выбор стратегии рендеринга определяется автоматически:

• Статические страницы (SSG): Если страница не использует динамические данные или использует generateStaticParams.
• Динамические страницы (SSR): Если страница использует динамические данные (например, fetch без кеширования) и не указана в generateStaticParams.
• ISR: Добавление revalidate в fetch или в generateStaticParams.

Также можно принудительно задать режим через export const dynamic = 'force-static' или 'force-dynamic'.

10. Как работает маршрутизация в Next.js?

Next.js использует файловую систему для маршрутизации:

• Pages Router (pages/): Файлы pages/index.js → /, pages/about.js → /about.
• App Router (app/): Папки с файлом page.js определяют маршруты. app/about/page.js → /about.

Поддерживаются динамические сегменты ([id]), группы маршрутов и специальные файлы.

11. Что такое динамические маршруты?

Динамические маршруты позволяют создавать страницы на основе параметров в URL. Синтаксис: квадратные скобки.

• Pages Router: pages/products/[id].js → /products/1, /products/2.
• App Router: app/products/[id]/page.js → /products/1.

Параметры доступны через params в компоненте или через useRouter.

12. Что такое catch-all и optional catch-all routes?

• Catch-all (захват всех): [...slug] — соответствует любому количеству сегментов. Например, pages/docs/[...slug].js → /docs/a, /docs/a/b, /docs/a/b/c.
• Optional catch-all (опциональный): [[...slug]] — то же, но может соответствовать и пути без сегментов. Например, pages/docs/[[...slug]].js → /docs, /docs/a, /docs/a/b.

13. Что такое группы маршрутов (Route Groups)?

Группы маршрутов позволяют организовывать файлы в папки без влияния на URL. Синтаксис: круглые скобки.

app/(marketing)/about/page.js → /about
app/(shop)/products/page.js → /products

Группы полезны для:

• Разделения логики (админка, публичная часть).
• Общих макетов для разных разделов.

14. Что такое параллельные маршруты (Parallel Routes)?

Параллельные маршруты позволяют рендерить несколько страниц одновременно в одном макете, используя слоты. Слоты определяются через именованные папки с @.

Структура:

app/
  @analytics/
    page.js
  @team/
    page.js
  layout.js

В layout.js слоты доступны как пропсы ({analytics, team}). Полезно для дашбордов, где несколько независимых секций.

15. Что такое перехватывающие маршруты (Intercepting Routes)?

Перехватывающие маршруты позволяют загружать одну страницу в контексте другой (например, модальное окно с деталями товара поверх списка). Синтаксис: (.), (..), (..)(..) для указания уровня перехвата.

Например, app/feed/(.)photo/[id]/page.js перехватит /photo/1 при навигации из /feed и откроет в модалке, но при прямом переходе откроется полная страница.

16. Что такое loading UI и Suspense?

В Next.js можно создать файл loading.js в папке маршрута. Next.js автоматически обернет страницу в Suspense и покажет этот компонент во время загрузки данных.

// app/products/loading.jsx
export default function Loading() {
    return <div>Загрузка продуктов...</div>;
}

Также можно использовать Suspense напрямую для отдельных частей страницы.

17. Как обрабатывать ошибки в Next.js?

Для обработки ошибок используются специальные файлы:

• error.js — показывает UI при ошибке (должен быть Client Component с 'use client'). Оборачивает страницу в Error Boundary.
• global-error.js — для корневых ошибок (заменяет весь HTML).

// app/products/error.jsx
'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Что-то пошло не так!</h2>
            <button onClick={reset}>Попробовать снова</button>
        </div>
    );
}

18. Как создать кастомную страницу 404?

• Глобальная 404: app/not-found.js — показывается, когда маршрут не найден.
• Локальная 404: внутри компонента можно вызвать notFound() из next/navigation, и Next.js покажет ближайший not-found.js.

19. Что такое Middleware в Next.js?

Middleware — это функция, которая выполняется перед завершением запроса. Позволяет:

• Перенаправлять пользователей.
• Переписывать URL.
• Добавлять заголовки.
• Проверять аутентификацию.
• Работать с cookies и сессиями.

Middleware создается в файле middleware.js в корне проекта.

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
    if (!request.cookies.has('token')) {
        return NextResponse.redirect(new URL('/login', request.url));
    }
}

export const config = {
    matcher: ['/dashboard/:path*']
};

20. Как создавать API-маршруты в Next.js?

• Pages Router: файлы в pages/api/* становятся API-эндпоинтами. Экспортируют функции handler.
• App Router: файл route.js в папке. Экспортирует функции GET, POST и т.д.

// app/api/users/route.js
export async function GET() {
    const users = await db.users.findMany();
    return Response.json(users);
}

export async function POST(request) {
    const data = await request.json();
    const user = await db.users.create({ data });
    return Response.json(user, { status: 201 });
}

21. Что такое Server Actions?

Server Actions — это функции, которые выполняются на сервере и могут вызываться из клиентских компонентов. Позволяют отправлять формы и мутировать данные без создания API-маршрутов.

// app/actions.js
'use server';

export async function createUser(formData) {
    const name = formData.get('name');
    await db.users.create({ name });
}

// app/form.jsx
import { createUser } from './actions';

export default function Form() {
    return <form action={createUser}>
        <input name="name" />
        <button type="submit">Создать</button>
    </form>;
}

22. Как работать с метаданными (SEO) в Next.js?

В App Router используется generateMetadata или экспорт объекта metadata.

// app/products/page.jsx
export const metadata = {
    title: 'Товары | Мой магазин',
    description: 'Список всех товаров'
};

// Для динамических метаданных
export async function generateMetadata({ params }) {
    const product = await getProduct(params.id);
    return {
        title: `${product.name} | Магазин`,
        description: product.description
    };
}

23. Что такое компонент Image и оптимизация изображений?

next/image — встроенный компонент для оптимизации изображений:

• Автоматическая оптимизация форматов (WebP, AVIF).
• Ленивая загрузка.
• Предотвращение смещения макета (layout shift).
• Ресайз под размер экрана.

import Image from 'next/image';

<Image 
    src="/profile.jpg" 
    width={400} 
    height={400} 
    alt="Profile"
    priority // для LCP-изображений
/>

24. Как работать со шрифтами в Next.js?

next/font автоматически оптимизирует шрифты, включая self-hosting и предотвращение смещения макета.

import { Inter, Roboto_Mono } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });
const robotoMono = Roboto_Mono({ subsets: ['latin'] });

<html className={inter.className}>
    <body className={robotoMono.className}>...</body>
</html>

25. Что такое компонент Script?

next/script — компонент для оптимизированной загрузки сторонних скриптов. Поддерживает стратегии:

• beforeInteractive — для критических скриптов.
• afterInteractive (по умолчанию) — для большинства скриптов.
• lazyOnload — для скриптов, загружаемых после всего.
• worker (экспериментально) — в веб-воркере.

<Script 
    src="https://analytics.example.com/script.js"
    strategy="afterInteractive"
/>

26. Как работает компонент Link?

next/link — компонент для клиентской навигации между страницами. Предзагружает страницы при появлении в viewport.

import Link from 'next/link';

<Link href="/about">О нас</Link>
<Link href="/products/1">Товар 1</Link>

// С заменой истории
<Link href="/dashboard" replace>Дашборд</Link>

27. Что такое CSS-модули и CSS-in-JS в Next.js?

• CSS-модули: Поддерживаются из коробки. Файлы *.module.css автоматически генерируют уникальные имена классов.
• CSS-in-JS: Большинство библиотек (styled-components, emotion) требуют настройки. В Server Components CSS-in-JS не работает напрямую, нужна клиентская обертка.
• Tailwind CSS: Широко используется, требует установки и настройки postcss.config.js.

28. Как работать с переменными окружения?

Next.js поддерживает переменные окружения через файлы .env.local, .env.production и т.д.

• NEXT_PUBLIC_* — доступны и на клиенте, и на сервере.
• Остальные — только на сервере.

Доступ: process.env.VARIABLE_NAME. Для типизации можно создать env.d.ts.

29. Как работать со статическими файлами?

Статические файлы (изображения, файлы) размещаются в папке public/. Доступны по корневому URL: /images/logo.png, /favicon.ico.

30. Как оптимизировать производительность Next.js-приложения?

• Использовать <Image> для изображений.
• Использовать <Script> с правильной стратегией.
• Ленивая загрузка компонентов через next/dynamic.
• Минимизировать использование Client Components.
• Кеширование данных с revalidate.
• Использовать статическую генерацию где возможно.
• Анализировать бандл с @next/bundle-analyzer.

31. Что такое next.config.js и основные настройки?

next.config.js — файл конфигурации Next.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: ['example.com'], // разрешенные домены для изображений
        formats: ['image/avif', 'image/webp']
    },
    redirects: async () => [
        { source: '/old', destination: '/new', permanent: true }
    ],
    rewrites: async () => [
        { source: '/api/:path*', destination: 'https://api.example.com/:path*' }
    ],
    experimental: {
        // экспериментальные фичи
    }
};

export default nextConfig;

32. Как деплоить Next.js-приложения?

Основные платформы для деплоя:

• Vercel (создатели Next.js) — оптимальная платформа с автоматической интеграцией.
• Netlify — поддерживает, но с некоторыми ограничениями.
• AWS Amplify — для AWS-инфраструктуры.
• Self-hosted — можно запустить через next start или в Docker-контейнере.

Для статического экспорта: next export (ограничивает функциональность).

33. Как добавить аналитику в Next.js?

Встроенная аналитика Vercel: подключить @vercel/analytics. Для других систем:

• Google Analytics: через <Script>.
• Yandex Metrika: аналогично.
• Кастомная: через reportWebVitals() в _app.js (Pages Router) или компонент в App Router.

34. Какие инструменты для отладки Next.js?

• React DevTools — для отладки компонентов.
• Next.js DevTools — расширение для Chrome.
• Debugging в VS Code — настройка launch.json для отладки сервера.
• Логи — серверные логи при запуске next dev.
• Анализ бандла — @next/bundle-analyzer.