Что такое Next.js
Next.js — это фреймворк поверх React, разработанный компанией Vercel. Если React отвечает только за интерфейс, то Next.js добавляет всё остальное: маршрутизацию, серверный рендеринг, статическую генерацию, API-маршруты, оптимизацию изображений. Это «батарейки включены» для React-приложений.
Главная проблема обычного React: страница пустая при первой загрузке (только пустой HTML + скрипт), потом JavaScript строит интерфейс. Это плохо для SEO (поисковики видят пустую страницу) и медленно на слабых устройствах. Next.js решает это через серверный рендеринг.
Режимы рендеринга
SSR (Server-Side Rendering): HTML генерируется на сервере при каждом запросе. Пользователь получает готовую страницу, поисковик видит контент. Подходит для часто меняющихся данных (новости, соцсети).
SSG (Static Site Generation): HTML генерируется один раз при сборке и отдаётся как статические файлы. Очень быстро, подходит для блогов, документации, лендингов.
ISR (Incremental Static Regeneration): гибрид — статические страницы перегенерируются в фоне через заданный интервал. Mappedia использует ISR с revalidate=3600 (раз в час).
CSR (Client-Side Rendering): обычный React, рендеринг в браузере. Используется для динамических частей приложения.
App Router — современный Next.js
В Next.js 13 появился App Router (папка app/). Ключевые концепции:
Server Components: компоненты рендерятся на сервере, не отправляют JavaScript клиенту. Меньше JS-бандл, быстрее загрузка.
Client Components: обычные React-компоненты с интерактивностью (отмечаются "use client").
Streaming: страница отправляется частями по мере готовности — пользователь видит контент быстрее.
Экосистема и деплой
Next.js создан Vercel — платформой для деплоя. Нативный деплой через Vercel максимально прост. Но Next.js работает на любой Node.js платформе: Railway, AWS, GCP. Конкуренты: Remix (другой подход к роутингу), Astro (для статических сайтов), Nuxt.js (то же для Vue).