Создание проекта: create-next-app

Создаём первый проект Next.js одной командой и запускаем dev-сервер.

create-next-app — официальный генератор проектов: задаёт пару вопросов и собирает готовую структуру с настроенными сборкой, линтером и (при желании) TypeScript и Tailwind.

Команда установки

Нужен установленный Node.js (LTS-версия). Создаём проект интерактивно:

npx create-next-app@latest my-app

Генератор задаст несколько вопросов. Разумные ответы для старта:

Would you like to use TypeScript?        → Yes
Would you like to use ESLint?             → Yes
Would you like to use Tailwind CSS?       → No (на старте обойдёмся без него)
Would you like to use `src/` directory?   → No
Would you like to use App Router?         → Yes  (рекомендуется)
Would you like to customize import alias?  → No

Можно задать всё флагами и не отвечать на вопросы вручную:

npx create-next-app@latest my-app --ts --eslint --app --no-tailwind --no-src-dir

Запуск dev-сервера

Заходим в папку проекта и стартуем сервер разработки:

cd my-app
npm run dev

Откройте в браузере http://localhost:3000 — увидите стартовую страницу. Dev-сервер поддерживает горячую перезагрузку: правите файл, сохраняете — страница обновляется без ручного рефреша.

Скрипты в package.json

Генератор кладёт четыре основных npm-скрипта:

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

Что под капотом

Внутри обычный package.json с зависимостями next, react и react-dom. Никакого отдельного бандлера настраивать не надо — Next.js использует встроенный сборщик. Версию Next.js легко проверить:

npx next --version

Итог

• npx create-next-app@latest создаёт готовый проект с настроенной сборкой.
• Для нового кода выбирайте App Router и, как правило, TypeScript.
• npm run dev — разработка, npm run build + npm run start — продакшен.