Next.js для начинающих: полное руководство по фреймворку React

Next.js — это самый популярный фреймворк для React, который решает ключевые проблемы одностраничных приложений (SPA): плохую индексацию в поисковиках и медленную первоначальную загрузку. Если вы знаете React, то Next.js станет следующим логическим шагом в вашем развитии. В этом полном руководстве для начинающих мы разберём все базовые концепции, создадим проект с нуля и подготовим его к деплою.

Что такое Next.js и зачем он нужен?

Next.js — это производственный фреймворк на базе React, созданный компанией Vercel. Он берёт на себя настройку сборщика (Webpack), компилятора (SWC) и предоставляет готовую структуру для решения типовых задач. Основная цель Next.js — упростить создание React-приложений, которые работают быстро и хорошо ранжируются в Google.

Почему не достаточно просто React? Обычное React-приложение (созданное через Vite или CRA) рендерится на клиенте. Пользователь получает пустой HTML, и только после загрузки JavaScript появляется контент. Это плохо для SEO, так как поисковые роботы могут не дождаться выполнения скриптов. Также страдает производительность на медленных устройствах.

Next.js предлагает решение: серверный рендеринг (SSR) и статическую генерацию (SSG). Страницы готовятся заранее или на сервере, и пользователь сразу получает готовый HTML. Это и есть главная причина изучения Next.js для начинающих.

Установка и создание проекта

Самый простой способ создать новый проект — использовать автоматическую утилиту create-next-app. Убедитесь, что у вас установлен Node.js версии 18.17 или выше. Откройте терминал и выполните команду:

npx create-next-app@latest my-next-app

В процессе установки вам будут заданы несколько вопросов. Для начинающих рекомендуем выбрать следующие параметры:

• Would you like to use TypeScript? — No (для простоты можно начать с JavaScript, но TypeScript настоятельно рекомендуется для больших проектов).
• Would you like to use ESLint? — Yes.
• Would you like to use Tailwind CSS? — No (мы рассмотрим стили отдельно).
• Would you like to use `src/` directory? — No (оставим стандартную структуру).
• Would you like to use App Router? — Yes (это современный роутер, рекомендуемый для новых проектов).
• Would you like to customize the default import alias (@/*)? — No.

После завершения установки перейдите в папку проекта и запустите сервер разработки:

cd my-next-app
npm run dev

Приложение будет доступно по адресу http://localhost:3000. Вы увидите стартовую страницу Next.js.

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

После создания проекта обратите внимание на основные папки и файлы:

• app/ — основная папка с использованием нового App Router. Здесь лежат страницы и макеты.
• public/ — статические файлы: изображения, шрифты, robots.txt.
• next.config.js — файл конфигурации Next.js.
• package.json — зависимости и скрипты.

В папке app вы найдете файлы layout.js (корневой макет) и page.js (главная страница). Такая файловая структура и есть основа маршрутизации.

Маршрутизация (роутинг) в Next.js

В Next.js используется файловая маршрутизация. Это значит, что путь к странице определяется её местоположением в папке app. Вам не нужно подключать отдельную библиотеку типа react-router-dom.

Основные правила:

• Файл app/page.js соответствует корневому маршруту /.
• Файл app/about/page.js соответствует маршруту /about.
• Файл app/blog/post/page.js соответствует /blog/post.

Создайте новую страницу "О нас". Для этого в папке app создайте папку about, а внутри неё — файл page.js со следующим содержимым:

export default function About() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Это страница о нашем проекте, созданном с помощью Next.js.</p>
    </div>
  );
}

Теперь перейдите по адресу http://localhost:3000/about — вы увидите новую страницу.

Динамические маршруты

Для создания страниц, например, отдельных записей блога, используются динамические маршруты. Имя папки в квадратных скобках становится параметром.

Создайте структуру app/blog/[slug]/page.js и добавьте код:

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Пост: {params.slug}</h1>
    </div>
  );
}

Теперь при переходе по адресу /blog/my-first-post параметр slug будет равен строке "my-first-post".

Ссылки и компонент Link

Для навигации между страницами Next.js предоставляет встроенный компонент Link. Он обеспечивает предварительную загрузку страниц и переход без перезагрузки (как SPA).

Пример использования на главной странице:

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Link href="/about">Перейти к странице "О нас"</Link>
    </div>
  );
}

Не используйте обычный тег <a> для внутренней навигации — это приведёт к полной перезагрузке страницы и потере преимуществ SPA.

Подходы к рендерингу: SSR, SSG и CSR

Одно из главных преимуществ Next.js — гибкость в выборе стратегии рендеринга для каждой страницы. Рассмотрим основные варианты.

Статическая генерация (SSG)

Страница генерируется один раз на этапе сборки в виде статического HTML. Это самый быстрый способ, идеально подходит для блогов, лендингов и документации. В App Router страницы по умолчанию являются статическими, если они не используют динамические функции.

Для явного указания статической генерации с динамическими параметрами используется функция generateStaticParams:

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  const posts = await getPosts(); // получаем список всех постов
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default function BlogPost({ params }) {
  return <div>Пост: {params.slug}</div>;
}

Серверный рендеринг (SSR)

Страница генерируется на сервере при каждом запросе. Это необходимо для динамических данных, которые часто меняются (например, курс валют или персонализированный контент). В App Router SSR включается автоматически, если вы используете асинхронные операции на серверном компоненте без указания force-static, или используете функции вроде cookies(), headers().

// app/profile/page.js
export default async function Profile() {
  const user = await fetch('https://api.example.com/user').then(res => res.json());
  return <div>Привет, {user.name}</div>;
}

Клиентский рендеринг (CSR)

Если страница содержит много интерактива, обновляется часто и не требует SEO, можно отказаться от серверного рендеринга. Для этого пометьте компонент директивой 'use client'. Весь рендеринг и загрузка данных будут происходить в браузере.

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

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Работа с API-маршрутами

Next.js позволяет создавать серверный API прямо внутри вашего приложения. Это удобно, когда вам нужен простой бэкенд для обработки форм или авторизации. API-маршруты создаются в папке app/api/.

Создайте файл app/api/hello/route.js:

export async function GET() {
  return Response.json({ message: 'Привет от Next.js API!' });
}

export async function POST(request) {
  const data = await request.json();
  // Обработка данных, например, сохранение в базу
  return Response.json({ received: data });
}

Теперь GET-запрос к /api/hello вернёт JSON. Эти маршруты работают только на сервере и не попадают в клиентский бандл.

Стили и CSS в Next.js

Next.js поддерживает различные способы стилизации. Самые популярные:

• CSS-модули: создайте файл Component.module.css и импортируйте его. Стили будут локальными для компонента.
• Глобальные стили: импортируйте файл в корневом макете app/layout.js.
• CSS-in-JS: поддерживаются библиотеки типа Styled-Components (требуют дополнительной настройки).
• Tailwind CSS: легко интегрируется и является популярным выбором для новых проектов.

Пример использования CSS-модуля:

/* app/about/about.module.css */
.title {
  color: blue;
  font-size: 2rem;
}

// app/about/page.js
import styles from './about.module.css';

export default function About() {
  return <h1 className={styles.title}>О нас</h1>;
}

Изображения и компонент Image

Компонент next/image — это улучшенная версия тега <img>. Он автоматически оптимизирует изображения: меняет размер, формат (WebP/AVIF), лениво загружает их и предотвращает смещение макета (Cumulative Layout Shift).

import Image from 'next/image';
import myPic from '../public/photo.jpg';

export default function Page() {
  return (
    <Image
      src={myPic}
      alt="Описание фото"
      width={500}
      height={300}
      priority // для загрузки изображения выше "сгиба"
    />
  );
}

Для внешних изображений обязательно укажите hostname в next.config.js.

Деплой Next.js приложения

Самый простой способ задеплоить Next.js-проект — использовать платформу Vercel (создатели фреймворка). Это бесплатно для небольших проектов.

1. Загрузите ваш код в репозиторий на GitHub, GitLab или Bitbucket.
2. Зайдите на Vercel.com и нажмите "Add New Project".
3. Импортируйте ваш репозиторий. Vercel автоматически определит, что это Next.js, и выставит правильные настройки.
4. Нажмите "Deploy". Через минуту ваш сайт будет доступен по публичной ссылке.

Деплой возможен и на другие платформы: Netlify, TimewebCloud или любой другой хостинг, поддерживающий Node.js. Для этого соберите проект командой npm run build и запустите его с помощью npm start.

Типичные ошибки начинающих

При переходе с обычного React на Next.js новички часто совершают одни и те же ошибки:

• Использование window или document на сервере. Кода в серверных компонентах выполняется в Node.js, где нет глобальных объектов браузера. Используйте клиентские компоненты или хук useEffect.
• Забывают про директиву 'use client' для интерактивных компонентов. Если вам нужны хуки (useState, useEffect) или обработчики событий, компонент должен быть клиентским.
• Неправильная работа с изображениями. Всегда используйте компонент Image и указывайте ширину/высоту для оптимизации.
• Слишком много клиентских компонентов. Старайтесь выносить интерактив как можно ниже по дереву, оставляя серверные компоненты для статичного контента.

Заключение

Next.js — это мощный и гибкий фреймворк, который делает разработку на React проще, быстрее и эффективнее. В этом руководстве для начинающих мы рассмотрели основы: создание проекта, маршрутизацию, способы рендеринга, работу с API и стилями. Это база, на которой вы сможете строить свои первые приложения. Дальнейшее изучение включает работу с базами данных, аутентификацию, middleware и продвинутые паттерны оптимизации. Удачи в изучении Next.js!