Что такое Next.js

Next.js — фреймворк для React, созданный Vercel. Даёт роутинг, SSR, API-роуты, оптимизацию — всё из коробки.

Зачем нужен

Чистый React (Vite) — это SPA, который рендерится только в браузере. Проблемы:

• SEO — поисковики видят пустую страницу
• Скорость — пользователь ждёт загрузки JS, потом видит контент
• Инфраструктура — роутинг, SSR, кеш нужно настраивать самому

Next.js решает это: рендерит на сервере, даёт роутинг по файлам, кеширование, оптимизацию.

Что даёт

• App Router — роутинг по папкам
• Server Components — компоненты на сервере
• API Routes — бэкенд в том же проекте
• SSR / SSG / ISR — разные стратегии рендеринга
• Оптимизация — картинки, шрифты, скрипты
• Кеширование — из коробки
• Middleware — обработка на границе

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

• Контентные сайты — блоги, документация, лендинги (SEO)
• E-commerce — каталоги, карточки товаров
• Fullstack — когда нужен и фронт, и бэк
• Дашборды — SSR для быстрой первой загрузки

Когда не использовать

• Простое SPA без SEO
• Админки за логином
• Маленькие проекты

Установка

npx create-next-app@latest my-app

Опции:

• TypeScript — да
• ESLint — да
• Tailwind — по вкусу
• src/ directory — да
• App Router — да
• Turbopack — да
• import alias — @/*

Структура

my-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── next.config.ts
├── tsconfig.json
└── package.json

Скрипты

npm run dev    # разработка
npm run build  # сборка
npm run start  # продакшен
npm run lint   # линтер

Итоги

• Next.js — фреймворк для React
• Решает SEO, скорость, инфраструктуру
• App Router, Server Components, API Routes
• Используется для контента и fullstack
• Установка через create-next-app