Как освоить Next.js для SSR за месяц

Что понадобится

Для старта нужен Node.js версии 18 или выше, любой редактор кода (VS Code — оптимальный выбор), базовое знание React и JavaScript (ES6+). Также пригодится аккаунт на GitHub для хранения проектов и, опционально, домен и хостинг для деплоя — например, Timeweb.

Пошаговая инструкция — 7 шагов

1. 1
   Шаг 1: Установка и первый проект

   Установи Node.js (версия 18 LTS). Создай новый проект командой npx create-next-app@latest my-app. Выбери опции: TypeScript, ESLint, App Router. Перейди в папку и запусти npm run dev — откроется localhost:3000.

   Зарегистрировать домен для проекта →
2. 2
   Шаг 2: Изучи структуру App Router

   В папке app создай файлы page.tsx и layout.tsx. Пойми, что каждый каталог — это маршрут. Например, app/about/page.tsx — это /about. Layout оборачивает все дочерние страницы. Это основа роутинга в Next.js 13+.
3. 3
   Шаг 3: Серверный рендеринг (SSR) на практике

   Создай страницу, которая получает данные с сервера при каждом запросе. Используй async компонент с fetch. Например, в app/posts/page.tsx: export default async function Page() { const res = await fetch('https://jsonplaceholder.typicode.com/posts'); const posts = await res.json(); return <div>{posts.map(...)}</div>; }
4. 4
   Шаг 4: Статическая генерация (SSG) и ISR

   Для страниц, которые редко меняются, используй SSG. Добавь опцию revalidate для инкрементальной статической регенерации. Например: fetch(url, { next: { revalidate: 60 } }). Это позволит обновлять контент каждые 60 секунд без перестроения всего сайта.
5. 5
   Шаг 5: Динамические маршруты и API-роуты

   Создай папку [id] внутри app/posts. Внутри — page.tsx, который принимает params.id. Используй generateStaticParams для предварительной генерации путей. Также создай API-роут в app/api/posts/route.ts для обработки POST-запросов.
6. 6
   Шаг 6: Оптимизация и деплой

   Добавь мета-теги через generateMetadata, настрой Image компонент для оптимизации картинок. Для деплоя используй Vercel (бесплатно) или Timeweb. Настрой CI/CD через GitHub Actions. Убедись, что SSR работает корректно в production.

   Арендовать VPS на Timeweb →
7. 7
   Шаг 7: Реальный проект — блог с SSR

   Собери всё вместе: блог с главной страницей (SSG), страницей поста (SSR), комментариями через API-роут. Используй базу данных (например, Supabase) для хранения постов. Разверни на Vercel или Timeweb. За неделю ты закрепишь все навыки.

   Разместить проект на Timeweb →

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

Частые вопросы