Как использовать Next.js вместе с React

Введение

Next.js и React часто рассматриваются как неразделимые инструменты разработки современных Web-приложений. Однако у многих разработчиков возникает вопрос — в чем разница между этими технологиями, зачем использовать их вместе и как именно устроена их интеграция на практике? В этой статье объясняется, как Next.js расширяет возможности React, предоставляя инструменты для серверного рендеринга, маршрутизации страниц, обработки данных и статического сайтогенерации. Давайте пошагово разберем, как начать проект, какие преимущества вы получите, и какие нюансы стоит учитывать при работе.

Старт: отличие Next.js от «чистого» React

Next.js — это фреймворк на базе React, который добавляет фичи для построения production-ready приложений. На простом языке: вы пишете код на React, но получаете много приятных «фишек» от Next.js:

• Встроенный роутинг (маршрутизация страниц)
• Server-Side Rendering (SSR) и Static Site Generation (SSG)
• Автоматическую оптимизацию ресурсов (изображения, шрифты)
• Расширенные возможности для работы с данными
• API-роуты прямо в приложении
• Легкую настройку и деплой

Все это повышает производительность и облегчает масштабирование. При этом сам React в Next.js работает именно так, как вы привыкли.

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

Как быстро начать

Next.js работает поверх React, поэтому всё, что вы используете в «голом» React, доступно и здесь. Давайте начнем с самого первого шага — установки.

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev   // Запуск локального сервера разработки

Эта команда создаст шаблон проекта, который уже включает все нужные зависимости (включая сам React). Внутри папки увидите структуру примерно такую:

my-next-app/
  - pages/
  - public/
  - styles/
  - next.config.js
  - ...

Здесь находится весь ваш код, страницы и статические ресурсы.

Где тут React?

Всё, что вы пишете в Next.js — это по-прежнему React-компоненты. Модули в папке pages — это обычные компоненты. Только теперь каждый такой файл автоматически становится страницей вашего приложения.

Next.js - это React-фреймворк для создания серверных и статических веб-приложений. Он предоставляет множество возможностей, таких как серверный рендеринг, автоматическое разделение кода и оптимизация производительности. Если вы хотите узнать, как использовать Next.js вместе с React и создавать современные веб-приложения — приходите на наш большой курс Основы React, React Router и Redux Toolkit. На курсе 177 уроков и 17 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Организация страниц и роутинг в Next.js

Роутинг в Next.js построен на файловой системе. Каждый файл в папке pages отображается на отдельный маршрут (URL).

Пример создания страницы

Создайте файл pages/about.js:

// Импорт React (В Next.js с 13 версии импорты автоматизированы, но можно явно указать)
import React from 'react';

export default function AboutPage() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Это страница «О нас».</p>
    </div>
  );
}

Теперь страница будет доступна по адресу /about. Смотрите, насколько просто!

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

Чтобы создать страницу для динамического контента (например, /posts/123), создайте файл: pages/posts/[id].js.

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query; // Получаем параметр из URL

  return (
    <div>
      <h1>Пост номер {id}</h1>
      <p>Детали поста будут здесь...</p>
    </div>
  );
}

Next.js на лету создает маршрут под каждое значение id. Это очень удобно для блогов, интернет-магазинов и любых ресурсов с множеством страниц-категорий и карточек.

Рендеринг: SSR, SSG, ISR и CSR

React изначально работает только на стороне клиента (CSR — Client-Side Rendering). Но Next.js поддерживает разные режимы рендеринга:

• SSR (Server Side Rendering) — страница генерируется на сервере при каждом запросе
• SSG (Static Site Generation) — страница генерируется на этапе сборки (build-time)
• ISR (Incremental Static Regeneration) — переcтроение отдельных страниц по мере необходимости
• CSR (Client Side Rendering) — клиентский рендеринг как в стандартном React

Давайте рассмотрим, как это включается.

Пример SSR: получение данных на сервере

В файле страницы используйте функцию getServerSideProps, чтобы получить данные на сервере прямо перед рендерингом:

export async function getServerSideProps(context) {
  // Запрос к API или базе данных
  const res = await fetch('https://api.example.com/users');
  const users = await res.json();

  return {
    props: { users }, // Данные будут доступны в компоненте страницы как пропсы
  };
}

export default function UsersPage({ users }) {
  return (
    <div>
      <h1>Пользователи</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Пример SSG: статическая генерация

Страницы, которые редко меняются, выгоднее предгенерировать. Для этого используйте getStaticProps:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return {
    props: { products },
    // revalidate: 10 // Можно включить ISR — обновлять данные раз в 10 секунд
  };
}

export default function ProductsPage({ products }) {
  return (
    <div>
      <h1>Товары</h1>
      {products.map((p) => (
        <div key={p.id}>{p.name}</div>
      ))}
    </div>
  );
}

Теперь эта страница будет сразу возвращаться сервером как статический HTML.

Когда использовать SSR, SSG, ISR или CSR?

• SSR — когда контент всегда актуален (например, админка)
• SSG — когда данные меняются редко (например, лендинги, справочная инфа)
• ISR — гибридный подход (например, периодические обновления цен интернет-магазина)
• CSR — когда важно быстрое взаимодействие на клиенте, а данные загружаются после рендера

Создание и подключение React-компонентов

Ваши компоненты — это обычные функции или классы на React. Вы вольны использовать хуки, контекс­ты, всё, что умеет React.

Пример стандартного компонента React

Создайте компонент в папке components:

// components/UserCard.js
export default function UserCard({ user }) {
  return (
    <div>
      <strong>{user.name}</strong> <span>{user.email}</span>
    </div>
  );
}

Теперь импортируйте его на любую страницу:

import UserCard from '../components/UserCard';

export default function UsersPage({ users }) {
  return (
    <div>
      {users.map((user) => <UserCard key={user.id} user={user} />)}
    </div>
  );
}

Работает абсолютно так же, как в обычном React.

Работа со страницами: макеты (layouts)

Часто требуется общий шаблон для всех страниц — например, с хедером и футером. Next.js поддерживает паттерн Layout:

// components/Layout.js
export default function Layout({ children }) {
  return (
    <div>
      <header>Навигация</header>
      <main>{children}</main>
      <footer>Подвал</footer>
    </div>
  );
}

Чтобы применить макет ко всем страницам, используйте его в файле _app.js:

// pages/_app.js
import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} /> {/* Это отдельная страница */}
    </Layout>
  );
}

Теперь каждый ваш роут будет завернут в Layout.

Передача пропсов и хуки в Next.js

Вы можете использовать любые родные React хуки: useState, useEffect, useContext и другие. К примеру, если часть данных загружается уже на клиенте:

import { useState, useEffect } from 'react';

export default function ClientData() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/me') // Локальный API роут Next.js
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  if (!user) return <div>Загрузка...</div>;
  return <div>Привет, {user.name}!</div>;
}

Использование API-роутов

Next.js может выполнять роль сервера API благодаря файлам в папке pages/api. Каждый файл становится эндпоинтом:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Привет, мир!' });
}

Теперь на /api/hello будет доступен ответ в формате JSON.

Оптимизация производительности

Next.js заботится об оптимизации из коробки:

• Автоматическая подгрузка только нужных JS файлов (Code Splitting)
• Оптимизация изображений через компонент next/image
• Предзагрузка ссылок через компонент next/link

Пример работы с next/image

import Image from 'next/image';

export default function ProfilePic() {
  return (
    <Image
      src="/me.png" // Изображение из публичной папки
      width={150}
      height={150}
      alt="Мой портрет"
    />
  );
}

Использование next/link для переходов

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/about">О нас</Link>
      <Link href="/contact">Контакты</Link>
    </nav>
  );
}

Эти компоненты автоматически оптимизируют загрузку новых страниц.

Взаимодействие с серверными и клиентскими компонентами (App Router)

С недавних версий (Next.js 13+) появился новый способ управления страницами — App Router (папка app). В нем упростилась работа с server components. React-компоненты теперь могут выполняться либо на сервере, либо на клиенте — вы сами это регулируете, помечая компонент как "use client":

// app/page.js
export default function HomePage() {
  return <h1>Главная через новый App Router</h1>;
}

// app/components/UserInfo.js
"use client"; // Компонент будет выполняться только на клиенте
import { useState } from 'react';

export default function UserInfo() {
  // Логика клиента
  ...
}

Папка app дает больше гибкости и способствует лучшей модульности приложения.

Использование сторонних библиотек и интеграция с экосистемой

Вы всегда можете подключать любые библиотеки из React-экосистемы (redux, mobx, formik, и так далее). Next.js никак не мешает интеграции — всё работает точно так же, как в классическом React-проекте.

Настройка окружения и сборки

Конфигурация Next.js минимальна, но полностью настраиваема через файл next.config.js. Например, чтобы добавить алиасы или изменить поведение сборки:

// next.config.js
module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['images.example.com'],
  },
};

Заключение

Использование Next.js вместе с React открывает для вас более широкий спектр возможностей: серверный и статический рендеринг, автоматическую маршрутизацию, интеграцию API и оптимизацию производительности прямо из коробки. Вы пишете привычный React-код, используя современные возможности веба, а Next.js помогает справляться с частыми задачами и упрощает работу над средними и большими проектами. Используйте Next.js для ускорения разработки, улучшения SEO и повышения надежности вашего приложения.

Next.js - мощный инструмент для React-разработки. Для создания сложных приложений требуется умение управлять состоянием приложения и организовывать навигацию. На курсе Основы React, React Router и Redux Toolkit вы научитесь решать эти задачи. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в основы React уже сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как подключить глобальные стили и CSS-модули в Next.js?

Создайте файл, например, styles/global.css и импортируйте его в файле pages/_app.js.
Для CSS-модулей именуйте файлы как Component.module.css, затем импортируйте их только в нужных компонентах:
js import styles from './Button.module.css'; <button className={styles.btn}>Жми</button>

Как настроить путь basePath или deploy на поддомен?

В next.config.js добавьте: js module.exports = { basePath: '/my-app', // для поддиректории }; Путь будет добавлен ко всем роутам.

Как получить query-параметры или работать с роутером в новых server components?

В серверных компонентах используйте cookies, headers или хелперы (searchParams как аргумент функции страницы), а в клиентских — useRouter из next/navigation.

Как добавить редирект или rewrite на уровне сервера?

В next.config.js: js module.exports = { async redirects() { return [ { source: '/old', destination: '/new', permanent: true } ]; } };

Почему импортированные модули не работают на сервере?

Некоторые библиотеки зависят от объектов браузера (window, document). Используйте их только в клиентских компонентах (помечайте файл "use client"), чтобы избежать ошибок при рендере на сервере.