Next.js を始めるときの入り口が create-next-app です。コマンドを1つ実行するだけで、TypeScript や ESLint、Tailwind CSS の設定まで済んだプロジェクトが手に入ります。ただ、初めて実行すると対話式でいくつも質問が出てきて、どれを選べばよいのか迷いがちです。この記事では、聞かれる項目それぞれの判断基準、対話を省略するためのコマンドラインオプション、そして生成されたファイルが何のためにあるのかを順番に解説します。
目次
create-next-app はプロジェクトの雛形を作るツール
create-next-app は、Next.js が公式に配布しているプロジェクト作成ツールです。空のフォルダから package.json を書いて next をインストールして……という手順を自分でやることもできますが、App Router の初期ファイルや tsconfig.json、.gitignore まで正しい形で揃えるのは手間がかかります。このツールを使えば、そのすべてを自動で用意してくれます。
実行には Node.js が必要です。必要なバージョンは Next.js のバージョンによって変わるため、公式ドキュメントの要件を確認しておくと確実です。手元のバージョンは node -v で確認できます。
# Node.js のバージョンを確認する node -v # 最新版の create-next-app でプロジェクトを作る npx create-next-app@latest
@latest を付けているのは、npx がキャッシュした古いバージョンを使ってしまうのを防ぐためです。付けないと以前ダウンロードしたものが再利用され、新しいテンプレートが反映されないことがあります。プロジェクト名を引数で渡すこともでき、その場合は最初の質問が省略されます。
# my-app という名前でプロジェクトを作る npx create-next-app@latest my-app
npm 以外のパッケージマネージャーからも実行できます。yarn なら yarn create next-app、pnpm なら pnpm create next-app、Bun なら bun create next-app です。どれを使ったかによって、生成されるロックファイルと、後述するインストールコマンドが変わります。
対話式で聞かれる項目と選び方
コマンドを実行すると、いくつかの質問が順番に表示されます。矢印キーで選択して Enter で決定、という形式です。カッコ内に大文字で示されている選択肢（(Yes/no) なら Yes）が既定値で、そのまま Enter を押せば選ばれます。表示される内容は Next.js のバージョンによって増減しますが、代表的なものは次のとおりです。
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 customize the import alias (`@/*` by default)? ... No / Yes
プロジェクト名はディレクトリ名になる
最初に聞かれる What is your project named? で入力した名前が、そのままフォルダ名と package.json の name になります。npm のパッケージ名のルールが適用されるため、大文字やスペースは使えません。my-app のように小文字とハイフンで書くのが無難です。
すでにあるフォルダの中にそのまま作りたい場合は、名前の代わりに .（ドット）を指定します。この使い方は後半で改めて触れます。
TypeScript は基本的に Yes でよい
TypeScript を選ぶと、ページやコンポーネントが .tsx で生成され、tsconfig.json と型定義パッケージが一緒にインストールされます。Next.js の公式ドキュメントもコード例の多くが TypeScript で書かれており、エディターの補完も効きやすくなるため、迷ったら Yes を選んでおいて問題ありません。
JavaScript だけで進めたい場合は No を選びます。ただし後から TypeScript に切り替えることもできます。プロジェクトに .ts や .tsx のファイルを置いて開発サーバーを起動すると、Next.js が必要な設定ファイルとパッケージを案内してくれます。
ESLint はコードの書き方をそろえたいときに
ESLint はコードの問題や書き方のばらつきを検出するツールです。Yes を選ぶと ESLint 本体と Next.js 用の設定がインストールされ、設定ファイルが生成されます。チーム開発や、長く運用するプロジェクトでは入れておくと役に立ちます。
学習目的でとにかく動かしてみたいだけなら No でも構いません。設定ファイルの形式（.eslintrc.json か eslint.config.mjs か）は ESLint と Next.js のバージョンによって変わるので、生成されたファイル名を確認してください。
Tailwind CSS を選ぶと初期スタイルが変わる
Tailwind CSS はクラス名を組み合わせてスタイルを当てる CSS フレームワークです。Yes を選ぶと関連パッケージがインストールされ、app/globals.css に Tailwind を読み込む記述が入った状態で生成されます。生成される初期ページのマークアップも、Tailwind のクラスが付いたものに変わります。
自分で CSS を書きたい、あるいは CSS Modules や別の仕組みを使いたい場合は No を選びます。No にしても app/globals.css は生成されるので、そこに素の CSS を書いていけます。
src ディレクトリは好みで決めてよい
Yes を選ぶと app がプロジェクト直下ではなく src/app に配置されます。設定ファイル類とアプリのソースコードが分かれるため、ルートが散らかりにくくなるのが利点です。No なら app が直下に置かれ、階層が1つ浅くなります。
どちらを選んでも機能面の違いはありません。ただし public と各種設定ファイルは、src を使う場合でも必ずプロジェクト直下に置かれます。ここを src の中に移動すると読み込まれなくなるので注意してください。
App Router か Pages Router か
Next.js には app ディレクトリを使う App Router と、pages ディレクトリを使う Pages Router の2つのルーティング方式があります。App Router が推奨されている方式で、Server Components やレイアウトの入れ子といった新しい機能はこちらが前提です。特別な事情がなければ App Router を選んでください。
既存の Pages Router のプロジェクトに合わせる必要がある場合や、Pages Router 向けの資料に沿って学習したい場合だけ、No を選んで Pages Router にします。バージョンによってはこの質問自体が表示されず、App Router で固定されることもあります。
import alias は既定の @/* のままで十分
import alias は、深い階層から別のファイルを読み込むときのパスを短く書くための仕組みです。既定では @/* が設定され、../../components/Button のような相対パスの代わりに @/components/Button と書けるようになります。
// 相対パスだと階層が深くなるほど読みにくい import Button from '../../components/Button'; // alias を使えば起点が固定されるので分かりやすい import Button from '@/components/Button';
この質問で No（カスタマイズしない）を選べば @/* が使われます。Yes を選ぶと入力欄が出て、~/* のような別の記号に変更できます。実際の設定は tsconfig.json の paths に書き込まれるので、後から手で書き換えることも可能です。
オプションを渡して対話をスキップする
毎回同じ構成で作るなら、コマンドラインオプションで答えを渡してしまえば対話は発生しません。CI や手順書に書いておくときにも、オプション付きのコマンドのほうが確実です。
# TypeScript + Tailwind + ESLint + App Router + src ディレクトリ で作成 npx create-next-app@latest my-app \ --ts \ --tailwind \ --eslint \ --app \ --src-dir \ --import-alias "@/*" \ --use-npm
主なオプションは次のとおりです。ここに挙げたものは --no- を付けた否定形も用意されており、たとえば --no-tailwind のように書けば「使わない」と明示できます。指定しなかった項目については対話で質問されます。
| オプション | 意味 |
|---|---|
--ts, --typescript | TypeScript のプロジェクトとして作成する |
--js, --javascript | JavaScript のプロジェクトとして作成する |
--eslint | ESLint の設定を含める |
--tailwind | Tailwind CSS の設定を含める |
--app | App Router（app ディレクトリ）で作成する |
--src-dir | ソースコードを src/ の中に配置する |
--import-alias <alias> | import alias を指定する（既定は @/*） |
--use-npm | npm でパッケージをインストールする |
--use-pnpm | pnpm でパッケージをインストールする |
--use-yarn | Yarn でパッケージをインストールする |
--use-bun | Bun でパッケージをインストールする |
--example <name-or-url> | 公式サンプルや任意のリポジトリを雛形として使う |
-y, --yes | すべての質問に既定値（または前回の設定）で答える |
--yes は、質問をすべて飛ばして一気に作りたいときに便利です。何が選ばれたかは実行後のログと、生成されたファイルを見れば確認できます。なお利用できるオプションはバージョンによって追加・変更されるので、正確な一覧は npx create-next-app@latest --help で確認するのが確実です。
# 使えるオプションの一覧を表示する npx create-next-app@latest --help
生成されるディレクトリ構成とファイルの役割
TypeScript・App Router・src なしで作った場合、おおよそ次のような構成になります。細かいファイルはバージョンや選択した項目によって変わります。
my-app/ ├── app/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── public/ │ └── （画像などの静的ファイル） ├── .gitignore ├── next.config.ts ├── package.json ├── tsconfig.json └── README.md
それぞれの役割は次のとおりです。最初にすべてを覚える必要はありませんが、どこを触れば何が変わるのかを把握しておくと迷いません。
| ファイル・ディレクトリ | 役割 |
|---|---|
app/ | App Router のルート。フォルダ構成がそのまま URL の構造になる |
app/layout.tsx | 全ページ共通の外枠。<html> と <body> を含むルートレイアウト |
app/page.tsx | トップページ（/）の中身 |
app/globals.css | サイト全体に適用する CSS。layout.tsx から読み込まれる |
public/ | そのまま配信される静的ファイル置き場。/ファイル名 でアクセスできる |
next.config.ts | Next.js の設定ファイル。画像の許可ドメインやリダイレクトなどを書く |
package.json | 依存パッケージと npm スクリプトの定義 |
tsconfig.json | TypeScript の設定。import alias の paths もここに入る |
layout.tsx がすべてのページの外枠になる
app/layout.tsx はルートレイアウトと呼ばれ、App Router では必須のファイルです。ここだけが <html> と <body> を出力し、各ページの内容は children として受け取って中に描画します。
import type { Metadata } from 'next';
import './globals.css';
// ページのタイトルや説明文を設定する
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}
生成直後は lang="en" になっているので、日本語のサイトを作るなら lang="ja" に書き換えておきます。metadata の title と description も、そのままでは「Create Next App」のままなので早めに変更しておくとよいでしょう。ヘッダーやフッターを全ページ共通で出したい場合も、このファイルに書きます。
page.tsx を書き換えると画面が変わる
app/page.tsx がトップページの中身です。生成直後は Next.js のロゴやリンクが並んだサンプルになっているので、まずはここを丸ごと書き換えて、画面が変わることを確かめるのが最初の一歩になります。
export default function Home() {
return (
<main>
<h1>はじめての Next.js</h1>
<p>app/page.tsx を編集すると、この画面が変わります。</p>
</main>
);
}
ページを増やすときは app の下にフォルダを作り、その中に page.tsx を置きます。app/about/page.tsx なら /about で表示される、という具合にフォルダ構成がそのまま URL になります。
package.json の scripts と開発サーバーの起動
生成された package.json には、開発と本番運用に必要なコマンドがあらかじめ登録されています。next コマンドを直接打つのではなく、これらの npm スクリプト経由で実行するのが基本です。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
dev は開発サーバーの起動、build は本番用のビルド、start はビルド結果を配信するサーバーの起動、lint は ESLint の実行です。ふだんの開発で使うのはほぼ dev だけで、残りはデプロイやチェックのときに登場します。
なお、dev と build に --turbopack が付いた形で生成されるバージョンもあります。ビルドの仕組みは更新が続いている領域なので、生成された package.json の中身を実際に確認してください。lint スクリプトについても、バージョンによっては ESLint を直接呼ぶ形になっていることがあります。
プロジェクトが作られたら、そのディレクトリに移動して開発サーバーを起動します。
cd my-app npm run dev
起動するとターミナルに URL が表示されるので、ブラウザで http://localhost:3000 を開きます。この状態でファイルを保存すると、リロードしなくても画面が自動で更新されます。開発サーバーを止めるときは、ターミナルで Ctrl + C を押します。
3000 番が使われているときはポートを変える
別のアプリがすでに 3000 番を使っていると、Next.js は自動で空いているポート（3001 など）を探して起動することがあります。使うポートを自分で決めたい場合は -p オプションを付けます。npm スクリプト経由で渡すときは、-- を挟んでから書きます。
# ポート 4000 で開発サーバーを起動する npm run dev -- -p 4000
毎回指定するのが面倒なら、package.json の dev スクリプト自体を "next dev -p 4000" に書き換えてしまう方法もあります。複数のプロジェクトを同時に動かすときは、こうしておくとポートの衝突を気にせずに済みます。
既存ディレクトリに作る場合とテンプレートから作る場合
すでにあるフォルダの中に作る
Git のリポジトリをクローンした直後など、すでに用意されたフォルダの中に直接プロジェクトを作りたいことがあります。その場合はプロジェクト名の代わりに . を指定します。
cd existing-folder # カレントディレクトリに直接作成する npx create-next-app@latest .
この場合、フォルダ名がそのままプロジェクト名として使われます。ただし中に package.json のような競合するファイルがあると、作成が中断されることがあります。README.md や .git のように問題にならないファイルは残ります。作業前にコミットしておくと、意図しない上書きがあってもすぐ戻せます。
–example で公式サンプルを雛形にする
Next.js のリポジトリには、機能ごとのサンプルプロジェクトが多数公開されています。--example にその名前を渡すと、標準の雛形ではなくそのサンプルをもとにプロジェクトが作られます。
# 公式サンプル（examples ディレクトリの名前）を指定する npx create-next-app@latest my-app --example with-tailwindcss # 任意の GitHub リポジトリの URL を指定することもできる npx create-next-app@latest my-app --example "https://github.com/ユーザー名/リポジトリ名"
--example を使うと、TypeScript や Tailwind CSS などの質問は表示されません。構成はサンプル側で決まっているためです。どんなサンプルがあるかは Next.js リポジトリの examples ディレクトリで確認できます。特定のライブラリと組み合わせた実装を手早く見たいときに便利ですが、サンプルによっては依存パッケージが古いこともあるので、作成後に内容を確認してから使ってください。
作成がうまくいかないときに確認すること
Node.js のバージョンが古い
最も多いのが Node.js のバージョン不足です。必要なバージョンを満たしていないと、実行時にその旨のメッセージが表示されて止まります。Next.js は比較的短い周期でサポート対象を引き上げるため、しばらく更新していない環境では引っかかりやすいところです。nvm などのバージョン管理ツールを使っているなら、新しいバージョンに切り替えてから実行し直してください。
プロジェクト名が npm の命名ルールに合っていない
プロジェクト名に大文字やスペース、使えない記号が含まれていると、名前が不正である旨のメッセージが出て先に進めません。package.json の name として使われるため、npm のパッケージ名のルールが適用されるからです。小文字・数字・ハイフンだけで構成すれば確実です。
古いキャッシュが使われている
「ドキュメントに書いてある質問が出てこない」「オプションが認識されない」というときは、npx が以前ダウンロードした古い create-next-app を使っている可能性があります。@latest を付けて実行すれば最新版が取得されます。それでも解決しない場合は、実行時に表示されるバージョン番号を確認して、参照しているドキュメントと合っているかを見比べてください。
まとめ
npx create-next-app@latest を実行すると、プロジェクト名・TypeScript・ESLint・Tailwind CSS・src ディレクトリ・App Router・import alias といった項目が対話式で聞かれます。TypeScript と App Router は Yes、import alias は既定の @/* のままにしておけば、公式ドキュメントの説明とそのまま噛み合う構成になります。Tailwind CSS と src ディレクトリは好みで選んで問題ありません。
対話を省略したいときは --ts や --tailwind、--app などのオプションで答えを渡すか、--yes ですべて既定値にします。生成後は app/layout.tsx が全ページ共通の外枠、app/page.tsx がトップページの中身、public/ が静的ファイル置き場、という対応を押さえておけば迷いません。npm run dev で開発サーバーを起動して http://localhost:3000 を開き、app/page.tsx を書き換えるところから始めてみてください。なお質問項目や生成されるファイルはバージョンによって変わるため、細かい違いが気になるときは --help と公式ドキュメントで確認するのが確実です。