React — это мощный инструмент для создания пользовательских интерфейсов. Однако он предоставляет только «видимую часть айсберга»: сам React не решает задачи маршрутизации, рендеринга на сервере, работы с данными или оптимизации загрузки. Эти задачи ложатся на плечи разработчика или требуют дополнительных библиотек.

Next.js в общих словах

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

• создавать статические и динамические страницы;
• использовать серверный рендеринг;
• интегрировать базы данных и API;
• улучшать SEO;
• оптимизировать производительность;
• быстро разворачивать проекты в продакшн.

С выходом Next.js 13 и 14 произошёл кардинальный сдвиг: традиционная модель на основе pages/ отошла на второй план. Новая архитектура, App Router, сделала Next.js более гибким и масштабируемым.

Зачем вам может понадобиться Next.js

Когда вы начинаете разрабатывать серьёзный сайт или веб-приложение, вы сталкиваетесь с рядом типичных задач:

• Как сделать, чтобы страницы загружались быстро?
• Как улучшить SEO, чтобы сайт находился в поисковых системах?
• Как удобно управлять маршрутами и страницами?
• Как получать и отображать данные с сервера или базы данных?
• Как защитить определённые разделы сайта (например, вход в личный кабинет)?
• Как развернуть всё это в интернете без лишней возни и сложной настройки?

Где используется Next.js

Next.js используют там, где важно, чтобы сайт был:

• быстрым — загружался моментально и работал стабильно;
• видимым для поисковых систем — особенно важно для маркетинговых страниц и магазинов;
• масштабируемым — легко рос вместе с проектом;
• гибким — подходил как для простых сайтов, так и для сложных интерфейсов с личным кабинетом, базой данных и логикой на сервере;
• готовым к продакшну — без лишней настройки, с высоким уровнем безопасности и стабильности.

Что такое App Router и почему это важно

До 2023 года основой Next.js была папка pages/, в которой каждая страница соответствовала файлу. В Next.js 13 и 14 появился новый способ маршрутизации, основанный на папке app/, где маршруты задаются как компоненты, поддерживающие:

• Layout’ы на уровне маршрута
• Композицию и вложенные маршруты
• Серверные компоненты и client components
• Streamed rendering (стриминг страниц)
• Server Actions (управление действиями прямо в компоненте без API маршрутов)

Это делает архитектуру ближе к «фреймворкам нового поколения», таким как Remix и аналогам из экосистемы React.

Что даёт App Router

Layout’ы для маршрутов

Вы можете определять общую структуру интерфейса — например, шапку, меню и подвал — и использовать её повторно на всех страницах. Раньше для этого приходилось вручную вставлять компоненты в каждую страницу. Теперь Next.js сам оборачивает страницы нужным layout’ом.

Вложенные маршруты и компоненты

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

Разделение на серверные и клиентские компоненты

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

• загружать данные с сервера напрямую в компонент (без лишнего JavaScript на клиенте),
• минимизировать объём кода, который уходит в браузер,
• улучшать производительность и безопасность.

Streamed rendering (потоковая отрисовка)

Раньше браузер ждал, пока сервер подготовит всю страницу целиком. Теперь сервер может отправлять HTML по частям, показывая пользователю интерфейс сразу по мере загрузки. Это делает сайты более отзывчивыми и быстрыми даже при медленном соединении.

Server Actions

Это новый способ обрабатывать действия (например, отправку формы) прямо внутри компонента, без необходимости создавать отдельный API-обработчик. То есть вы пишете функцию в React-компоненте, и она автоматически выполняется на сервере — просто, безопасно и удобно.

Почему это важно

App Router — это шаг вперёд в развитии веб-приложений. Он сочетает в себе лучшие идеи из других современных фреймворков (например, Remix), при этом оставаясь частью экосистемы Next.js и React. Благодаря этому вы получаете:

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

Установка проекта на Next.js с App Router

Перед началом убедитесь, что у вас установлен Node.js версии 18 или выше. Проверить это можно командой:

node -v

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

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

Во время установки вам будет предложено выбрать настройки. Рекомендуется указать следующее:

• Use App Router (recommended): Yes — это включает современную архитектуру на основе папки app/, вместо старой pages/.
• Use TypeScript: Yes — желательно, особенно если вы планируете серьёзный проект. TypeScript помогает избежать ошибок ещё до запуска кода. Однако в этом курсе для простоты повествования мы будем работать с JavaScript.
• Use Tailwind CSS: Yes / No — по желанию. Tailwind CSS — это утилитарный CSS-фреймворк. Если вам пока не нужен дизайн, можно выбрать «No».
• Use ESLint и Prettier — эти инструменты помогают следить за качеством и читаемостью кода. Можно включить, если вы знакомы с ними.

Когда генератор завершит работу, перейдите в папку проекта:

cd my-next-app

Запустите приложение:

npm run dev

Теперь ваш сайт будет доступен по адресу:

http://localhost:3000

Обзор структуры проекта (с App Router)

После генерации проекта вы увидите примерно такую структуру:

my-next-app/
├── app/                        # Основная папка с маршрутами и страницами
│   ├── page.js                 # Главная страница (/)
│   ├── layout.js               # Обёртка для всех страниц
│   ├── globals.css             # Глобальные стили
│   └── blog/                   # Раздел блога
│       └── post.js             # Страница поста (/blog/post)
├── public/                     # Статические файлы
├── styles/                     # Дополнительные стили
├── next.config.js              # Настройки Next.js
├── tsconfig.json               # Конфигурация TypeScript
├── package.json                # Зависимости и скрипты

Что такое layout.js

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

Пример простого layout-файла:

// app/layout.js

import "./globals.css";
import Link from "next/link";

export const metadata = {
  title: "Простой сайт",
  description: "Пример на Next.js 14",
};

export default function RootLayout({ children }) {
  return (
    <html lang="ru">
      <body>
        <header>
          <nav>
            <Link href="/">Главная</Link> | <Link href="/about">О проекте</Link>
          </nav>
        </header>
        <main>{children}</main>
        <footer>© 2025</footer>
      </body>
    </html>
  );
}

Что здесь происходит:

metadata — это метаданные страницы в Next.js 14. Они автоматически подставляются в <head>, чтобы задать:

• title — заголовок вкладки браузера
• description — описание для поисковиков (SEO)

Внутри тега <html> задаётся язык документа.

В <body> размещаются:

• <header> — шапка сайта;
• <main> — сюда попадает содержимое каждой страницы;
• <footer> — подвал сайта.

Компонент children — это и есть текущая страница. Next.js автоматически вставит нужный page.js сюда.

В Next.js <Link> — это специальный тег для перехода между страницами без полной перезагрузки. Он работает быстрее, чем обычный <a>.

Что такое page.js

Каждый файл page.js, находящийся в папке app/ или её подкаталогах, представляет собой отдельную страницу.

Например:

// app/page.js

export default function Home() {
  return <h1>Домашняя страница</h1>;
}

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

Компонент выше будет отображаться по адресу /. Вы можете добавлять свои страницы просто создавая папки и файлы page.js внутри app/:

app/
├── about/
│   └── page.js        → отображается по адресу /about
├── contact/
│   └── page.js        → отображается по адресу /contact

Например:

// app/about/page.js

export default function AboutPage() {
  return <h1>Страница "О нас"</h1>;
}

Каждая папка внутри директории app/ автоматически становится частью URL. А каждый файл с именем page.jsx внутри этой папки — это компонент, который будет отображаться при переходе по соответствующему маршруту.

Простой принцип:

• Папка = часть маршрута (URL)
• page.jsx = содержимое страницы
• layout.jsx = оболочка страницы (если есть)

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

Динамический маршрут — это страница, адрес которой зависит от переменной части URL.

Например:

• /blog/hello-world
• /product/123
• /user/john

Такие страницы нельзя заранее перечислить как /about, /contact — потому что они зависят от данных (названия постов, ID товаров и т. д.).

В Next.js App Router вы создаёте динамические маршруты, используя папки с именем в квадратных скобках, например:

[slug]

Здесь [slug] — это «переменная часть» маршрута. Она может быть любой строкой:

• /blog/post-1
• /blog/kak-uchit-nextjs
• /blog/nextjs-v14-obzor

Пример на блоге

Структура:

app/
├── blog/
│   ├── page.js           ← список постов (маршрут: /blog)
│   └── [slug]/
│       └── page.js       ← отдельный пост (маршрут: /blog/что-угодно)

Список постов (app/blog/page.js):

import Link from "next/link";

export default function BlogPage() {
  const posts = [
    { slug: "nextjs-obzor", title: "Обзор Next.js 14" },
    { slug: "client-server", title: "Компоненты: клиентские и серверные" },
  ];

  return (
    <>
      <h1>Блог</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${post.slug}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </>
  );
}

Отдельный пост (app/blog/[slug]/page.js):

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Вы открыли пост:</h1>
      <p>{params.slug}</p>
    </div>
  );
}

Как это работает

[slug] — это имя параметра маршрута. Оно может быть любым (например, [id], [username]).

Внутри компонента в page.js вы получаете объект params, и можете использовать params.slug, чтобы узнать, какую именно страницу открыл пользователь.

Компонент Link создаёт ссылки на такие страницы.

Почему это удобно

• Вам не нужно создавать вручную отдельную страницу для каждого поста, товара, пользователя.
• Можно создавать шаблон один раз и использовать его повторно с разными параметрами URL.
• Работает без сервера — даже в статичных проектах (например, в GitHub Pages или Vercel).