Что такое Next.js: обзор фреймворка для React

Next.js это фреймворк на основе React, который берет на себя то, что React из коробки не умеет: серверный рендеринг, маршрутизацию, оптимизацию и многое другое.

React сам по себе это библиотека для построения UI. Он не диктует, как организовать роутинг, где рендерить страницы или как делать API-запросы. Next.js решает все эти вопросы за тебя и дает готовую структуру для продакшен-приложений.

Какую проблему решает Next.js

Если ты создаешь React-приложение с нуля через create-react-app или Vite, то получаешь SPA (Single Page Application). Весь HTML генерируется на клиенте с помощью JavaScript. Это создает несколько проблем:

• SEO. Поисковые боты видят пустой HTML, пока JavaScript не выполнится. Для контентных сайтов, блогов и интернет-магазинов это критично.
• Скорость первой загрузки. Пользователь ждет, пока скачается и выполнится весь JavaScript, прежде чем увидит контент.
• Настройка инфраструктуры. Для SSR, code splitting, оптимизации изображений и прочего нужно самому подключать и настраивать кучу инструментов.

Next.js решает все это из коробки.

Ключевые возможности

Несколько стратегий рендеринга

Next.js позволяет выбирать стратегию рендеринга для каждой страницы отдельно:

• SSR (Server-Side Rendering) страница рендерится на сервере при каждом запросе. Подходит для динамического контента, который меняется часто.
• SSG (Static Site Generation) страница генерируется один раз при сборке. Идеально для блогов, документации, лендингов.
• ISR (Incremental Static Regeneration) статическая страница, которая может обновляться в фоне через заданный интервал. Компромисс между SSR и SSG.
• CSR (Client-Side Rendering) обычный рендеринг на клиенте, как в классическом React-приложении.

// SSR: данные запрашиваются при каждом запросе
export default async function Page() {
  const data = await fetch('https://api.example.com/posts', {
    cache: 'no-store'
  })
  const posts = await data.json()

  return <PostList posts={posts} />
}

// SSG: данные запрашиваются один раз при сборке (по умолчанию)
export default async function Page() {
  const data = await fetch('https://api.example.com/posts')
  const posts = await data.json()

  return <PostList posts={posts} />
}

// ISR: обновляется каждые 60 секунд
export default async function Page() {
  const data = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }
  })
  const posts = await data.json()

  return <PostList posts={posts} />
}

Файловая маршрутизация

В Next.js не нужно настраивать React Router. Структура файлов в папке app автоматически становится маршрутами:

app/
  page.tsx          -> /
  about/
    page.tsx        -> /about
  blog/
    page.tsx        -> /blog
    [slug]/
      page.tsx      -> /blog/my-post (динамический роут)

Квадратные скобки [slug] создают динамический сегмент. Next.js сам разберется, как сопоставить URL с компонентом.

Server Components

В App Router (начиная с Next.js 13) компоненты по умолчанию являются серверными. Это значит, что они выполняются на сервере и отправляют готовый HTML клиенту.

// Этот компонент выполняется на сервере
// Можно напрямую обращаться к БД, файловой системе и т.д.
export default async function UsersPage() {
  const users = await db.user.findMany()

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

Если нужна интерактивность (useState, onClick, useEffect), добавляешь 'use client' в начало файла:

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Нажатий: {count}
    </button>
  )
}

API Routes

Next.js позволяет создавать бэкенд-эндпоинты прямо в проекте. Для этого в App Router используются Route Handlers:

// app/api/users/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  const users = await db.user.findMany()
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()
  const user = await db.user.create({ data: body })
  return NextResponse.json(user, { status: 201 })
}

Это удобно для простых API, обработки форм, вебхуков. Для сложного бэкенда лучше использовать отдельный сервер.

Встроенная оптимизация

Next.js включает оптимизации, которые в обычном React пришлось бы настраивать самостоятельно:

• Компонент Image автоматически оптимизирует изображения: ресайзит, конвертирует в WebP, добавляет lazy loading.
• Компонент Link предзагружает страницы при наведении курсора, делая навигацию мгновенной.
• Компонент Script контролирует загрузку сторонних скриптов, чтобы не блокировать рендеринг.
• Автоматический code splitting. Каждая страница загружает только тот JavaScript, который ей нужен.

import Image from 'next/image'
import Link from 'next/link'

export default function Header() {
  return (
    <header>
      <Image src="/logo.png" width={120} height={40} alt="Logo" />
      <nav>
        <Link href="/about">О нас</Link>
        <Link href="/blog">Блог</Link>
      </nav>
    </header>
  )
}

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

React не заменяется на Next.js. Next.js работает поверх React. Ты по-прежнему пишешь компоненты, используешь хуки и все остальное из React. Next.js просто добавляет инфраструктуру вокруг этого.

Когда стоит использовать Next.js

Подходит для:

• Контентные сайты и блоги, где важен SEO
• Интернет-магазины
• Корпоративные сайты
• Дашборды с серверной авторизацией
• Приложения, где важна скорость первой загрузки

Может быть избыточным для:

• Небольших SPA без требований к SEO (админки, внутренние инструменты)
• Приложений, где весь контент генерируется на клиенте (например, графические редакторы)
• Прототипов, где важна скорость разработки, а не оптимизация

Итог

Next.js это не замена React, а надстройка, которая превращает его из UI-библиотеки в полноценный фреймворк для продакшена. Он берет на себя серверный рендеринг, роутинг, оптимизацию и API, позволяя разработчику сосредоточиться на продукте, а не на конфигурации.

На собеседовании важно показать, что ты понимаешь не просто "Next.js это фреймворк на React", а конкретно какие проблемы он решает и когда его выбор оправдан.