Полное руководство по установке Next.js в 2026: от первого запуска до продакшена

Вы открываете любую статью из топа: «Установите Node.js, выполните npx create-next-app, запустите npm run dev - готово!» Три абзаца, и всё. А через час вы сидите с красным терминалом, 15 ошибками и чувством, что вы - единственный, кто не смог запустить Next.js.

Я был на вашем месте. Поэтому эта статья - не очередная перепечатка документации. Это живой сборник боли, ошибок и решений, которые я собирал 4 года работы с Next.js. Здесь нет воды. Только то, что реально работает в 2026 году.

Кому поможет материал:

• Новичкам - которые боятся слова «серверный рендеринг».

• React-разработчикам - которые хотят перейти на Next.js, но не знают, с чего начать.

• Тимлидам - которые выбирают стек для нового проекта.

Что вы узнаете:

1. Как установить Next.js тремя разными способами (и какой выбрать).

2. Почему ваш проект не запускается и как это починить за 30 секунд.

3. В чём реальная разница между Next.js и React (и когда использовать каждый).

4. Как задеплоить приложение, чтобы оно не упало при первом же пользователе.

Поехали.

1. Что такое Next.js и почему о нём говорят все?

Представьте, что вы строите дом. React - это кирпичи и цемент. Вы можете построить стены, но отоплене, водопровод и электричество придётся подключать отдельно. Next.js - это готовый строительный комплект, где уже есть всё: отоплене (SSR), трубы (роутинг) и генератор (оптимизация).

Если совсем просто:

• React рендерит страницу в браузере. Пользователь видит пустой экран, пока не загрузится JavaScript.

• Next.js рендерит страницу на сервере. Пользователь сразу видит готовый HTML.

Это критично для SEO. Яндекс и Google не любят ждать, пока подгрузится JS. Если ваш сайт - интернет-магазин или блог, Next.js - это не вопрос выбора, это вопрос выживания.

Ключевая фишка, о которой молчат в гайдах

Next.js автоматически разделяет код (code splitting). Это значит, что на главную страницу загружается только тот код, который нужен для главной. Остальные страницы подгружаются, когда пользователь переходит по ссылке. В чистом React это настраивать - геморрой. В Next.js - работает из коробки.

2. Как установить Next.js: 3 способа для разных задач

Большинство статей дают один способ. Я дам три - и объясню, какой для чего.

Способ 1. Быстрый старт (для новичков)

Этот способ подходит, если вы хотите попробовать Next.js без лишних заморочек.

npx create-next-app@latest my-project
cd my-project
npm run dev

Что происходит за кулисами:

• Устанавливается React, React-DOM, Next.js.

• Настраивается ESLint (проверка кода).

• Создаётся папка app с базовой структурой.

Важно: На вопрос «Would you like to use App Router?» всегда отвечайте Yes. Это будущее фреймворка. Pages Router - устаревший легаси.

Способ 2. Ручная установка (для профи)

Используйте, если хотите полный контроль над зависимостями.

mkdir my-project && cd my-project
npm init -y
npm install next react react-dom

Затем откройте package.json и добавьте скрипты:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

Создайте папку app и внутри - файл page.js:

export default function Page() {
  return <h1>Hello Next.js</h1>;
}

Теперь запускайте: npm run dev.

Почему этот способ лучше: Вы видите, какие именно пакеты устанавливаются. Это помогает понимать структуру проекта, а не слепо доверять скрипту.

Способ 3. Установка с TypeScript (для серьёзных проектов)

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

TypeScript - это не «модно», это необходимость в больших проектах. Он ловит 90% ошибок на этапе написания кода, а не в рантайме.

3. Запуск Next.js приложения: что скрывается за командой npm run dev

Когда вы вводите npm run dev, происходит магия:

1. Turbopack (новый сборщик от Vercel) компилирует ваш код. Он работает в 10 раз быстрее Webpack.

2. Сервер разработки поднимается на http://localhost:3000.

3. Hot Module Replacement (HMR) - вы меняете код, и страница обновляется без перезагрузки. Состояние компонентов сохраняется. Это экономит часы разработки.

Что делать, если порт 3000 занят?

Выполните:

npm run dev -- -p 3001

 4. Главный вопрос: Next.js или React - что выбрать?

Этот вопрос я слышу на каждом митапе. Давайте раз и навсегда поставим точку.

Сценарии из жизни

Сценарий 1: Вы делаете личный блог.

Возьмите Next.js. SEO решает всё. Без SSR ваш блог никто не найдёт в поиске.

Сценарий 2: Вы делаете админ-панель для сотрудников.

Там не нужен поисковик. Берите чистый React - он проще и быстрее разрабатывается.

Сценарий 3: У вас уже есть React-проект, и вы хотите его переписать.

Не переписывайте всё сразу. Используйте Next.js только для новых страниц (например, для блога). Остальное оставьте на React. Это называется миграция по частям.

5. App Router и Turbopack: что это и зачем они нужны?

App Router (новая маршрутизация)

Раньше (в Pages Router) структура была жёсткой. Сейчас - гибкая.

app/
├── page.js          → Главная (/)
├── about/
│   └── page.js      → О нас (/about)
├── blog/
│   ├── page.js      → Блог (/blog)
│   └── [slug]/
│       └── page.js  → Статья (/blog/hello-world)

Что даёт App Router:

• Вложенные макеты (layouts).

• Серверные компоненты по умолчанию.

• Упрощённую работу с данными fetch с кэшированием).

Главный совет: Используйте 'use client' только тогда, когда это действительно нужно (хуки, события, эффекты). Всё остальное должно быть серверным.

Turbopack (новый сборщик)

Если вы работали с Webpack, вы знаете, что такое боль. Turbopack - это Webpack, переписанный на Rust. Он компилирует код в 700 раз быстрее для больших проектов.

В Next.js 16 Turbopack работает по умолчанию. Дополнительных флагов не требуется.

6. Реальные ошибки при установке (и как их победить)

Эти ошибки я видел сотни раз на Stack Overflow, в GitHub issues и в своей консоли.

Ошибка 1: Error: Cannot find module 'next'

Текст ошибки:

Error: Cannot find module 'next'
Require stack:
- /Users/.../my-project/node_modules/.bin/next

Причина: Вы запускаете next dev, но пакет не установлен.

Решение:

npm install next react react-dom

Превентивный совет: Всегда проверяйте, что node_modules существует, перед запуском.

Ошибка 2: You are using Node.js x.x.x but Next.js requires Node.js >= 18.17.0

Текст ошибки:

You are using Node.js 16.14.0. For Next.js, Node.js version >= 18.17.0 is required.

Причина: Устаревшая версия Node.js.

Решение:

• Установите Node.js через официальный сайт.

• Или используйте nvm (менеджер версий):

nvm install 22
nvm use 22

Ошибка 3: Port 3000 is already in use

Текст ошибки:

Port 3000 is already in use.

Причина: Другой процесс уже слушает порт.

Решение:

1. Найдите процесс:

lsof -i :3000

2. Убейте его:

kill -9 PID

3. Или запустите на другом порту:

npm run dev -- -p 3001

Ошибка 4: 'use client' is not allowed in server components

Текст ошибки:

You're importing a component that needs `'use client'` but it's used in a server component.

Причина: Вы используете хуки (useState, useEffect) в компоненте без директивы 'use client'.

Решение: В самом верху файла добавьте:

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

Ошибка 5: Module not found: Can't resolve '@/components/Header'

Текст ошибки:

Module not found: Can't resolve '@/components/Header'

Причина: Некорректный путь или отсутствие алиаса.

Решение: Проверьте файл jsconfig.json или tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

7. Установка Next.js с дополнительными инструментами

С Tailwind CSS

Tailwind - это CSS-фреймворк, который ускоряет вёрстку в разы.

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

Если проект уже создан, установите вручную:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

С ESLint и Prettier

Качественный код = меньше багов.

npm install -D eslint prettier eslint-config-next

Добавьте в package.json:

"scripts": {
  "lint": "next lint",
  "format": "prettier --write ."
}

8. Деплой: как запустить Next.js в продакшене

Установка и разработка - это полдела. Самое страшное начинается, когда вы заливаете проект на сервер.

Вариант 1: Vercel (рекомендуемый)

Vercel - это компания, которая создала Next.js. Деплой туда - это два клика.

1. Заливаете код на GitHub.

2. Импортируете репозиторий в Vercel.

3. Vercel автоматически собирает next build) и деплоит проект.

Почему это лучший выбор: Автоматические превью для каждого PR, кэширование на уровне CDN, бесплатный SSL. В 2026 году Vercel добавил поддержку edge-функций для Next.js 16 - это ускоряет ответы API до 50 мс.

Вариант 2: Собственный сервер (VPS)

next build
next start

Важно: next start запускает продакшен-сервер, а не режим разработки. Он оптимизирован для высокой нагрузки.

Настройка PM2 (для стабильности):

npm install -g pm2
pm2 start next --name "my-next-app" -- start
pm2 save
pm2 startup

Вариант 3: Docker

Создайте Dockerfile:

FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:22-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY package*.json ./
EXPOSE 3000
CMD ["next", "start"]

Запуск:

docker build -t my-next-app .
docker run -p 3000:3000 my-next-app

9. Next.js vs Nuxt.js (для тех, кто пришёл из Vue)

Если вы искали next.js для vue, ответ прост: ваш фреймворк - Nuxt.js.

Сравнение:

Концепции почти идентичны:

• Next.js App Router = Nuxt.js pages/.

• Next.js getStaticProps = Nuxt.js asyncData.

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

10. FAQ: ответы на самые частые вопросы (которые не гуглятся)

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

Ответ: Да, и не просто знать, а понимать хуки, контекст и жизненный цикл. Next.js - это надстройка, а не замена. Без React вы ничего не напишете.

Вопрос 2: Можно ли использовать Next.js без Node.js?

Ответ: Только если вы используете статическую генерацию (SSG) и хостите готовые HTML-файлы. Но в режиме разработки Node.js обязателен.

Вопрос 3: Как удалить Next.js проект?

Ответ: Просто удалите папку. rm -rf my-project. Никаких системных зависимостей Next.js не оставляет.

Вопрос 4: Next.js работает с Express.js?

Ответ: Да, но это избыточно. Next.js уже имеет встроенный сервер. Если нужен кастомный сервер, используйте файл server.js:

const { createServer } = require('http');
const next = require('next');

const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    handle(req, res);
  }).listen(3000);
});

Вопрос 5: Что такое getStaticProps и getServerSideProps?

Ответ: Это методы из Pages Router (устаревшие).

• getStaticProps - собирает данные на этапе сборки (для статики).

• getServerSideProps - собирает данные при каждом запросе (для динамики).

В App Router вместо них используется обычный fetch с настройкой кэширования:

const res = await fetch('https://api.example.com/data', { cache: 'force-cache' });

Вопрос 6: Как обновить Next.js до последней версии?

Ответ:

npm install next@latest react@latest react-dom@latest

Вопрос 7: Можно ли использовать Redux с Next.js?

Ответ: Да, но с нюансами. Используйте Redux Toolkit и оборачивайте приложение в провайдер в файле layout.js. Но в эпоху серверных компонентов Redux становится всё менее актуальным. Рекомендую посмотреть на Zustand или React Context.

Вопрос 8: Почему Next.js такой популярный в 2026 году?

Ответ: Потому что он решает главную проблему React-приложений - SEO и скорость загрузки. В 2026 году Next.js 16 добавил встроенную поддержку React 19 и улучшенное кэширование на edge-уровне. А ещё его поддерживает Vercel, который делает деплой максимально простым.

11. Лучшие практики (чтобы ваш проект не умер через месяц)

1. Используйте серверные компоненты по умолчанию. Только если нужны события или хуки - добавляйте 'use client'.

2. Кэшируйте данные. Next.js 16 кэширует fetch по умолчанию. Не отключайте это без необходимости.

3. Оптимизируйте изображения. Всегда используйте next/image. Это ускорит сайт в 2 раза.

4. Следите за размером бандла. Используйте next/dynamic для ленивой загрузки.

5. Пишите переменные окружения. .env.local - ваш лучший друг для хранения ключей API.

6. Настройте ESLint и Prettier. Это сэкономит часы на код-ревью.

7. Используйте <Head> для SEO. Добавляйте мета-теги на каждую страницу.

8. Делайте резервные копии. Перед обновлением Next.js всегда коммитьте текущую версию.

12. Пример полного рабочего проекта

Создайте минимальный блог на Next.js за 5 минут:

app/page.js

export default function Home() {
  return (
    <div>
      <h1>Мой блог</h1>
      <p>Добро пожаловать!</p>
    </div>
  );
}

app/blog/page.js

async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

export default async function Blog() {
  const posts = await getPosts();
  return (
    <div>
      <h1>Статьи</h1>
      <ul>
        {posts.slice(0, 5).map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Запустите: npm run dev - и готово. У вас SSR-приложение с SEO и динамическими данными.

13. Заключение: Next.js - это не сложно. Это просто по-другому

Мы прошли длинный путь. От установки до деплоя, от ошибок до лучших практик. Вы теперь знаете:

• Как установить Next.js тремя способами.

• Почему порт 3000 может быть занят и как это исправить.

• В чём разница между Next.js и React.

• Как деплоить приложение на Vercel и свой сервер.

• Какие ошибки ждут новичка и как их избежать.

• Какие фичи появились в Next.js 16 в 2026 году.

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