create-next-app

Самый простой способ начать работу с Next.js — использование create-next-app. Этот инструмент командной строки позволяет быстро начать создание нового приложения Next.js с уже настроенной структурой.

Вы можете создать новое приложение, используя стандартный шаблон Next.js или один из официальных примеров Next.js.

Интерактивный режим

Вы можете создать новый проект в интерактивном режиме, выполнив:

Терминал

npx create-next-app@latest

Терминал

yarn create next-app

Терминал

pnpm create next-app

Терминал

bunx create-next-app

Затем вам будут заданы следующие вопросы:

Терминал

Как назовёте проект?  my-app
Использовать TypeScript?  Нет / Да
Использовать ESLint?  Нет / Да
Использовать Tailwind CSS?  Нет / Да
Использовать директорию `src/`?  Нет / Да
Использовать App Router? (рекомендуется)  Нет / Да
Настроить алиас импорта по умолчанию (@/*)?  Нет / Да

После ответов на вопросы будет создан новый проект с конфигурацией, соответствующей вашим ответам.

Неинтерактивный режим

Вы также можете передавать аргументы командной строки для неинтерактивной настройки нового проекта.

Кроме того, вы можете отменить параметры по умолчанию, добавив префикс --no- (например, --no-eslint).

См. create-next-app --help:

Терминал

Использование: create-next-app <директория-проекта> [опции]

Опции:
  -V, --version                        вывести номер версии
  --ts, --typescript

    Инициализировать как проект TypeScript. (по умолчанию)

  --js, --javascript

    Инициализировать как проект JavaScript.

  --tailwind

    Инициализировать с конфигурацией Tailwind CSS. (по умолчанию)

  --eslint

    Инициализировать с конфигурацией ESLint.

  --app

    Инициализировать как проект с App Router.

  --src-dir

    Инициализировать внутри директории `src/`.

  --import-alias <алиас-для-настройки>

    Указать алиас импорта (по умолчанию "@/*").

  --use-npm

    Явно указать CLI использовать npm для инициализации приложения

  --use-pnpm

    Явно указать CLI использовать pnpm для инициализации приложения

  --use-yarn

    Явно указать CLI использовать Yarn для инициализации приложения

  --use-bun

    Явно указать CLI использовать Bun для инициализации приложения

  -e, --example [имя]|[github-ссылка]

    Пример для инициализации приложения. Можно использовать имя примера
    из официального репозитория Next.js или публичную ссылку GitHub.
    Ссылка может указывать на любую ветку и/или поддиректорию

  --example-path <путь-к-примеру>

    В редких случаях ваша ссылка GitHub может содержать имя ветки
    со слешем (например, bug/fix-1) и путь к примеру (например, foo/bar).
    В этом случае необходимо отдельно указать путь к примеру:
    --example-path foo/bar

  --reset-preferences

    Явно указать CLI сбросить сохранённые настройки

  -h, --help                           вывести справку по использованию

Почему стоит использовать Create Next App?

create-next-app позволяет создать новое приложение Next.js за считанные секунды. Этот инструмент официально поддерживается создателями Next.js и предоставляет ряд преимуществ:

Интерактивный интерфейс: Запуск npx create-next-app@latest (без аргументов) запускает интерактивный интерфейс, который проведёт вас через процесс настройки проекта.
Нет зависимостей: Инициализация проекта занимает всего секунду. Create Next App не имеет зависимостей.
Поддержка оффлайн-режима: Create Next App автоматически определяет, находитесь ли вы в оффлайн-режиме, и создаёт проект, используя локальный кэш пакетов.
Поддержка примеров: Create Next App может создать приложение на основе примера из коллекции примеров Next.js (например, npx create-next-app --example api-routes) или любого публичного репозитория GitHub.
Протестировано: Пакет является частью монорепозитория Next.js и тестируется с использованием того же набора интеграционных тестов, что и сам Next.js, что гарантирует его корректную работу с каждым релизом.

Интерактивный режим

Неинтерактивный режим

Почему стоит использовать Create Next App?

On this page