Next.js для начинающих: роутинг, данные и первый деплой

Введение

Next.js — это фреймворк поверх React, который добавляет серверный рендеринг, файловый роутинг и оптимизации из коробки. Начинающему разработчику он экономит десятки часов на настройке сборки, SEO и развёртывании. В этой статье разберём три кита, без которых нельзя сдвинуться с места: маршрутизацию через App Router, загрузку данных в Server Components и публикацию проекта на Vercel.

Перед чтением проверьте, что у вас установлен Node.js версии 18.17 или выше. Создать проект можно одной командой:

# Создаём новый проект с настройками по умолчанию
npx create-next-app@latest my-blog --typescript --app --tailwind
cd my-blog
npm run dev

После запуска откройте http://localhost:3000 — увидите стартовую страницу. Дальше мы постепенно превратим её в мини-блог.

Файловый роутинг в App Router

В современном Next.js маршруты задаются папками внутри директории app. Каждый файл page.tsx становится отдельной страницей, а имя папки — частью URL.

app/
  page.tsx          // маршрут /
  about/
    page.tsx        // маршрут /about
  blog/
    page.tsx        // маршрут /blog
    [slug]/
      page.tsx      // динамический маршрут /blog/любой-текст

Квадратные скобки в имени папки делают сегмент динамическим. Параметр приходит в компонент через пропс params:

// app/blog/[slug]/page.tsx
type Props = {
  params: Promise<{ slug: string }>;
};

export default async function PostPage({ params }: Props) {
  // В Next.js 15 params — это Promise, его нужно await
  const { slug } = await params;

  return <h1>Статья: {slug}</h1>;
}

Для переходов между страницами используйте компонент Link — он работает без полной перезагрузки и заранее подгружает код будущей страницы:

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/">Главная</Link>
      <Link href="/blog/hello-world">Первый пост</Link>
    </nav>
  );
}

Общие элементы вроде шапки и подвала выносятся в файл layout.tsx. Он оборачивает все вложенные страницы и не перерендеривается при переходах внутри своего сегмента.

Загрузка данных в серверных компонентах

По умолчанию компоненты в app/ выполняются на сервере. Это значит, что вы можете прямо в теле компонента писать async/await, обращаться к базе данных или внешнему API — клиент получит уже готовый HTML.

// app/blog/page.tsx
type Post = { id: number; title: string };

async function getPosts(): Promise<Post[]> {
  // Запрос выполняется на сервере при сборке страницы
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    // Кешируем ответ на 60 секунд
    next: { revalidate: 60 },
  });

  if (!res.ok) throw new Error('Не удалось получить посты');
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Опция revalidate включает инкрементальную регенерацию: страница пересоберётся максимум раз в минуту, даже если её посетят тысячи пользователей. Если данные должны быть всегда свежими, передайте cache: 'no-store'.

Когда нужна интерактивность — клики, формы, состояние — компонент помечается директивой 'use client':

'use client';
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Кликов: {count}</button>;
}

Клиентский компонент можно спокойно импортировать внутрь серверного — Next.js сам разделит бандлы.

Первый деплой на Vercel

Vercel — компания, которая разрабатывает Next.js, поэтому деплой занимает минуты. Самый простой путь — через Git.

1. Создайте репозиторий на GitHub и запушьте проект.
2. Зайдите на vercel.com, войдите через GitHub и нажмите Import Project.
3. Выберите репозиторий — Vercel сам определит, что это Next.js, и проставит правильные команды сборки.
4. Нажмите Deploy и подождите примерно минуту.

Альтернатива — CLI без UI:

npm i -g vercel
vercel        # первый деплой, ответьте на вопросы мастера
vercel --prod # выкатить в production

Переменные окружения (например, ключи API) добавляются в настройках проекта на vercel.com во вкладке Environment Variables. Не коммитьте .env.local в репозиторий.

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

Новички спотыкаются примерно на одних и тех же местах:

• Используют useState или useEffect в серверном компоненте — забывают про 'use client'. Ошибка в консоли укажет на нужный файл.
• Делают fetch внутри useEffect, хотя данные можно получить на сервере. Это лишний рендер и худший SEO.
• Забывают await у params и searchParams в Next.js 15 — получают Promise вместо объекта.
• Импортируют серверные модули (fs, crypto) в клиентский компонент. Решение — вынести логику в Server Action или серверный компонент.
• Не настраивают revalidate и удивляются, почему изменения в CMS не появляются на сайте.

Заключение

Mы прошли путь от пустого проекта до развёрнутого приложения: разобрали файловый роутинг с динамическими сегментами, научились грузить данные прямо в серверных компонентах и опубликовали сайт на Vercel за пару кликов. Этих знаний достаточно, чтобы собрать первый блог, портфолио или лендинг. Дальше стоит копать в сторону Server Actions для форм, middleware для авторизации и кеширования через unstable_cache — но это уже темы для следующих статей.