create-next-app CLI
create-next-app CLIを使用すると、デフォルトのテンプレートまたは公開GitHubリポジトリからのサンプルを使用して、新しいNext.jsアプリケーションを作成できます。これはNext.jsを始めるための最も簡単な方法です。
基本的な使い方
npx create-next-app@latest [project-name] [options]リファレンス
利用可能なオプションは以下の通りです。
| オプション | 説明 |
|---|---|
-h または --help | 利用可能なすべてのオプションを表示 |
-v または --version | バージョン番号を出力する |
--no-\* | デフォルトオプションを否定します。例：--no-ts |
--ts または --typescript | TypeScriptプロジェクトとして初期化します（デフォルト） |
--js または --javascript | JavaScriptプロジェクトとして初期化します |
--tailwind | Tailwind CSS構成で初期化します（デフォルト） |
--react-compiler | React Compilerを有効にして初期化します |
--eslint | ESLint構成で初期化します |
--biome | Biome構成で初期化します |
--no-linter | リンター構成をスキップします |
--app | App Routerプロジェクトとして初期化します |
--api | ルートハンドラーのみのプロジェクトを初期化します |
--src-dir | src/ ディレクトリ内に初期化します |
--turbopack | 生成されたpackage.jsonでTurbopackを強制的に有効にする（デフォルトで有効） |
--webpack | 生成されたpackage.jsonでWebpackを強制的に有効にする |
--import-alias <設定するエイリアス> | 使用するインポートエイリアスを指定します（デフォルトは "@/*"） |
--empty | 空のプロジェクトを初期化します |
--use-npm | npmを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します |
--use-pnpm | pnpmを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します |
--use-yarn | Yarnを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します |
--use-bun | Bunを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します |
-e または --example [名前] [github-url] | アプリをブートストラップするためのサンプル |
--example-path <サンプルのパス> | サンプルのパスを別途指定します |
--reset-preferences | 保存されている設定をリセットするようにCLIに明示的に指示します |
--skip-install | パッケージのインストールをスキップするようにCLIに明示的に指示します |
--disable-git | gitの初期化を無効にするようにCLIに明示的に指示します |
--yes | すべてのオプションに以前の設定またはデフォルトを使用します |
例
デフォルトテンプレートを使用した場合
デフォルトテンプレートを使用して新しいアプリを作成するには、ターミナルで次のコマンドを実行します。
npx create-next-app@latestインストール時に、以下のプロンプトが表示されます。
What is your project named? my-app
Would you like to use the recommended Next.js defaults?
Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack
No, reuse previous settings
No, customize settings - Choose your own preferences設定をカスタマイズするを選択すると、以下のプロンプトが表示されます。
Would you like to use TypeScript? No / Yes
Which linter would you like to use? ESLint / Biome / None
Would you like to use React Compiler? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack? (recommended) No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*プロンプトの後、create-next-appはプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。
リンターオプション
ESLint：伝統的で最も人気のあるJavaScriptリンター。@next/eslint-plugin-nextからのNext.js固有のルールが含まれています。
Biome：ESLintとPrettierの機能を組み合わせた、高速でモダンなリンターおよびフォーマッター。最適なパフォーマンスのために、Next.jsおよびReactドメインの組み込みサポートが含まれています。
なし：リンター構成を完全にスキップします。後でリンターを追加することもできます。
プロンプトに回答すると、選択した構成で新しいプロジェクトが作成されます。
公式のNext.jsサンプルを使用した場合
公式のNext.jsサンプルを使用して新しいアプリを作成するには、--exampleフラグを使用します。たとえば、
npx create-next-app@latest --example [example-name] [your-project-name]利用可能なすべてのサンプルのリストとセットアップ手順は、Next.jsリポジトリで確認できます。
任意の公開GitHubサンプルを使用した場合
任意の公開GitHubサンプルを使用して新しいアプリを作成するには、--exampleオプションにGitHubリポジトリのURLを使用します。たとえば、
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]役に立ちましたか？