コンテンツへスキップ
APIリファレンスCLICLI

CLI

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 <alias-to-configure>使用するインポートエイリアスを指定します（デフォルトは「@/*」）。
--empty空のプロジェクトを初期化します。
--use-npmCLIにnpmを使用してアプリケーションをブートストラップするように明示的に指示します。
--use-pnpmCLIにpnpmを使用してアプリケーションをブートストラップするように明示的に指示します。
--use-yarnCLIにYarnを使用してアプリケーションをブートストラップするように明示的に指示します。
--use-bunCLIにBunを使用してアプリケーションをブートストラップするように明示的に指示します。
-e または --example [name] [github-url]アプリをブートストラップする例。
--example-path <path-to-example>例へのパスを個別に指定します。
--reset-preferencesCLIに保存されている設定をリセットするように明示的に指示します。
--skip-installCLIにパッケージのインストールをスキップするように明示的に指示します。
--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]