create-next-app

Next.jsを始める最も簡単な方法は、create-next-appを使用することです。このCLIツールを使えば、すぐに新しい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-url]

    アプリをブートストラップするためのサンプル。公式Next.jsリポジトリのサンプル名または
    公開GitHub URLを使用できます。URLは任意のブランチやサブディレクトリを使用可能

  --example-path <サンプルへのパス>

    稀なケースとして、GitHub URLにスラッシュを含むブランチ名（例: 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を実行すると、プロジェクト設定をガイドする対話型エクスペリエンスが起動します。
依存関係ゼロ: プロジェクトの初期化は1秒で完了します。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