Урок 12

Итоги курса

Курс об основах Next.js.

Что ты узнал

  • Что такое Next.js — фреймворк для React с SSR, роутингом, оптимизацией
  • App Router — роутинг по папкам, динамические сегменты
  • Layouts — общий каркас, вложенность
  • Server и Client Components — по умолчанию серверные
  • Загрузка данных — async/await в компонентах, кеш, revalidate
  • Server Actions — мутации без API
  • API Routes — route.ts для HTTP
  • Метаданные и SEO — metadata, Open Graph, sitemap
  • Оптимизация — Image, Font, Script, dynamic
  • Middleware — авторизация и редиректы
  • Практика — типичный проект

Ключевые идеи

Server Components по умолчанию. Меньше JS в браузере, прямой доступ к данным.

'use client' только для интерактива. Хуки и события — там, где нужно.

Layouts не перерисовываются. Быстрые переходы, сохранение состояния.

Server Actions для мутаций. Проще, чем API-роуты.

Кеш fetch. Настраивай через cache, revalidate, теги.

Оптимизация встроена. Image, Font, Script, dynamic.

Metadata для SEO. Статические и динамические.

Частые ошибки

  • Ставить 'use client' везде
  • Использовать браузерные API в серверных компонентах
  • Импортировать серверный в клиентский
  • Забыть revalidatePath после мутации
  • Не проверять права в Server Actions
  • Игнорировать кеш fetch
  • Использовать img вместо Image
  • Не настраивать matcher в middleware

Что дальше

  • Server Components глубоко — стриминг, Suspense
  • Prisma или Drizzle — ORM для Next.js
  • Auth.js — полноценная аутентификация
  • TanStack Query — клиентский кеш
  • Vercel — деплой
  • Тестирование — Playwright, Vitest

Полезные ссылки

  • Next.js Docs: nextjs.org/docs
  • App Router: nextjs.org/docs/app
  • Server Components: react.dev/reference/rsc
  • Learn Next.js: nextjs.org/learn

Заключение

Next.js — стандарт для production React-приложений. App Router объединяет сервер и клиент в одном фреймворке: серверная загрузка данных, клиентский интерактив, API-роуты, оптимизация — всё в одном месте. Понимание Server Components и Server Actions отличает современного Next.js-разработчика от того, кто пишет «как в React». Правила: сервер по умолчанию, клиент для интерактива, кешируй осознанно, проверяй права.