create-next-app
create-next-app CLI を使用すると、デフォルトテンプレートまたは公開されている GitHub リポジトリの サンプル を使って、新しい Next.js アプリケーションを素早く作成できます。Next.js を始める最も簡単な方法です。
基本的な使い方:
npx create-next-app@latest [プロジェクト名] [オプション]リファレンス
以下のオプションが利用可能です:
| オプション | 説明 |
|---|---|
-h または --help | 利用可能なすべてのオプションを表示 |
-v または --version | バージョン番号を出力 |
--no-* | デフォルトオプションを無効化。例: --no-eslint |
--ts または --typescript | TypeScript プロジェクトとして初期化 (デフォルト) |
--js または --javascript | JavaScript プロジェクトとして初期化 |
--tailwind | Tailwind CSS 設定で初期化 (デフォルト) |
--eslint | ESLint 設定で初期化 |
--app | App Router プロジェクトとして初期化 |
--src-dir | src/ ディレクトリ内に初期化 |
--turbo | 開発時に Turbopack をデフォルトで有効化 |
--import-alias <設定するエイリアス> | 使用するインポートエイリアスを指定 (デフォルトは "@/*") |
--empty | 空のプロジェクトを初期化 |
--use-npm | CLI に npm を使用してアプリケーションをブートストラップするよう明示 |
--use-pnpm | CLI に pnpm を使用してアプリケーションをブートストラップするよう明示 |
--use-yarn | CLI に Yarn を使用してアプリケーションをブートストラップするよう明示 |
--use-bun | CLI に Bun を使用してアプリケーションをブートストラップするよう明示 |
-e または --example [名前] [GitHub URL] | アプリをブートストラップするサンプルを指定 |
--example-path <サンプルへのパス> | サンプルへのパスを個別に指定 |
--reset-preferences | CLI に保存された設定をリセットするよう明示 |
--skip-install | CLI にパッケージのインストールをスキップするよう明示 |
--yes | すべてのオプションで以前の設定またはデフォルトを使用 |
使用例
デフォルトテンプレートを使用
デフォルトテンプレートを使用して新しいアプリを作成するには、ターミナルで次のコマンドを実行します:
npx create-next-app@latestその後、次のプロンプトが表示されます:
プロジェクト名を入力してください? my-app
TypeScript を使用しますか? いいえ / はい
ESLint を使用しますか? いいえ / はい
Tailwind CSS を使用しますか? いいえ / はい
コードを `src/` ディレクトリ内に配置しますか? いいえ / はい
App Router を使用しますか? (推奨) いいえ / はい
`next dev` で Turbopack を使用しますか? いいえ / はい
インポートエイリアスをカスタマイズしますか? (デフォルトは `@/*`) いいえ / はいプロンプトに回答すると、選択した設定で新しいプロジェクトが作成されます。
公式 Next.js サンプルを使用
公式 Next.js サンプルを使用して新しいアプリを作成するには、--example フラグを付けて次のコマンドを実行します:
npx create-next-app@latest --example [プロジェクト名] [サンプル名]利用可能なすべてのサンプルとセットアップ手順は Next.js リポジトリ で確認できます。
公開 GitHub サンプルを使用
公開されている任意の GitHub サンプルを使用して新しいアプリを作成するには、--example オプションに GitHub リポジトリの URL を指定します。例:
npx create-next-app@latest --example [プロジェクト名] "https://github.com/.../"