create-next-app

create-next-app CLIは、デフォルトのテンプレートまたは公開されているGitHubリポジトリからexampleを使用して新しいNext.jsアプリケーションを作成することができます。これはNext.jsを始めるための最も簡単な方法です。

基本的な使い方：

Terminal

npx create-next-app@latest [project-name] [options]

参照

以下のオプションが利用可能です：

オプション	説明
-h または --help	すべての利用可能なオプションを表示
-v または --version	バージョン番号を出力
--no-*	デフォルトのオプションを否定します。例：--no-eslint
--ts または --typescript	TypeScriptプロジェクトとして初期化（デフォルト）
--js または --javascript	JavaScriptプロジェクトとして初期化
--tailwind	Tailwind CSS設定で初期化（デフォルト）
--eslint	ESLint設定で初期化
--app	App Routerプロジェクトとして初期化
--src-dir	src/ディレクトリ内に初期化
--turbopack	開発用にデフォルトでTurbopackを有効にする
--import-alias <alias-to-configure>	使用するインポートエイリアスを指定（デフォルトは"@/*"）
--empty	空のプロジェクトとして初期化
--use-npm	npmを使用してアプリケーションをブートストラップする
--use-pnpm	pnpmを使用してアプリケーションをブートストラップする
--use-yarn	Yarnを使用してアプリケーションをブートストラップする
--use-bun	Bunを使用してアプリケーションをブートストラップする
-e または --example [name] [github-url]	サンプルを使用してアプリをブートストラップ
--example-path <path-to-example>	サンプルへのパスを個別に指定
--reset-preferences	保存された設定をクリアする
--skip-install	パッケージのインストールをスキップ
--yes	すべてのオプションで以前の設定またはデフォルトを使用

例

デフォルトのテンプレートを使用する場合

デフォルトのテンプレートを使用して新しいアプリを作成するには、以下のコマンドをターミナルで実行します：

Terminal

npx create-next-app@latest

次の質問が表示されます：

Terminal

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 your code inside a `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)?  No / Yes

質問に答えると、選択した設定で新しいプロジェクトが作成されます。

公式のNext.js例を使用する場合

公式のNext.js例を使用して新しいアプリを作成するには、--exampleフラグを使用します。例：

Terminal

npx create-next-app@latest --example [example-name] [your-project-name]

利用可能なすべての例とセットアップ手順をNext.jsリポジトリで確認できます。

公開されているGitHubのサンプルを使用する場合

公開されているGitHubのサンプルを使用して新しいアプリを作成するには、GitHubリポジトリのURLを--exampleオプションと一緒に使用します。例：

Terminal

npx create-next-app@latest --example "https://github.com/.../" [your-project-name]