Next.jsの環境構築：Pages Routerでインストールから起動まで
create-next-appでTypeScriptとPages Routerの学習環境を作成。Node.jsの要件、作成時の選択、ページ編集、開発サーバーと本番ビルドの手順を解説します。
Next.jsのプロジェクトは、公式のcreate-next-appを使うと、React・TypeScript・開発用コマンドなどをまとめて準備できます。この記事では、既存の入門記事と同じPages Routerを選び、TypeScriptでページを表示するところまで進めます。
App Routerは新規プロジェクトの標準的な選択肢ですが、src/app/page.tsxを使う構成と、この記事のsrc/pages/index.tsxを使う構成では説明が異なります。途中で両方を混ぜず、作成時に選んだルーターを確認してください。
開発環境を準備してページを表示する
Node.jsとnpmを確認する
2026年9月の確認時点で、最新のNext.js公式インストールガイドはNode.js 20.9以上を最低要件としています。最低要件を満たすだけでなく、利用時点でサポートされているNode.jsのLTSを選びます。古い記事にあるNode.js 14.6という要件を、現在の最新版の導入条件には使わないでください。
ターミナルで次を実行します。先頭に$を付ける必要はありません。
node --version
npm --versionコマンドが見つからなければ、Node.js公式ダウンロードから環境に合う方法で導入し、ターミナルを開き直します。対応OSはmacOS、Windows、Linuxです。既存プロジェクトでは、先にpackage.jsonや開発環境の指定も確認してください。
TypeScriptのプロジェクトを作成する
プロジェクトを保存したい親ディレクトリで、次のコマンドを実行します。my-next-appという名前の新しいディレクトリが作成されます。
npx create-next-app@latest my-next-app --ts --use-npm
cd my-next-app
npm run dev設定を選択する画面が出たら、推奨設定を一括選択せず、カスタマイズを選びます。この記事に合わせる主要な選択は次のとおりです。質問の順番や表記はCLIのバージョンで変わることがあります。
- TypeScriptは有効にする。
src/ディレクトリは使用する。- App Routerは使用しない。これでPages Routerを選ぶ。
- スタイルの基礎を学ぶ段階ではTailwind CSSを使用しなくてもよい。
- リンターはESLintなどを選択し、生成された設定を使う。
npm run devは開発サーバーを起動するコマンドです。ターミナルに表示されたURLへアクセスします。通常はhttp://localhost:3000ですが、使用中のポートなどによって変わります。停止する場合はターミナルでCtrl+Cを押します。
@latestは実行時点の最新版を取得する指定です。Next.js 13の環境を再現する指定ではありません。導入後はロックファイルを保存して、同じ依存関係を復元できるようにします。
最初のページを編集する
Pages Routerを選んだことを確認して、src/pages/index.tsxを次の内容に置き換えます。既存のサンプルが使っていたCSSのimportは、この例には不要です。
import Head from 'next/head';
type Feature = {
id: string;
label: string;
};
const features: Feature[] = [
{ id: 'typescript', label: 'TypeScriptで型を確認する' },
{ id: 'routing', label: 'ファイルからページを作る' },
];
export default function HomePage() {
return (
<>
<Head>
<title>はじめてのNext.js</title>
<meta name="description" content="Next.jsの学習用ページです。" />
</Head>
<main>
<h1>Next.jsの開発を始めよう</h1>
<ul>
{features.map((feature) => (
<li key={feature.id}>{feature.label}</li>
))}
</ul>
</main>
</>
);
}保存すると開発サーバーが変更を反映します。src/app/page.tsxしか存在しない場合はApp Routerのプロジェクトです。その場合、この例をそのままApp Routerへ追加せず、ルーターの選択から確認してください。
TypeScriptは、たとえばlabelへ数値を入れる間違いを編集時に検出できます。ただし、外部APIの実データを自動で検証するわけではなく、すべての実行時エラーを防ぐものでもありません。
JavaScriptやYarnを使いたい場合
JavaScriptのプロジェクトは--jsを指定できます。以下は別の新規プロジェクトを作るコマンドなので、先ほど作ったプロジェクト内では実行しません。
npx create-next-app@latest my-js-app --js --use-npmTypeScriptでは画面のファイルに.tsx、JavaScriptでは.jsxなどを使います。JavaScriptを選ぶ場合、前のコードのtype Featureや: Feature[]は書けません。
Yarnをすでに利用している場合は、公式CLIをyarn create next-app my-next-app --typescriptでも呼び出せます。ひとつのプロジェクトでnpmとYarnのロックファイルを混在させず、チームで使用するパッケージマネージャーを統一します。
本番向けのビルドを確認する
開発サーバーを停止してから、次を実行します。ここではNode.jsサーバーで公開する通常の構成を前提にしています。
npm run build
npm run startビルドは型エラーやページ生成の問題を確認する機会にもなります。npm run startは作成済みの本番ビルドを起動するため、先にビルドが成功している必要があります。
output: 'export'で静的HTMLを出力する構成では、公開するのはout/の内容です。その場合はnext startでの起動とは手順が異なります。詳しくはSSGの設定と注意点を参照してください。
よくあるつまずき
nodeやnpmが見つからない場合は、インストールとターミナルのPATHを確認する。- ページが変わらない場合は、開いているURLと起動したプロジェクトのディレクトリを確認する。
src/pages/index.tsxが見つからない場合は、App Routerやsrc/を使用しない設定で生成していないか確認する。- 既存プロジェクトを引き継いだ場合は、新規作成コマンドを再実行せず、付属の説明とロックファイルに従って依存関係を復元する。
関連記事と公式資料
構成を理解するにはディレクトリ構成と役割、画面の部品を作るにはコンポーネントの基礎へ進んでください。
作成した環境を再現する
使用バージョンを記録する
npm ls next react typescriptで導入したバージョンを確認し、package.jsonとロックファイルを保存します。記事の検証環境と異なる場合は、診断や設定項目の違いを公式資料で確認してください。
開発表示と本番ビルドを確かめる
開発サーバーでページが表示されても、本番ビルドが成功するとは限りません。必要な環境変数やデータ取得先を用意し、ビルドの終了コードと、選んだ配信方式での表示を確認します。