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-ts |
--ts または --typescript | TypeScript プロジェクトとして初期化します (デフォルト) |
--js または --javascript | JavaScript プロジェクトとして初期化します |
--tailwind | Tailwind CSS 設定で初期化します (デフォルト) |
--react-compiler | React Compiler を有効にして初期化します |
--eslint | ESLint 設定で初期化します |
--biome | Biome 設定で初期化します |
--no-linter | リンター設定をスキップします |
--app | App Router プロジェクトとして初期化します |
--api | ルートハンドラーのみのプロジェクトを初期化します |
--src-dir | src/ ディレクトリ内に初期化します |
--turbopack | 生成された package.json で Turbopack を強制的に有効にします (デフォルトで有効) |
--webpack | 生成された package.json で Webpack を強制的に有効にします |
--import-alias <設定するエイリアス> | 使用するインポートエイリアスを指定します (デフォルトは "@/*") |
--empty | 空のプロジェクトを初期化します |
--use-npm | CLI に npm を使用してアプリケーションをブートストラップするように明示的に指示します |
--use-pnpm | CLI に pnpm を使用してアプリケーションをブートストラップするように明示的に指示します |
--use-yarn | CLI に Yarn を使用してアプリケーションをブートストラップするように明示的に指示します |
--use-bun | CLI に Bun を使用してアプリケーションをブートストラップするように明示的に指示します |
-e または --example [名前] [github-url] | アプリをブートストラップするための例 |
--example-path <例へのパス> | 例へのパスを別途指定します |
--reset-preferences | 保存されている設定をリセットするように CLI に明示的に指示します |
--skip-install | パッケージのインストールをスキップするように CLI に明示的に指示します |
--disable-git | Git の初期化を無効にするように CLI に明示的に指示します |
--yes | すべてのオプションについて、以前の設定またはデフォルト値を使用します |
例
デフォルトテンプレートを使用する場合
デフォルトテンプレートを使用して新しいアプリを作成するには、ターミナルで次のコマンドを実行します
npx create-next-app@latestインストール時に、以下のプロンプトが表示されます。
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設定をカスタマイズするを選択すると、以下のプロンプトが表示されます。
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 ドメインのサポートが組み込まれています。
なし：リンター設定を完全にスキップします。後でリンターを追加することもできます。
プロンプトに回答すると、選択した構成で新しいプロジェクトが作成されます。
公式Next.jsの例を使用する場合
公式 Next.js の例を使用して新しいアプリを作成するには、--example フラグを使用します。たとえば、
npx create-next-app@latest --example [example-name] [your-project-name]利用可能なすべての例とそのセットアップ手順は、Next.js リポジトリで確認できます。
公開されているGitHubの例を使用する場合
公開されているGitHubの例を使用して新しいアプリを作成するには、--example オプションとGitHubリポジトリのURLを使用します。たとえば、
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]役に立ちましたか？