Next.js - фреймворк, который изменил веб-разработку

От Netflix до TikTok - компании выбирают Next.js. Разбор встроенных оптимизаций, App Router и подхода React Server Components для ускорения сайтов.

Почему Next.js стал стандартом для создания современных веб-приложений на React

Next.js пришел как готовое решение, здесь вы можете подробнее о нем узнать. Фреймворк устранил необходимость выбирать и настраивать инструменты. Разработчик получает предсказуемую структуру, стандартизированные подходы и производительность из коробки. Netflix переписал свой интерфейс на Next.js и сократил время загрузки страниц на 50%. TikTok использует фреймворк для своих интерактивных мини-приложений.

Ключевое преимущество Next.js - бесшовная интеграция клиентского и серверного кода в одном проекте. React-компоненты рендерятся на сервере, отдают готовый HTML для быстрого показа, затем гидратируются на клиенте. Пользователь видит контент мгновенно, а поисковые системы получают полностью готовый DOM для индексации.

Версия 13 с App Router окончательно закрепила лидерство. Поддержка React Server Components изменила подход к загрузке данных. Фреймворк автоматически определяет, какие компоненты должны выполняться на сервере, а какие - на клиенте. Это снижает объем отправляемого JavaScript и ускоряет интерактивность.

Что такое Next.js

Next.js производственный React-фреймворк с полным набором встроенных оптимизаций. Он берет на себя все, что обычно требует сторонних библиотек и скриптов сборки. Маршрутизация, рендеринг на сервере, генерация статических сайтов, горячая перезагрузка модулей - все работает сразу после create-next-app.

Архитектура Next.js строится вокруг двух основных роутеров. Pages Router существовал с первых версий, использует файлы .js/.ts в папке pages для создания маршрутов. App Router появился в версии 13 как более мощная альтернатива, основанная на React Server Components и вложенных макетах.

Фреймворк написан на TypeScript с полной поддержкой типизации. Даже если вы пишете на чистом JavaScript, intellisense подскажет методы, свойства и параметры всех компонентов и функций Next.js.

Пример базовой страницы с App Router:

// app/page.tsx
export default async function HomePage() {
  const data = await fetch('https://api.example.com/posts').then(r => r.json())
  
  return (
    <main>
      {data.posts.map(post => (
        <article key={post.id}>{post.title}</article>
      ))}
    </main>
  )
}

Функция асинхронная, данные загружаются на сервере. HTML генерируется полностью на сервере, браузер получает готовый документ. Никаких useEffect или useState для первоначальной загрузки.

Vercel, создатели фреймворка, поддерживает тесную интеграцию со своей облачной платформой. Но Next.js работает на любом хостинге с Node.js: AWS, DigitalOcean, Google Cloud Run, собственные серверы. Для статической генерации подойдет даже обычный S3 или Netlify.

Серверные компоненты React

Серверные компоненты - самый значительный сдвиг в экосистеме React со времен хуков. Они выполняются исключительно на сервере, их код не отправляется клиенту. Браузер получает только результат рендеринга в виде HTML. Это принципиально меняет баланс между клиентской и серверной логикой.

До появления серверных компонентов любой fetch в React выполнялся либо на клиенте (с задержкой показа спиннера), либо через сложные механизмы вроде getServerSideProps. Серверные компоненты делают серверный рендеринг естественной частью React-разработки.

Как это работает внутри. Компонент выполняется в среде Node.js. Он может обращаться к базе данных напрямую, читать файловую систему, использовать серверные переменные окружения. После завершения рендеринга результат преобразуется в специальный потоковый формат и отправляется клиенту.

// app/products/page.tsx
import { prisma } from '@/lib/db'

export default async function ProductsPage() {
  const products = await prisma.product.findMany({
    where: { inStock: true },
    select: { id: name: price: }
  })
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} {...product} />
      ))}
    </div>
  )
}

Компонент ProductCard может быть клиентским компонентом (с 'use client') и получить данные через пропсы. Серверный компонент передает уже готовые данные, клиентскому компоненту не нужно выполнять повторные запросы.

Практический совет: используйте серверные компоненты для всех страниц, списков и контентных блоков. Клиентские компоненты оставляйте только для интерактива: кнопки, формы, слайдеры, анимации. На типичном сайте 80-90% компонентов могут быть серверными.

Потоковая передача данных - еще одна фишка. Next.js может отправлять HTML частями по мере готовности. Страница не ждет самого медленного запроса. Пользователь видит шапку и навигацию сразу, а тяжелые списки или комментарии подгружаются через пару секунд.

// app/blog/[slug]/page.tsx
import { Suspense } from 'react'
import Comments from '@/components/Comments'
import { Skeleton } from '@/components/Skeleton'

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug)
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
      
      <Suspense fallback={<Skeleton />}>
        <Comments postId={post.id} />
      </Suspense>
    </article>
  )
}

Блок комментариев загружается асинхронно, не блокируя основной контент. Suspense показывает скелетон, пока данные загружаются на сервере. Потоковая передача работает и с серверными, и с клиентскими компонентами.

App Router и файловая маршрутизация

App Router превращает структуру папок в URL-маршруты. Каждая папка внутри app/ становится сегментом пути. Файл page.tsx или page.jsx в этой папке определяет публичную страницу.

app/
├── layout.tsx          # Корневой макет всех страниц
├── page.tsx            # Главная страница (URL: /)
├── about/
│   └── page.tsx        # Страница /about
├── blog/
│   ├── layout.tsx      # Макет для всех блогов
│   ├── page.tsx        # /blog
│   └── [slug]/
│       └── page.tsx    # /blog/какой-то-пост
└── dashboard/
    ├── layout.tsx      # Макет дашборда с сайдбаром
    ├── page.tsx        # /dashboard
    └── settings/
        └── page.tsx    # /dashboard/settings

Динамические маршруты создаются квадратными скобками. [slug] захватывает любой сегмент и передает его как параметр params в компонент страницы.

Вложенные макеты - мощный инструмент для повторного использования интерфейса. Макет layout.tsx оборачивает все страницы внутри своей папки и не пересоздается при переходе между ними. Сайдбар, хедер или футер остаются зафиксированными, экономя ресурсы и сохраняя состояние.

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="dashboard-container">
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}

Группы маршрутов (folderName) позволяют организовывать файлы без влияния на URL. Идеально для разделения логики: одна группа для маркетинговых страниц, другая для аутентифицированной зоны.

app/
├── (marketing)/
│   ├── layout.tsx      # Маркетинговый макет
│   ├── page.tsx        # Все еще главная страница /
│   └── pricing/
│       └── page.tsx    # /pricing
└── (dashboard)/
    ├── layout.tsx      # Макет дашборда
    └── projects/
        └── page.tsx    # /projects

Параллельные маршруты @folder рендерят несколько страниц одновременно в одном окне. Используются для сложных интерфейсов с несколькими независимыми зонами. Перехватывающие маршруты (.)folder дают возможность заменить обычную навигацию на модальное окно, сохраняя при этом реальный URL.

Гильермо Раух, CEO Vercel, подчеркивает: «Next.js не просто фреймворк. Это платформа для создания лучшего веба. Мы верим, что разработчики заслуживают инструменты, которые делают сложное простым». App Router воплощает эту философию: сложные паттерны вроде потокового рендеринга или параллельных маршрутов становятся естественной частью файловой структуры.

Server Actions - серверные функции без API

Server Actions устраняют необходимость писать отдельные обработчики API. До их появления отправка формы означала создание endpoint'а в папке app/api, написание контроллера, валидацию, обработку ошибок, затем вызов fetch из клиентского компонента. Теперь все это заменяется одной асинхронной функцией с директивой 'use server'.

Функция помечается как серверная на этапе компиляции. Next.js автоматически создает POST endpoint, сериализует аргументы, валидирует типы, обрабатывает multipart/form-data для файлов. Из клиентского компонента вызывается та же функция - фреймворк сам отправляет запрос и десериализует ответ.

// app/actions/posts.ts
'use server'

import { revalidatePath } from 'next/cache'
import { z } from 'zod'

const PostSchema = z.object({
   z.string().min(3).max(100),
  content: z.string().min(10),
})

export async function createPost(prevState: any, formData: FormData) {
  const validated = PostSchema.parse({
     formData.get('title'),
    content: formData.get('content'),
  })
  
  await db.post.create({
    data: validated,
  })
  
  revalidatePath('/posts')
  return { success: true }
}

Второй аргумент formData - стандартный объект FormData из браузера. Но Server Actions принимают и обычные JavaScript-объекты, и примитивные типы. Аргументы автоматически сериализуются в JSON и обратно.

Практический пример формы с Server Action:

// app/new-post/page.tsx
'use client'

import { createPost } from '@/app/actions/posts'
import { useFormState } from 'react-dom'

export default function NewPostPage() {
  const [state, formAction] = useFormState(createPost, null)
  
  return (
    <form action={formAction}>
      <input name="title" type="text" required />
      <textarea name="content" required />
      <button type="submit">Опубликовать</button>
      {state?.success && <p>Пост создан!</p>}
    </form>
  )
}

useFormState - хук из React DOM, интегрированный с Server Actions. Он принимает серверную функцию и возвращает обновленный action для формы, а также текущее состояние. Отправка происходит без перезагрузки страницы, с прогрессивным улучшением - если JavaScript не загрузился, форма отправится как обычный POST запрос.

Server Actions поддерживают повторное выполнение (сохраняют состояние между вызовами), потоковую передачу прогресса загрузки файлов и optimistic updates. Для больших форм с вложенными полями можно использовать useActionState для ручного контроля над отправкой.

Оптимистичные обновления пример:

import { useOptimistic } from 'react'
import { addComment } from '@/actions/comments'

function CommentSection({ initialComments }) {
  const [comments, setComments] = useOptimistic(
    initialComments,
    (state, newComment) => [...state, newComment]
  )
  
  async function submit(formData) {
    const newComment = { text: formData.get('text'), pending: true }
    setComments(newComment)
    await addComment(formData)
  }
  
  // Интерфейс моментально показывает комментарий,
  // затем сервер подтверждает или откатывает
}

Совет: не помечайте каждую функцию 'use server' автоматически. Файлы с действиями должны быть отдельными модулями, импортируемыми только в клиентские компоненты, которые действительно их используют. Это уменьшает размер клиентского бандла.

Оптимизация производительности

Next.js включает оптимизации, которые в обычном React-проекте потребовали бы подключения пяти разных библиотек и ручной настройки.

Компонент next/image автоматически оптимизирует изображения при первом запросе. Он определяет размеры контейнера, генерирует несколько вариантов с разным разрешением, подставляет srcset и sizes. Браузер загружает только самое подходящее изображение для текущего экрана.

import Image from 'next/image'

export default function ProductGallery() {
  return (
    <Image
      src="/product-large.jpg"
      alt="Product"
      width={1200}
      height={800}
      sizes="(max-width: 768px) 100vw, 50vw"
      priority // загрузить немедленно
    />
  )
}

Ленивая загрузка встроена по умолчанию. Изображения за пределами вьюпорта не загружаются до скролла. Плейсхолдеры - blur data URL или сплошной цвет - предотвращают резкие скачки контента. Next.js даже определяет соотношение сторон автоматически из пропсов width и height, резервируя место до загрузки изображения. CLS (Cumulative Layout Shift) сводится к нулю.

Компонент next/font решает проблему шрифтов. Обычная загрузка шрифтов через Google Fonts приводит к CLS - шрифт меняется с системного на кастомный через секунду после загрузки страницы. next/font встраивает шрифт в CSS с помощью @font-face и size-adjust, полностью убирая сдвиг верстки.

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

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap',
  preload: true,
})

const mono = Roboto_Mono({ subsets: ['latin'], weight: '400' })

export default function Layout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

Шрифты загружаются из той же системы, что и остальные ресурсы. Нет внешних запросов к Google или другим CDN - все лежит на вашем домене. Поддерживаются переменные шрифты для тонкой настройки и кастомные локальные шрифты через localFont.

Компонент next/script контролирует загрузку сторонних скриптов. Трекинг, метрики, виджеты чатов - обычно блокируют рендеринг и тормозят интерактивность. next/script предлагает три стратегии: beforeInteractive (критичен до гидратации), afterInteractive (после гидратации, по умолчанию), lazyOnload (после загрузки всех ресурсов).

import Script from 'next/script'

export default function AnalyticsLayout() {
  return (
    <>
      <Script
        src="https://plausible.io/js/script.js"
        strategy="lazyOnload"
        data-domain="mysite.com"
      />
      <Script
        id="critical-consent"
        strategy="beforeInteractive"
      >
        {`window.__consent = localStorage.getItem('consent')`}
      </Script>
    </>
  )
}

Скрипты с lazyOnload загружаются последними, не замедляя загрузку основного контента. Скрипты с beforeInteractive поднимаются в head и загружаются сразу, используются для данных, которые нужны до того, как React гидратирует страницу.

Когда выбирать Next.js

Next.js не универсальное решение для любого проекта. Анализируйте конкретные задачи.

Тип проекта	Подходит Next.js	Оптимальный подход	Ключевая метрика	Альтернативы
Корпоративный сайт	Да	Static Generation	SEO, скорость	WordPress, Hugo
E-commerce платформа	Да	ISR + Server Components	TTFB, конверсия	Shopify (embed)
Веб-приложение с API	Да	App Router + Actions	Время разработки	Remix, SPA
Блог / контентная платформа	Да	Static + ISR	LCP, CLS	Astro, Eleventy
Дашборд / админ-панель	Ограниченно	Client Components	Интерактивность	Vite + React
Простой статический сайт	Избыточен	Pure HTML/CSS	Простота	Hugo, 11ty

Корпоративные сайты и лендинги с SEO-требованиями получают максимальную выгоду. Поисковые системы ранжируют страницы по скорости загрузки и наличию контента в первичном HTML. Next.js дает и то, и другое. Статическая генерация для страниц с редкими обновлениями, серверный рендеринг для динамических разделов.

Когда Next.js избыточен: простой статический сайт без интерактива (5-10 страниц текста). Hugo, Eleventy или даже чистый HTML справятся быстрее. Одностраничное приложение с интенсивной клиентской логикой, которое никогда не будет SEO-видимым (например, внутренний инструмент с дашбордами и графиками). Вы можете использовать Vite + React без сервера. Прототип или MVP на пару дней - настройка Next.js займет больше времени, чем сам прототип.

Next.js продолжает эволюционировать, добавляя новые возможности с каждым релизом. Версия 15 принесла Turbopack для ускорения разработки - переписанный на Rust сборщик, который в 10 раз быстрее Webpack.

Улучшения в кэшировании: fetch по умолчанию кешируется, а полный контроль над кешем через next: { revalidate } и теги инвалидации. Серверные компоненты стабилизировались, а Server Actions получили потоковую передачу для обработки больших файлов.

Если вы работаете с React и хотите создавать быстрые, SEO-оптимизированные приложения - Next.js является лучшим выбором на сегодняшний день. Фреймворк продолжает задавать стандарты в индустрии: то, что сегодня появляется в Next.js экспериментальным, через год становится общепринятой практикой во всем React-сообществе.