create-next-appによるNext.jsプロジェクト作成
この節で学ぶこと
この節では、Next.js の初回セットアップを、手を動かしながら最後まで通すことを目的にします。
今回のゴールは、create-next-app で新規プロジェクトを作成し、開発サーバを起動し、app/page.tsx を少し編集して、ブラウザで変更を確認できる状態まで到達することです。
Next.js の公式では、Quick start として「アプリを作成 → 開発サーバ起動 → http://localhost:3000 を開く → app/page.tsx を編集する」という流れが示されています。
この実践で大切なのは、コマンドを暗記することではありません。自分の手で “作る・起動する・変える・確かめる” を一度つなげることです。
ここが通ると、以後の package.json、TypeScript、ESLint、Path Alias の話が、ただの用語ではなく「自分が今使っている土台」に変わります。
Next.js は新規作成時に TypeScript を組み込みで扱え、プロジェクト構造や依存関係も自動で整えます。
事前に必要なもの
Node.js
Next.js の現在の公式ドキュメントでは、開発環境の要件として 最低 Node.js 20.9 が必要です。対応 OS は macOS、Windows（WSL を含む）、Linux です。
ここはかなり大事です。
プロジェクト作成コマンドが動かないとき、コード以前に Node.js のバージョンが原因になっていることがあります。初心者のうちは、「Next.js を始めるには Node.js 20.9 以上が前提」とまず覚えておけば十分です。
パッケージマネージャー
Next.js の公式は pnpm、npm、yarn、bun の複数パターンを案内しています。つまり、どれか1つが絶対ではありません。今回は実践の流れを分かりやすくするため、pnpm と npm の2通り を中心に扱います。
最初の学習では、1つに決めて進める方が楽です。
教材としては pnpm で統一して進めてもよいですし、すでに npm に慣れているならそのままでも構いません。重要なのは、どの道具で scripts を呼ぶかであって、Next.js の本質が変わるわけではないことです。
まずは最短で作る
npm で作成する
npx create-next-app@latest my-first-next-app --yes
cd my-first-next-app
npm run dev
「新しい Next.js アプリを作る」「そのフォルダに入る」「開発サーバを起動する」。この3段階がつながっていれば大丈夫です。
-yesを付けたときに何が選ばれるのか
推奨デフォルトの中身
Next.js の公式では、推奨デフォルトとして TypeScript、ESLint、Tailwind CSS、App Router、AGENTS.md が示されています。また、カスタマイズ時には src/ ディレクトリを使うか、import alias をどうするか、React Compiler を使うか、どの linter を使うかなども選べます。
ここで見てほしいのは、create-next-app が単なる「空のひな形生成」ではないことです。
実際には、プロジェクトの初期方針をかなりまとめて決めています。だからこそ、最初の一歩として強いわけです。あれこれ手で設定する前に、まずは公式が想定する標準ルートを体験する。これが初学者にはとても有効です。
import alias も最初から選べる
create-next-app の CLI には --import-alias <alias-to-configure> があり、デフォルトは @/* です。対話形式でも「import alias をカスタマイズするか」が出ます。
つまり、以前に学んだ Path Alias も、あとから無理に足すだけではなく、初回セットアップ時点で方針として決められる ということです。ここが見えると、設定同士がばらばらではなく、最初からつながっていると理解しやすくなります。
作成後にできあがるもの
プロジェクトの大まかな構造
Next.js の Project Structure ドキュメントでは、トップレベルフォルダとして app、pages、public、src が紹介され、トップレベルファイルとして next.config.js、package.json、.env、.env.local などが整理されています。app は App Router、public は静的アセット、src は任意のアプリケーションソースフォルダです。
最初に全部を理解する必要はありません。
ただし、少なくとも次は見ておく価値があります。
my-first-next-app/
├─ app/ または src/app/
├─ public/
├─ package.json
├─ tsconfig.json
├─ eslint.config.mjs
└─ next-env.d.ts
この一覧を見て、「あ、ページの入口は app 系で、公開ファイルは public で、設定はルートに集まるのだな」と分かれば十分です。Next.js は新規プロジェクト時に TypeScript の必要パッケージと推奨設定も自動で整えます。
TypeScript は最初から組み込まれる
Next.js 公式では、Next.js comes with built-in TypeScript と明記されています。新規プロジェクトを create-next-app で作ると、必要な TypeScript パッケージと適切な設定が自動で入ります。
これは初心者にとってかなり大きな利点です。
昔のように「まず JavaScript で作って、後から TypeScript を足す」という遠回りをしなくても、最初から安全な土台に乗れます。つまり、今回の実践は単にアプリを作るだけではなく、今どきの Next.js 標準環境に触れることでもあります。
開発サーバを起動する
pnpm dev または npm run dev
Next.js の公式では、Quick start の3手順の最後に開発サーバ起動があり、その後 http://localhost:3000 を開くよう案内しています。Run the development server の節でも、npm run dev で開発サーバを起動し、http://localhost:3000 を見る流れが示されています。
pnpm dev
または
npm run dev
この時点で意識したいのは、「このコマンドで何か魔法が起きている」のではなく、プロジェクトに定義された dev script を呼び出している ということです。ここが分かると、package.json の scripts の意味がぐっと実感に変わります。
ブラウザで確認する
開発サーバが立ち上がったら、ブラウザで次を開きます。
http://localhost:3000
この URL が意味しているのは、「今使っている自分のパソコンの 3000 番ポートで動いているアプリ」です。
ここで画面が表示された瞬間、ターミナルで起動したものとブラウザで見えるものが1本につながります。初心者にとって、この感覚はかなり大切です。自分でローカル Web アプリを起動できた という手応えが生まれるからです。
最初の編集をしてみる
app/page.tsx を触る
Next.js の公式では、開発サーバ起動後に app/page.tsx を編集し、保存してブラウザの表示変化を確認するよう案内しています。
たとえば、次のように書き換えてみます。
export default function Page() {
return (
<main>
<h1>はじめてのNext.jsセットアップ</h1>
<p>この文字が見えたら、初回セットアップは成功です。</p>
</main>
)
}
このコード自体はとても短いです。
でも意味は大きいです。ここで起きているのは、「作成したアプリの入口を自分で書き換え、その結果がブラウザへ反映される」という一連の体験です。この一回があるだけで、Next.js が急に自分ごとになります。
保存して画面が変わるかを見る
公式の手順では、app/page.tsx を編集して保存すると、ブラウザに更新結果が表示されます。
ここで確認したいのは、単に起動できたかではありません。
自分の変更が画面へ反映されたか です。これが通れば、セットアップはかなり成功です。なぜなら、プロジェクト作成、依存関係インストール、サーバ起動、ページ編集、ブラウザ反映まで、開発の基本ループがすでにつながっているからです。
ESLint はどうなっているか
いまの Next.js では next lint は使わない
Next.js 16 以降、公式には next lint が削除された と書かれています。あわせて、Next config の eslint オプションも不要になったと説明されています。
つまり、初回セットアップ後に lint を確認したいときは、古い記事のように next lint ではなく、ESLint CLI を使う方向で考える必要があります。ここを最初に知っておくと、「記事のとおりにやったのに動かない」という混乱を減らせます。
eslint.config.mjs があるかを見る
Next.js の現行構成では、ESLint の flat config を使う前提が自然です。初回セットアップ後に eslint.config.mjs が存在していれば、ESLint 周りの土台がある程度整っていると考えやすいです。Next.js 公式の ESLint ページも eslint.config.mjs を前提に例を示しています。
ここでは細かいルールを全部読む必要はありません。
まずは「このプロジェクトには ESLint の設定ファイルがあり、将来のコード品質チェックの入口がすでに用意されている」と分かれば十分です。
TypeScript 設定も見てみる
tsconfig.json
Next.js の TypeScript ドキュメントでは、新規プロジェクト作成時に必要パッケージと proper settings が自動設定されると説明されています。既存プロジェクトでは .ts / .tsx に変更し、next dev や next build を実行すると tsconfig.json が追加される流れです。
このファイルを開いて、全部を理解しようとしなくて大丈夫です。
ただ、「TypeScript の振る舞いはここで調整される」という感覚を持っておくと、後で strict や paths を学ぶときに迷いにくくなります。今は存在を確認するだけでも意味があります。
next-env.d.ts
next-env.d.ts は、Next.js の型情報をプロジェクトで使えるようにするためのファイルです。TypeScript 関連の土台の一部として自動生成されます。
初心者の段階では、中身を細かく編集するより、「これは Next.js と TypeScript をつなぐ自動生成寄りのファイル」 と理解しておく方が安全です。ここを無理に触らず、役割だけ押さえるのがよいです。
初回セットアップで見るべきポイント
ここまでできたら成功
今回の実践では、次の5つがそろえばかなり順調です。
- Node.js 20.9 以上の環境がある。
create-next-appで新規プロジェクトを作成できた。devサーバを起動できた。http://localhost:3000で初期画面を確認できた。app/page.tsxを編集し、ブラウザで変更を確認できた。
この5つがつながると、かなり強いです。
なぜなら、今後どんなライブラリを入れるにしても、どんなページを増やすにしても、結局はこの基本ループの上に積み上がるからです。ここが整っていないと、先に進んでも不安定です。逆にここが通っていれば、かなり安心して学べます。
よくあるつまずき
コマンドを打ったのに動かない
まず確認したいのは、Node.js のバージョンです。Next.js の現行要件は最低 20.9 です。次に、プロジェクトのフォルダにちゃんと入っているか、依存関係のインストールが途中で失敗していないかを見るのが基本です。
初心者のうちは「自分の書いたコードが悪い」と思いがちですが、初回セットアップ段階では、環境や実行場所の問題 の方が多いです。ここを冷静に切り分けるだけで、かなり前に進みやすくなります。
古い記事と公式が違って見える
これはよくあります。
特に lint 周りは、Next.js 16 以降で next lint が削除されているため、古い記事と現行の公式でズレが出やすいです。そういうときは、まず公式ドキュメントの現行版を基準にするのが安全です。
練習問題
問1
Next.js の現行公式ドキュメントにおける最低 Node.js バージョンとして正しいものはどれですか。
A. 16.0
B. 18.0
C. 20.9
D. 22.0 固定
答え
C
解説
Next.js の Installation ページでは、System requirements として Minimum Node.js version: 20.9 と明記されています。
問2
create-next-app --yes で推奨デフォルトとして案内されているものとして正しいものはどれですか。
A. TypeScript、ESLint、Tailwind CSS、App Router、AGENTS.md
B. Vue、Nuxt、Sass、Laravel
C. Angular、RxJS、Jest のみ
D. Docker、Kubernetes、Terraform
答え
A
解説
Next.js の公式では、推奨デフォルトとして TypeScript、ESLint、Tailwind CSS、App Router、AGENTS.md が示されています。
問3
Next.js の Quick start で、開発サーバ起動後に確認する URL として正しいものはどれですか。
A. http://localhost:3000
B. http://example.com
C. http://localhost:8080
D. https://nextjs.org
答え
A
解説
Quick start と Run the development server の両方で、http://localhost:3000 を開くよう案内されています。
問4
初回セットアップ後に、ブラウザで変更が反映されるか確認するために公式が編集対象として案内しているファイルはどれですか。
A. package-lock.json
B. app/page.tsx
C. .gitignore
D. README.md
答え
B
解説
Next.js の公式手順では、app/page.tsx を編集して保存し、ブラウザで結果を見る流れが示されています。
問5
Next.js 16 以降について正しい説明はどれですか。
A. next lint が新しく追加された
B. next lint が削除され、ESLint CLI を使う方向になった
C. ESLint 自体が使えなくなった
D. TypeScript が削除された
答え
B
解説
Next.js の ESLint 設定ページでは、Starting with Next.js 16, next lint is removed と明記されています。
まとめ
初回セットアップの本質は、コマンドを打つことではありません。
自分の環境で Next.js プロジェクトを作り、起動し、画面を変え、その結果を確認できるようになることです。
Next.js の公式ルートでは、create-next-app により TypeScript や ESLint を含む推奨構成をまとめて整え、http://localhost:3000 で動作確認し、app/page.tsx を編集して最初の変更を確かめる流れが示されています。
参考文献
- Next.js Documentation, Getting Started: Installation.
- Next.js Documentation, CLI: create-next-app.
- Next.js Documentation, Configuration: TypeScript.
- Next.js Documentation, Configuration: ESLint.
- Next.js Documentation, Project Structure and Organization.