コンテンツにスキップ
APIリファレンスCLIcreate-next-app

create-next-app

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

基本的な使用法

ターミナル
npx create-next-app@latest [project-name] [options]

リファレンス

次のオプションが利用可能です

オプション説明
-h または --help利用可能なすべてのオプションを表示
-v または --versionバージョン番号を出力
--no-*デフォルトのオプションを否定します。例：--no-eslint
--ts または --typescriptTypeScriptプロジェクトとして初期化（デフォルト）
--js または --javascriptJavaScriptプロジェクトとして初期化
--tailwindTailwind CSS設定で初期化（デフォルト）
--eslintESLint設定で初期化
--appApp Routerプロジェクトとして初期化
--src-dirsrc/ディレクトリ内で初期化
--turbo開発用にデフォルトでTurbopackを有効化
--import-alias <構成するエイリアス>使用するインポートエイリアスを指定（デフォルト "@/*"）
--empty空のプロジェクトを初期化
--use-npmnpmを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します
--use-pnpmpnpmを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します
--use-yarnYarnを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します
--use-bunBunを使用してアプリケーションをブートストラップするようにCLIに明示的に指示します
-e または --example [name] [github-url]アプリをブートストラップする例
--example-path <例へのパス>例へのパスを個別に指定します
--reset-preferences保存された設定をリセットするようにCLIに明示的に指示します
--skip-installパッケージのインストールをスキップするようにCLIに明示的に指示します
--yesすべてのオプションで以前の設定またはデフォルトを使用します

例

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

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

ターミナル
npx create-next-app@latest

次に、次のプロンプトが表示されます

ターミナル
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フラグを使用します。例えば

ターミナル
npx create-next-app@latest --example [example-name] [your-project-name]

利用可能なすべてのサンプルと設定手順の一覧は、Next.js リポジトリで確認できます。

パブリックなGitHubのサンプル

パブリックなGitHubサンプルを使用して新しいアプリを作成するには、GitHubリポジトリのURLとともに--exampleオプションを使用します。例:

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