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

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

What is your project named?  my-app
Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like to use `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to customize the default import alias (@/*)?  No / Yes

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

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

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

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

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

Usage: create-next-app <project-directory> [options]
 
Options:
  -V, --version                        output the version number
  --ts, --typescript
 
    Initialize as a TypeScript project. (default)
 
  --js, --javascript
 
    Initialize as a JavaScript project.
 
  --tailwind
 
    Initialize with Tailwind CSS config. (default)
 
  --eslint
 
    Initialize with ESLint config.
 
  --app
 
    Initialize as an App Router project.
 
  --src-dir
 
    Initialize inside a `src/` directory.
 
  --import-alias <alias-to-configure>
 
    Specify import alias to use (default "@/*").
 
  --use-npm
 
    Explicitly tell the CLI to bootstrap the app using npm
 
  --use-pnpm
 
    Explicitly tell the CLI to bootstrap the app using pnpm
 
  --use-yarn
 
    Explicitly tell the CLI to bootstrap the app using Yarn
 
  --use-bun
 
    Explicitly tell the CLI to bootstrap the app using Bun
 
  -e, --example [name]|[github-url]
 
    An example to bootstrap the app with. You can use an example name
    from the official Next.js repo or a public GitHub URL. The URL can use
    any branch and/or subdirectory
 
  --example-path <path-to-example>
 
    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar
 
  --reset-preferences
 
    Explicitly tell the CLI to reset any stored preferences
 
  -h, --help                           output usage information

Зачем использовать 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, гарантируя его правильную работу с каждым релизом.