Руководство по Next.js для начинающих

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

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

Фреймворк подходит как для небольших веб-сайтов, так и для крупных проектов. Он позволяет быстро запускать приложения с готовой структурой и минимальными настройками, обеспечивая при этом хорошую производительность и удобство разработки.

Основные возможности Next.js

• Серверный рендеринг (SSR) — страницы создаются на сервере перед отправкой пользователю, что ускоряет отображение и улучшает SEO. Например, используется для киноафиши, чтобы расписание всегда было актуальным.
• Статическая генерация страниц (SSG) — страницы создаются заранее и мгновенно загружаются пользователю. Этот вариант лучше подойдёт для каталога фильмов с редко меняющимся контентом, чтобы страницы открывались мгновенно.
• Маршрутизация по файловой структуре — любой файл в папке pages или app автоматически становится доступным по URL.
• API Routes — создание серверных эндпоинтов прямо в проекте без отдельного backend.
• Компонент <Image /> — автоматически подбирает размер и сжимает изображения, ускоряя загрузку страниц на разных устройствах.
• Layouts (шаблоны страниц) — общий макет с повторяющимися элементами (шапка, меню, подвал), используемый на всех страницах.
• Клиентские и серверные компоненты — серверные для статического контента, клиентские для интерактивных элементов: кнопок, форм, анимаций.
• Поддержка CSS-модулей, Tailwind и TypeScript — встроенные средства для стилизации и строгой проверки кода.

Описание проекта

Мы будем разрабатывать учебное приложение Movie Finder, в котором пользователь сможет выбирать жанр фильмов и просматривать список доступных картин.
Это проект для новичков, цель которого — на практике познакомиться с основными возможностями Next.js:

• маршрутизацией;
• клиентскими и серверными компонентами;
• API Routes;
• работой с шаблонами (Layouts).

Проект маленький, но охватывает ключевые функции, которые пригодятся в реальных приложениях.

Что нужно перед стартом
Чтобы запустить и написать свой первый проект на Next.js, нужно установить минимальный набор компонентов: Node.js, редактор кода, браузер.

Node.js

• Скачай с официального сайта nodejs.org.
• Установи LTS-версию — она стабильная и с длительной поддержкой.
• Вместе с Node.js автоматически установится npm (пакетный менеджер), который мы будем использовать для запуска команд.

Редактор кода

• Рекомендуется Visual Studio Code (VS Code), он удобный, бесплатный и поддерживает плагины для React/Next.js.
• Можно писать код и в другом редакторе, но в статье мы будем ориентироваться на VS Code.

Браузер (Google Chrome или аналогичный)

• Нужен для запуска приложения локально по адресу http://localhost:3000.
• В Chrome удобно пользоваться DevTools для отладки.

Этого достаточно, чтобы пройти все шаги из инструкции и собрать учебное приложение.

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

npx create-next-app@latest movie-finder

Что мы делаем: переходим в папку проекта и запускаем сервер разработки.
Зачем: открываем приложение локально по адресу http://localhost:3000, чтобы сразу видеть изменения в браузере.

cd movie-finder

npm run dev

Что мы делаем: разбираемся, какие папки и файлы будем использовать для разработки на Next.js.
Зачем: понимание структуры проекта помогает легко ориентироваться — где frontend, а где backend.

• public/ — статические ресурсы: изображения, шрифты, иконки.
• pages/ — файлы страниц, каждый соответствует отдельному маршруту.
• pages/api/ — папка для API-маршрутов.
• components/ — повторно используемые элементы интерфейса, например карточки фильмов.

Что мы делаем: создаём стартовую страницу с выбором жанра.
Зачем: это точка входа в приложение, откуда пользователь будет переходить на страницу фильмов.
Файл pages/index.js (не забудьте удалить файл app/page.js):

import Link from "next/link";

export default function Home() {
return (
<div>
<h1>Movie Finder</h1>
<p>Выберите жанр для просмотра фильмов</p>
<nav>
<Link href="/movies?genre=action">Экшен</Link> |
<Link href="/movies?genre=comedy">Комедия</Link> |
<Link href="/movies?genre=drama">Драма</Link>
</nav>
</div>
);
}

Что мы делаем: создаём страницу для отображения фильмов по жанру.
Зачем: разбираемся, как работает динамическая маршрутизация и передача параметров (?genre=) в Next.js.

Файл pages/movies.js:

import { useState, useEffect } from "next/router";
import { useRouter } from "next/router";

export default function MoviesPage() {
const router = useRouter();
const { genre } = router.query;
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {

// NOTE: API мы реализуем в следующем шаге.

const response = await fetch(`/api/movies?genre=${genre}`);

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};

fetchData();
}, []);

return (
<div>
<h1>Фильмы выбранного жанра</h1>
{selectedMovies.length > 0 ? (
<ul>
{selectedMovies.map((movie, index) => (
<li key={index}>{movie}</li>
))}
</ul>
) : (
<p>Жанр не выбран или фильмы отсутствуют</p>
)}
</div>
);
}

Что мы делаем: добавляем серверный эндпоинт для получения фильмов.
Зачем: API позволяет хранить и отдавать данные централизованно, вместо строго прописанных массивов в компоненте.

Файл pages/api/movies.js:

export default function handler(req, res) {
// NOTE: В настоящем приложении эти данные будут хранится в базе данных, но это отдельная тема, которая сейчас не рассматривается.

const movies = {
action: ["Темный рыцарь", "Начало", "Без компромиссов"],
comedy: ["Тупой и ещё тупее", "Друзья", "Стажёр"],
drama: ["Вечное сияние чистого разума", "Бойцовский клуб", "1+1"],
};
const { genre } = req.query;
res.status(200).json(movies[genre] || []);
}

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

Файл components/Layout.js:

import Link from "next/link";
export default function Layout({ children }) {
return (
<div>
<header>
<nav>
<Link href="/">Главная</Link>

</nav>
</header>
<main>{children}</main>
<footer>
<p>2025 Movie Finder</p>
</footer>
</div>
);
}

Подключение макета в pages/_app.js:

import Layout from "../components/Layout";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}

Что мы делаем: добавляем стили нашему приложению.
Зачем: чтобы сайт стал выглядеть красивым.

Попробуй стилизовать элементы по своему усмотрению.

Учебное приложение Movie Finder содержит:

• Главную страницу с выбором жанра
• Страницу фильмов с динамическим контентом
• API для получения данных
• Общий макет с шапкой и подвалом

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

Нужно ли знать React для работы с Next.js?

Да, для работы с Next.js необходимо знать React. Достаточно базовых знаний JSX, умения создавать функциональные компоненты и понимать, как работает передача пропсов и состояние. Next.js является надстройкой над React, поэтому без понимания основ React будет трудно разобраться в проекте.

Можно ли хранить данные в массиве при работе с Next.js?

Да, хранить данные в массиве можно, но это подходит только для учебных или тестовых проектов. Если ты делаешь небольшой учебный сайт или пробуешь Next.js впервые, достаточно создать массив и отрендерить его данные. Однако в реальных проектах так не делают: данные берутся из API, базы данных или приходят с бэкенда.

Как задеплоить проект на Next.js?

Задеплоить проект на Next.js проще всего через Vercel. Нужно загрузить код на GitHub (или другой Git-репозиторий), подключить его к Vercel, и система автоматически соберёт и развернёт проект. Это стандартный и самый удобный способ деплоя, особенно для начинающих.

Что особенного для новичка в Next.js?

Главное преимущество Next.js для новичка — это готовая инфраструктура. Маршрутизация работает «из коробки» на основе структуры папок, а API можно создавать прямо внутри проекта без дополнительных настроек. То есть не нужно подключать отдельные библиотеки для роутинга или для обработки запросов — всё встроено.

Что делать после первого проекта на Next.js?

После того как ты сделаешь свой первый проект на Next.js (например, простой сайт или каталог фильмов), следующий шаг — добавить больше функциональности. Можно подключить реальное API для получения данных, реализовать поиск по фильмам или товарам, а также улучшить внешний вид с помощью Tailwind CSS или другой библиотеки стилей. Это позволит перейти от учебного уровня к более серьезным проектам.

А если ты хочешь изучить frontend-разработку на профессиональном уровне, поступай на курс с гарантией трудоустройства.