Next.js: Обзор

🚀 Next.js: Полный путеводитель

Добро пожаловать в раздел Next.js — самого популярного React-фреймворка для создания полноценных веб-приложений! 🎉

Если React — это движок автомобиля, то Next.js — это весь автомобиль: с кузовом, колёсами, навигацией и круиз-контролем. Тебе не нужно собирать его с нуля — он уже готов к поездке.

---

🤔 Зачем вообще нужен Next.js?

Представь: ты написал крутое React-приложение. Открываешь его в браузере — и видишь… пустой HTML с одним <div id="root">. Поисковики видят то же самое. Первая загрузка медленная. Нет маршрутизации из коробки. Нет серверной части.

Next.js решает все эти проблемы:

Проблема React SPA          │  Решение Next.js
────────────────────────────┼──────────────────────────────────
Пустой HTML для SEO         │  Server-Side Rendering / SSG
Медленная первая загрузка   │  Pre-rendering + Streaming
Нет роутера                 │  File-based routing
Нет серверной части         │  API Routes + Server Actions
Сложная настройка сборки    │  Zero-config Webpack/Turbopack
Нет оптимизации изображений │  next/image с автооптимизацией
Нет оптимизации шрифтов     │  next/font с preloading

---

📊 Сравнение фреймворков

Критерий	React SPA	Next.js	Remix	Astro
Рендеринг	CSR only	CSR+SSR+SSG+ISR	SSR+CSR	MPA+Islands
Маршрутизация	Вручную (React Router)	File-based ✅	File-based ✅	File-based ✅
SEO	❌ Сложно	✅ Отлично	✅ Отлично	✅ Отлично
Серверная часть	❌ Нет	✅ API/Actions	✅ Loaders/Actions	⚠️ Endpoints
Производительность	⚠️ Средне	✅ Отлично	✅ Отлично	✅✅ Максимум
Экосистема	✅✅ Огромная	✅✅ Огромная	⚠️ Растёт	⚠️ Растёт
Кривая обучения	Низкая	Средняя	Средняя	Низкая
Full-stack	❌	✅	✅	⚠️
React Server Components	❌	✅	❌	❌
Vercel интеграция	⚠️	✅✅ Родная	⚠️	✅
Компании	Все	Vercel, TikTok, Twitch	Shopify	Cloudflare

---

🆚 Когда что использовать?

Next.js — твой выбор, если:

• Нужен SEO (блог, лендинг, e-commerce, новостной сайт)
• Строишь full-stack приложение на одном стеке
• Хочешь React, но с серверным рендерингом
• Нужна гибкость: часть страниц статические, часть — динамические
• Деплоишь на Vercel (zero-config деплой за минуты)

Plain React SPA — если:

• Делаешь внутренний инструмент (дашборд, CRM) — SEO не нужен
• Приложение за логином — боты его не видят
• Нужна максимальная простота настройки

Remix — если:

• Фокус на веб-стандартах (progressive enhancement)
• Нравится модель загрузчиков данных (loaders/actions)
• Shopify-экосистема

Astro — если:

• Максимум производительности (почти 0 JS на клиенте)
• Контентные сайты (документация, блоги)
• Хочешь использовать компоненты React, Vue, Svelte вместе

---

⚡ Next.js 15: Что нового?

Next.js 15 вышел в октябре 2024 года и принёс важные изменения:

// 1. React 19 поддержка
// React 19 Compiler — автоматическая мемоизация!
// Больше не нужны useMemo/useCallback в большинстве случаев

// 2. Async Request APIs (BREAKING CHANGE!)
// Было (Next.js 14):
const { cookies, headers, params } = { cookies: cookies(), headers: headers() };

// Стало (Next.js 15):
const cookieStore = await cookies();
const headersList = await headers();
const { slug } = await params; // params теперь async!

// 3. Turbopack стабилен для dev
// next dev теперь использует Turbopack по умолчанию
// В 5 раз быстрее Webpack для hot reload!

// 4. unstable_after() — код после ответа
import { unstable_after as after } from 'next/server';

export async function GET() {
  const data = await fetchData();

  after(async () => {
    // Выполняется после отправки ответа клиенту
    await logAnalytics(data);
    await updateCache();
  });

  return Response.json(data);
}

// 5. Улучшенный caching (Breaking change!)
// fetch() теперь НЕ кешируется по умолчанию
// Нужно явно указывать: fetch(url, { cache: 'force-cache' })

// 6. Form component
import Form from 'next/form';
// <Form action="/search"> — с prefetching и soft navigation

---

📚 Программа курса (30 уроков)

#	Урок	Тема
1	Что такое Next.js	История, концепции, ключевые фичи, Next.js 15
2	App Router vs Pages Router	Разница, миграция, когда что использовать
3	Файловая маршрутизация	Статика, динамика, catch-all, группы, параллельные роуты
4	Layouts и Templates	Root layout, вложенные, template.tsx, метаданные
5	Server vs Client Components	RSC модель, ‘use client’, гидрация, паттерны
6	Получение данных	fetch(), параллельно, кеш, ревалидация, Suspense
7	Статическая генерация (SSG)	generateStaticParams, fallback, когда использовать
8	Server-Side Rendering	Динамический рендеринг, streaming, сравнение
9	ISR — Инкрементальная регенерация	revalidate, on-demand, теги, stale-while-revalidate
10	Loading и Error состояния	loading.tsx, error.tsx, Suspense boundaries
11	Route Handlers (API)	GET/POST/PUT/DELETE, middleware, cookies
12	Server Actions	’use server’, формы, мутации, оптимистичные апдейты
13	Middleware	Edge middleware, matcher, auth, redirects
14	Metadata и SEO	Static/dynamic metadata, OG, Twitter cards, sitemap
15	Оптимизация изображений	next/image, форматы, lazy loading, blur placeholder
16	Шрифты и стили	next/font, CSS Modules, Tailwind, styled-components
17	Аутентификация	NextAuth.js v5, JWT, сессии, защита роутов
18	Кеширование	Data cache, Router cache, Full Route cache, revalidation
19	Parallel и Intercepting Routes	@slots, (.)intercept, модальные окна
20	Динамические маршруты	[slug], […rest], generateStaticParams, notFound()
21	Интернационализация	i18n routing, locale detection, next-intl
22	Переменные окружения	.env файлы, NEXT_PUBLIC_, серверные секреты
23	Тестирование	Jest, React Testing Library, Playwright, Vitest
24	Производительность	Core Web Vitals, Bundle analyzer, Lighthouse
25	Деплой на Vercel	Zero-config, preview deploys, Edge Network
26	Деплой в Docker	Dockerfile, standalone output, self-hosted
27	Monorepo и Turborepo	Turborepo, workspace, shared packages
28	Паттерны проектирования	Feature folders, Data fetching patterns, Composition
29	Миграция Pages → App Router	Пошаговая миграция, coexistence, gotchas
30	Next.js 15: новые возможности	Полный разбор всех нововведений

---

🗺️ Путь обучения

Новичок в Next.js?
  └─► Уроки 1-5: Основы (роутинг, компоненты, рендеринг)
      └─► Уроки 6-9: Данные (fetching, SSG, SSR, ISR)
          └─► Уроки 10-13: API (handlers, actions, middleware)
              └─► Уроки 14-16: UX (SEO, изображения, шрифты)
                  └─► Уроки 17-20: Advanced (auth, кеш, сложные роуты)
                      └─► Уроки 21-30: Pro (i18n, тесты, деплой, паттерны)

Совет: Не пытайся выучить всё сразу! Первые 5 уроков дают тебе 80% того, что нужно для большинства проектов. Остальное — по мере необходимости.

---

🛠️ Быстрый старт

npx create-next-app@latest my-app

# Вопросы при создании:
# ✔ Would you like to use TypeScript? › Yes
# ✔ Would you like to use ESLint? › Yes
# ✔ Would you like to use Tailwind CSS? › Yes
# ✔ Would you like your code inside a `src/` directory? › No
# ✔ Would you like to use App Router? › Yes (рекомендуется!)
# ✔ Would you like to use Turbopack for next dev? › Yes
# ✔ Would you like to customize the import alias? › No

cd my-app
npm run dev
# Открой http://localhost:3000 🎉

---

🏗️ Структура проекта

my-next-app/
├── app/                    # App Router (Next.js 13+)
│   ├── layout.tsx          # Root layout — обёртка всего приложения
│   ├── page.tsx            # Главная страница /
│   ├── about/
│   │   └── page.tsx        # Страница /about
│   ├── blog/
│   │   ├── page.tsx        # Страница /blog
│   │   └── [slug]/
│   │       └── page.tsx    # Страница /blog/любой-слаг
│   ├── api/
│   │   └── users/
│   │       └── route.ts    # API endpoint /api/users
│   └── globals.css
├── components/             # Переиспользуемые компоненты
├── lib/                    # Утилиты, хелперы
├── public/                 # Статические файлы
├── next.config.mjs         # Конфигурация Next.js
├── package.json
└── tsconfig.json

---

💡 Ключевые концепции (краткий глоссарий)

Термин	Объяснение
RSC	React Server Components — компоненты, рендерящиеся только на сервере
SSR	Server-Side Rendering — рендеринг HTML на сервере при каждом запросе
SSG	Static Site Generation — генерация HTML при сборке проекта
ISR	Incremental Static Regeneration — SSG с периодическим обновлением
CSR	Client-Side Rendering — рендеринг в браузере (обычный React)
App Router	Новая система маршрутизации (папка app/), Next.js 13+
Pages Router	Старая система маршрутизации (папка pages/), Next.js 1-12
Hydration	Процесс “оживления” статического HTML на клиенте
Streaming	Постепенная отправка HTML с сервера по частям
Edge Runtime	Выполнение кода на CDN-узлах, ближе к пользователю

Поехали! 🚀 Начни с первого урока — он расставит все точки над i.