create-next-app
create-next-app
CLIを使用すると、デフォルトのテンプレートや公開GitHubリポジトリからの例を使用して、新しいNext.jsアプリケーションを作成できます。Next.jsを始める最も簡単な方法です。
基本的な使用法:
Terminal
npx create-next-app@latest [project-name] [options]
リファレンス
以下のオプションが利用可能です:
オプション | 説明 |
---|---|
-h または --help | 利用可能なすべてのオプションを表示 |
-v または --version | バージョン番号を出力 |
--no-* | デフォルトオプションを否定します。例:--no-eslint |
--ts または --typescript | TypeScriptプロジェクトとして初期化(デフォルト) |
--js または --javascript | JavaScriptプロジェクトとして初期化 |
--tailwind | Tailwind CSS設定で初期化(デフォルト) |
--eslint | ESLint設定で初期化 |
--app | App Routerプロジェクトとして初期化 |
--api | ルートハンドラーのみのプロジェクトを初期化 |
--src-dir | src/ ディレクトリ内で初期化 |
--turbopack | 開発用にデフォルトでTurbopackを有効にする |
--import-alias <alias-to-configure> | 使用するインポートエイリアスを指定(デフォルトは"@/*") |
--empty | 空のプロジェクトを初期化 |
--use-npm | npmを使用してアプリケーションをブートストラップするようCLIに明示 |
--use-pnpm | pnpmを使用してアプリケーションをブートストラップするようCLIに明示 |
--use-yarn | Yarnを使用してアプリケーションをブートストラップするようCLIに明示 |
--use-bun | Bunを使用してアプリケーションをブートストラップするようCLIに明示 |
-e または --example [name] [github-url] | アプリをブートストラップするための例 |
--example-path <path-to-example> | 例のパスを別途指定 |
--reset-preferences | 保存された設定をリセットするようCLIに明示 |
--skip-install | パッケージのインストールをスキップするようCLIに明示 |
--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 [example-name] [your-project-name]
利用可能なすべての例とセットアップ手順は、Next.jsリポジトリで確認できます。
任意の公開GitHub例を使用する場合
任意の公開GitHub例を使用して新しいアプリを作成するには、GitHubリポジトリのURLを指定して--example
オプションを使用します。例えば:
Terminal
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]