Menu

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-ts
--ts または --typescriptTypeScriptプロジェクトとして初期化します（デフォルト）
--js または --javascriptJavaScriptプロジェクトとして初期化します
--tailwindTailwind CSSの設定で初期化します（デフォルト）
--react-compilerReact Compilerを有効にして初期化します
--eslintESLintの設定で初期化します
--biomeBiomeの設定で初期化します
--no-linterリンター設定をスキップします
--appApp Routerプロジェクトとして初期化します
--apiルートハンドラーのみでプロジェクトを初期化します
--src-dirsrc/ディレクトリ内に初期化します
--turbopack生成されたpackage.jsonでTurbopackを強制的に有効にします（デフォルト）
--webpack生成されたpackage.jsonでWebpackを強制的に有効にします
--import-alias <alias-to-configure>使用するインポートエイリアスを指定します（デフォルト「@/*」）
--empty空のプロジェクトで初期化します
--use-npmCLIにnpmを使用してアプリケーションをブートストラップするよう指定します
--use-pnpmCLIにpnpmを使用してアプリケーションをブートストラップするよう指定します
--use-yarnCLIにYarnを使用してアプリケーションをブートストラップするよう指定します
--use-bunCLIにBunを使用してアプリケーションをブートストラップするよう指定します
-e または --example [name] [github-url]アプリをブートストラップするためのexampleを指定します
--example-path <path-to-example>exampleのパスを別途指定します
--reset-preferencesCLIに保存されているプリファレンスをリセットするよう指定します
--skip-installCLIにパッケージのインストールをスキップするよう指定します
--disable-gitCLIにgitの初期化を無効にするよう指定します
--yesすべてのオプションに対して前回のプリファレンスまたはデフォルトを使用します

例

デフォルトテンプレートでの作成

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

Terminal
npx create-next-app@latest

インストール時に、以下のプロンプトが表示されます：

Terminal
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

customize settingsを選択すると、以下のプロンプトが表示されます：

Terminal
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ドメインの組み込みサポートが含まれます。

None：リンター設定を完全にスキップします。後いつでもリンターを追加できます。

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

公式Next.jsのexampleでの作成

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

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

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

パブリックGitHubのexampleでの作成

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

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