こんにちは、かつコーチです。
前回はNext.jsとは何か、Reactとの関係を解説しました。
Next.jsが「Reactにルーティングやサーバーサイドレンダリングを足したフレームワーク」だとわかったところで、今回は実際に手を動かして、自分のパソコンにNext.jsの開発環境を作っていきましょう。
ReactシリーズではViteというツールを使いましたが、Next.jsには専用のセットアップコマンドが用意されています。
create-next-appとは？
プロジェクトの雛形を自動生成してくれるコマンド
create-next-appとは、Next.jsの公式が提供している、プロジェクトの雛形（テンプレート）を自動で作ってくれるコマンドです。
TypeScriptの設定ファイルや、フォルダ構成、必要なパッケージ（ライブラリ）のインストールまで、一度のコマンドでまとめて済ませてくれます。
Reactシリーズで使ったnpm create viteと役割はよく似ていますが、Next.js専用の設定（ルーティングの仕組みや画像最適化の設定など）まで含めて用意してくれる点が特徴です。
なぜこのコマンドを使うべきなのか
Next.jsのプロジェクトは、フォルダ構成や設定ファイルに一定のルールがあります。
これを手作業でゼロから作ろうとすると、設定ミスが起きやすく、初心者にとってはハードルが高くなります。
create-next-appを使えば、公式が推奨する正しい構成でプロジェクトが作られるため、余計なつまずきを避けて、すぐにコードを書き始められます。
環境構築の手順
手順1：Node.jsのバージョンを確認する
まず前提として、Node.js（ブラウザの外でJavaScriptを動かすための実行環境）がインストールされている必要があります。
ターミナルで以下のコマンドを実行し、バージョンを確認しましょう。
node -v
Next.jsの最新版を使う場合、Node.jsは18.18以降のバージョンが推奨されています。
古いバージョンのままだと、後述のコマンドがエラーになることがあるので注意してください。
手順2：create-next-appを実行する
プロジェクトを作りたいフォルダに移動し、以下のコマンドを実行します。
npx create-next-app@latest my-nextjs-app
npxを付けることで、パッケージを事前にインストールしなくても、最新版のコマンドをその場で実行できます。
my-nextjs-appの部分は、作成したいプロジェクト名に置き換えてください。
手順3：セットアップ時の質問に答える
コマンドを実行すると、ターミナル上でいくつか質問されます。
このシリーズでは、以下の設定で進めることを推奨します。
Would you like to use TypeScript? … Yes
Would you like to use ESLint? … Yes
Would you like to use Tailwind CSS? … Yes
Would you like your code inside a `src/` directory? … No
Would you like to use App Router? … Yes
Would you like to customize the import alias? … No
特に重要なのが「Would you like to use App Router?」の項目です。
必ずYesを選んでください。
Next.jsには以前「Pages Router」という仕組みもありましたが、2026年時点のNext.jsでは廃止されており、現在はApp Routerが唯一の標準です。
このシリーズでも、App Routerを前提に解説を進めていきます。
手順4：開発サーバーを起動する
セットアップが完了したら、作成されたフォルダに移動し、開発サーバーを起動します。
cd my-nextjs-app
npm run dev
ターミナルに以下のようなメッセージが表示されれば成功です。
▲ Next.js 15.x.x
- Local: http://localhost:3000
ブラウザでhttp://localhost:3000を開くと、Next.jsの初期画面が表示されます。
つまずきやすいポイント
ポートがすでに使われているエラー
ここで、私が実際に遭遇したエラーを1つ共有します。
Reactシリーズで作ったVite製のアプリをバックグラウンドで起動したまま、Next.jsのnpm run devを実行したところ、次のようなメッセージが表示されました。
Port 3000 is in use, trying 3001 instead.
❌ Before：エラーだと思って原因を探し続けてしまった
最初は「エラーが出た、環境構築に失敗したのでは」と焦ってしまい、node_modulesを消して再インストールするなど、見当違いの対処をしていました。
✅ After：メッセージの意味を正しく読む
落ち着いてメッセージを読み直すと、「3000番ポートが使用中なので、代わりに3001番で起動しました」という警告であり、エラーではないことがわかりました。
実際にはhttp://localhost:3001にアクセスすれば、問題なく画面が表示されていました。
Next.jsに限らず、ターミナルに表示される文言が「Error」なのか「in use」のような案内なのかを見分ける癖をつけておくと、無駄な調査時間を減らせます。
不要なポートを使い切りたくない場合は、他の開発サーバーをCtrl + Cで停止してから、改めてnpm run devを実行すれば3000番ポートに戻ります。
まとめ
この記事のポイント
create-next-appは、Next.jsのプロジェクトの雛形を自動で作ってくれる公式コマンド- セットアップ時は必ず「App Router」をYesにする（Pages Routerは廃止済み）
npm run devで開発サーバーを起動し、http://localhost:3000で画面を確認する- ポート使用中のメッセージは多くの場合エラーではなく、案内メッセージであることを覚えておく
次に読むべき記事
環境構築ができたところで、次回は作成されたプロジェクトのフォルダ構成、特に中心となるappディレクトリの中身を解説します。
→ 次の記事：プロジェクトのフォルダ構成を理解する（appディレクトリの中身）