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 помогает избежать ошибок ещё до запуска кода. Однако в этом курсе для простоты повествования мы будем работать с jsx.
• 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.jsx       — главная страница (доступна по адресу /)
│   ├── layout.jsx     — базовая обёртка для всех страниц
│   └── globals.css    — глобальные стили (если вы выбрали Tailwind или CSS)
├── public/            — статические файлы (изображения, иконки и т.д.)
├── styles/            — дополнительные стили (если есть)
├── next.config.js     — настройки Next.js
├── tsconfig.json      — конфигурация TypeScript
├── package.json       — зависимости и скрипты проекта

Что такое layout.jsx

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

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

// app/layout.jsx
import React from 'react';

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

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

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

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

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

Что такое page.jsx

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

Например:

// app/page.jsx

export default function Home() {
  return <h1>Привет, Next.js 14!</h1>;
}

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

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

Server Components и Client Components

По умолчанию все компоненты в app/ — серверные. Это значит, что они выполняются на сервере, а браузер получает уже готовую HTML-страницу.

Если вам нужно использовать браузерные функции, такие как useState, useEffect, обработчики событий (onClick, onChange), вам нужно пометить компонент как клиентский, добавив директиву ‘use client’ в начале файла:

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Практика: создаём вторую страницу и добавляем навигацию

Шаг 1. Создайте страницу /about

Перейдите в папку app/ и создайте в ней новую подпапку about, а внутри — файл page.jsx. Это и будет ваша новая страница по адресу /about.

В терминале:

mkdir app/about
touch app/about/page.jsx

Шаг 2. Напишите содержимое страницы /about

Откройте файл app/about/page.jsx и вставьте следующий код:

// app/about/page.jsx

export default function AboutPage() {
  return <h1>О проекте</h1>;
}

Этот компонент — обычная React-функция, которая возвращает заголовок. После сохранения вы можете перейти по адресу http://localhost:3000/about и увидеть страницу.

Шаг 3. Добавьте навигацию в layout

Чтобы не копировать навигацию на каждую страницу вручную, вы можете разместить её в layout.jsx, который автоматически оборачивает все страницы внутри app/.

Откройте файл app/layout.jsx (если его нет — создайте), и замените его содержимое на следующее:

// app/layout.jsx

import Link from 'next/link';

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 style={{ marginTop: '2rem' }}>© 2025</footer>
      </body>
    </html>
  );
}

Здесь:

Что важно понять после этой практики

• Каждая папка внутри app/ с файлом page.jsx — это отдельная страница.
• layout.js позволяет создать общий каркас сайта — это экономит время и упрощает поддержку интерфейса.
• Компонент Link из next/link обеспечивает быструю, плавную навигацию между страницами.
• Страницы по умолчанию являются серверными компонентами — они рендерятся на сервере и быстро загружаются в браузере.