Next.js — фреймворк для React¶

Next.js — это open-source веб-фреймворк, построенный поверх библиотеки React и разработанный компанией Vercel (ранее известной как ZEIT). Фреймворк предоставляет инфраструктуру для создания одностраничных и многостраничных веб-приложений с поддержкой серверного рендеринга (SSR), статической генерации страниц (SSG) и гибридного подхода к рендерингу. Next.js является одним из наиболее популярных инструментов в экосистеме React и используется рядом крупных компаний, включая Netflix, Hulu, Twitch, TikTok и Nike.

¶История создания

Next.js был создан Заком Грирсоном (Zack Grossbart) и Тимом Неклсом (Tim Neutkens), а основную разработку вёл Гильермо Рауч (Guillermo Rauch), основатель компании ZEIT (позже переименованной в Vercel). Первый публичный релиз состоялся в октябре 2016 года. Идея проекта заключалась в упрощении настройки серверного рендеринга для React-приложений, который до этого требовал значительных ручных усилий.

С момента запуска фреймворк развивался быстрыми темпами. В версии 9 (2019 год) была добавлена поддержка API-маршрутов, позволяющая создавать серверные эндпоинты внутри проекта. Версия 10 (2020 год) принесла поддержку изображений с автоматической оптимизацией. В 2021 году вышла версия 12 с поддержкой middleware и улучшенной маршрутизацией. В 2022 году была представлена версия 13, а в 2023-м — Next.js 14, в которой ключевым изменением стало закрепление App Router как основного способа организации маршрутов.

¶Основные концепции

¶Серверный рендеринг (SSR)

При серверном рендеринге HTML-контент страницы генерируется на сервере при каждом запросе пользователя. Это улучшает начальную загрузку страницы и положительно сказывается на индексации поисковыми системами, поскольку поисковые роботы получают готовый HTML.

¶Статическая генерация (SSG)

Статическая генерация позволяет собирать HTML-страницы во время сборки проекта. Полученные страницы раздаются как статические файлы, что обеспечивает максимальную скорость загрузки. Next.js поддерживает также динамическую регенерацию страниц (ISR — Incremental Static Regeneration), при которой устаревшие страницы обновляются в фоновом режиме без полной пересборки проекта.

¶App Router и Pages Router

Исторически маршруты в Next.js организовывались через директорию pages, где каждый файл соответствовал отдельному маршруту. Начиная с версии 13, введена новая система маршрутизации — App Router, основанная на директории app и использующая Server Components — компоненты, которые по умолчанию рендерятся на сервере. App Router поддерживает вложенные layout'ы, загрузку данных через асинхронные компоненты и стриминг ответов.

¶API-маршруты

Next.js позволяет создавать серверные эндпоинты, размещая файлы в директориях pages/api или app/api. Такой подход устраняет необходимость в отдельном сервере для обработки HTTP-запросов.

¶Технические особенности

Фреймворк использует сборщик Webpack (а в более новых версиях — Turbopack, написанный на Rust) и предоставляет систему конфигурации через файл next.config.js. Поддерживается горячая перезагрузка кода (Fast Refresh) во время разработки.

¶Применение

Next.js применяется для создания корпоративных сайтов, интернет-магазинов, порталов, блогов и веб-приложений. Фреймворк популярен в коммерческой разработке благодаря гибридной модели рендеринга: одни страницы могут быть статическими, другие — динамическими, и всё это сочетается в рамках одного проекта. Vercel предлагает хостинг, оптимизированный для Next.js, однако приложение может размещаться на любом Node.js-сервере или в контейнере Docker.

¶Критика

К основным недостаткам Next.js относят привязку к экосистеме Vercel (часть функций, например, оптимизация изображений и ISR, наиболее полно работают на их платформе), быструю смену рекомендованных подходов (переход с Pages Router на App Router потребовал переработки существующих проектов) и нарастающую сложность фреймворка по сравнению с базовым React.

¶Источники

• Документация Next.js (nextjs.org)
• React documentation (react.dev)
• Vercel blog
• State of JS survey