Menu

create-next-app

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

基本的な使用法：

Terminal
npx create-next-app@latest [プロジェクト名] [オプション]

リファレンス

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

オプション説明
-h または --help利用可能なすべてのオプションを表示
-v または --versionバージョン番号を出力
--no-*デフォルトオプションを否定。例：--no-eslint
--ts または --typescriptTypeScriptプロジェクトとして初期化（デフォルト）
--js または --javascriptJavaScriptプロジェクトとして初期化
--tailwindTailwind CSSの設定で初期化（デフォルト）
--eslintESLintの設定で初期化
--appApp Routerプロジェクトとして初期化
--src-dirsrc/ディレクトリ内に初期化
--turbopack開発時にデフォルトでTurbopackを有効化
--import-alias <エイリアスを設定>使用するインポートエイリアスを指定（デフォルト「@/*」）
--empty空のプロジェクトを初期化
--use-npmCLIにnpmを使用してアプリケーションをブートストラップするよう明示的に指示
--use-pnpmCLIにpnpmを使用してアプリケーションをブートストラップするよう明示的に指示
--use-yarnCLIにYarnを使用してアプリケーションをブートストラップするよう明示的に指示
--use-bunCLIにBunを使用してアプリケーションをブートストラップするよう明示的に指示
-e または --example [名前] [GitHubのURL]アプリのブートストラップに使用する例
--example-path <例のパス>例のパスを個別に指定
--reset-preferencesCLIに保存された設定をリセットするよう明示的に指示
--skip-installCLIにパッケージのインストールをスキップするよう明示的に指示
--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 [例の名前] [プロジェクト名]

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

任意の公開GitHub例を使用

任意の公開GitHub例を使用して新しいアプリを作成するには、--exampleオプションにGitHubリポジトリのURLを指定します。例：

Terminal
npx create-next-app@latest --example "https://github.com/.../" [プロジェクト名]