Next.jsは、Reactベースのフルスタックフレームワークで、モダンなWebアプリケーション開発において非常に人気があります。
この記事では、Next.jsを始めるための環境構築から、実際にプロジェクトを作成して起動するまでの手順を詳しく解説します。
Contents
Next.jsとは?
Next.jsは、React.jsをベースとしたフレームワークで、以下のような特徴があります。
- サーバーサイドレンダリング(SSR) – SEOに優れ、初回読み込みが高速
- 静的サイト生成(SSG) – ビルド時にHTMLを生成、CDNでの配信に最適
- ファイルベースルーティング – ファイル構造がそのままルートになる直感的な設計
- API Routes – フロントエンドとバックエンドを一つのプロジェクトで管理
- 自動コード分割 – 必要な部分のみ読み込み、パフォーマンス最適化
- TypeScript サポート – 標準でTypeScriptをサポート
必要な環境構築
Next.jsを始める前に、以下の環境が必要です。
Node.jsのインストール
Next.jsを動かすには、Node.js(バージョン18.17以上推奨)が必要です。
Windowsの場合:
- Node.js公式サイトから最新のLTS版をダウンロード
- インストーラーを実行してデフォルト設定でインストール
macOSの場合:
方法1:Homebrewを使用する場合
brew install node
方法2:公式サイトからダウンロードしても可
公式サイトのダウンロードページからインストーラーをダウンロード
Linuxの場合:
# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
# CentOS/RHEL
curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo yum install -y nodejs
インストール確認
ターミナル(コマンドプロンプト)で以下のコマンドを実行して、正しくインストールされているか確認しましょう。
node --version
npm --version
Node.jsのバージョンが18.17以上、npmのバージョンが表示されればOKです。
Next.jsプロジェクトの作成
方法1:create-next-appを使用したプロジェクト作成
Next.jsでは、create-next-app
という公式ツールを使用して簡単にプロジェクトを作成できます。
npx create-next-app@latest my-next-app
「my-next-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 to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
推奨設定:
- TypeScript: Yes(型安全性のため)
- ESLint: Yes(コード品質管理のため)
- Tailwind CSS: お好みで(CSSフレームワーク)
- src/ directory: Yes(プロジェクト構造の整理のため)
- App Router: Yes(Next.js 13以降の新機能)
- Import alias: Yes(インポートパスの簡略化)
方法2:手動でのプロジェクト作成(参考)
より細かい制御が必要な場合は、手動でプロジェクトを作成することも可能です
mkdir my-next-app
cd my-next-app
npm init -y
npm install next@latest react@latest react-dom@latest
package.json
のscriptsセクションに以下を追加
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
プロジェクト構造の理解
作成されたプロジェクトの構造を見てみましょう。
my-next-app/
├── src/ # ソースコード
│ └── app/ # App Router(Next.js 13+)
│ ├── favicon.ico # ファビコン
│ ├── globals.css # グローバルスタイル
│ ├── layout.tsx # ルートレイアウト
│ └── page.tsx # ホームページ
├── public/ # 静的ファイル
├── next.config.js # Next.js設定ファイル
├── package.json # 依存関係とスクリプト
├── tailwind.config.ts # Tailwind CSS設定
└── tsconfig.json # TypeScript設定
重要なファイルの説明
src/app/layout.tsx – アプリケーション全体のレイアウトを定義
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
src/app/page.tsx – ホームページ(”/”ルート)のコンポーネント
export default function Home() {
return (
<main>
<h1>Welcome to Next.js!</h1>
</main>
)
}
開発サーバーの起動
プロジェクトが作成できたら、開発サーバーを起動してみましょう。
cd my-next-app
npm run dev
または
yarn dev
# もしくは
pnpm dev
成功すると、ターミナルに以下のような表示が現れます
▲ Next.js 14.0.0
- Local: http://localhost:3000
- Network: http://192.168.1.100:3000
✓ Ready in 2.3s
ブラウザで http://localhost:3000
にアクセスすると、Next.jsのウェルカムページが表示されます。
最初のページを編集してみる
src/app/page.tsx
ファイルを編集して、変更がリアルタイムで反映されることを確認しましょう
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<h1 className="text-4xl font-bold mb-4">
私のNext.jsアプリケーション
</h1>
<p className="text-xl text-gray-600">
Next.jsの世界へようこそ!
</p>
</main>
)
}
ファイルを保存すると、ブラウザが自動的に更新され、変更が反映されます。これがNext.jsの「Hot Reload」機能です。
新しいページを追加する
Next.jsでは、app
ディレクトリにフォルダとファイルを作成することで、新しいルートを簡単に追加できます。
例えば、/about
ページを作成してみましょう
src/app/about/
フォルダを作成src/app/about/page.tsx
ファイルを作成
export default function About() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<h1 className="text-4xl font-bold mb-4">私たちについて</h1>
<p className="text-xl text-gray-600">
これはAboutページです。
</p>
</main>
)
}
http://localhost:3000/about
にアクセスすると、新しく作成したページが表示されます。
よく使われるコマンド
開発を進める上で知っておきたいコマンド
# 開発サーバー起動
npm run dev
# 本番用ビルド
npm run build
# 本番サーバー起動(ビルド後)
npm run start
# ビルドと本番サーバー起動を連続実行します
npm run build && npm run start
# コードの静的解析
npm run lint
# TypeScriptの型チェック
npx tsc --noEmit
# 依存関係の追加
npm install パッケージ名
npm run devコマンド
- 効果: 開発用サーバーとして起動します
- 詳細: Hot Reload機能により、ファイルを変更すると自動的にブラウザが更新されます
- ポート: デフォルトで localhost:3000 で起動
- 使用場面: 開発中は常に実行しているコマンド
npm run buildコマンド
- 効果: 本番環境用に最適化されたアプリケーションをビルドします
- 詳細:
- TypeScript→JavaScriptファイルにトランスパイル・圧縮
- CSSファイルの最適化
- 静的ファイルの生成(SSGの場合)
- コード分割による最適化
- 生成物:
.next
フォルダに最適化されたファイルが作成されます - 使用場面: デプロイ前の準備、本番環境での動作確認
# パフォーマンス分析のコマンド
# どのライブラリがファイルサイズに影響しているかを可視化
npm run build -- --analyze
npm run start
- 効果: ビルド済みのアプリケーションを本番モードで起動します
- 詳細:
npm run build
実行後に使用可能 - パフォーマンス: 開発モードより高速で動作
- 使用場面: 本番環境での実行、デプロイ後の動作確認
npm run lint
- 効果: ESLintによるコードの静的解析を実行します
- 検出内容:
- 構文エラー
- コーディング規約違反
- 潜在的なバグ
- 未使用変数の検出
- 自動修正:
npm run lint -- --fix
で修正可能なエラーを自動修正 - 使用場面: コミット前、CI/CDパイプラインでの品質チェック
npx tsc –noEmit
- 効果: TypeScriptの型チェックのみを実行します
- 詳細:
- JavaScriptファイルは生成せず、型エラーのみをチェック
- Next.jsの標準ビルドプロセスとは独立して実行
- 検出内容: 型の不整合、型安全性の問題
- 使用場面: 型エラーの早期発見、CI/CDでの型チェック
npm install [パッケージ名]
# 基本的なインストール
npm install lodash
# 開発依存関係としてインストール
npm install --save-dev @types/lodash
# 特定のバージョンをインストール
npm install react@18.2.0
# グローバルインストール
npm install -g create-next-app
#不要なパッケージを削除します
#詳細: package.jsonとnode_modulesから完全に削除
npm uninstall lodash
#すべてのパッケージを最新の互換バージョンに更新します
npm update
効果: 新しいパッケージをプロジェクトに追加します
詳細:
package.json
の依存関係に自動追加node_modules
フォルダにパッケージがダウンロードpackage-lock.json
でバージョンを固定
トラブルシューティング:よくある問題と解決方法
問題1: ポート3000が既に使用されている
エラーメッセージ例:
Error: listen EADDRINUSE: address already in use :::3000
対処:
# 別のポートで起動
npm run dev -- -p 3001
発生する状況:
- 他のアプリケーション(React、Vue、Express等)が既にポート3000で動いている
- 前回のNext.jsプロセスが正常に終了せずにポートを占有している
- 複数のNext.jsプロジェクトを同時に起動しようとしている
問題2: Node.jsのバージョンが古い
エラーメッセージ例:
You are using Node.js 16.14.0. For Next.js, Node.js version >= 18.17.0 is required.
対処:
# Node.jsのバージョン確認
node --version
# Node.jsをアップデート(nやnvmを使用)
n latest
# または
nvm install --lts
発生する状況:
- システムに古いNode.jsがインストールされている(v16以下など)
- 新しいNext.jsの機能を使おうとしている
- プロジェクト作成時にバージョンエラーが発生
問題3: キャッシュの問題
症状例:
- 削除したコンポーネントがまだ表示される
- 新しいライブラリをインストールしたのに「モジュールが見つからない」エラー
- ビルドは通るのにランタイムエラーが発生する
対処:
# Next.jsのキャッシュをクリア
# Mac/Linux
rm -rf .next
npm run dev
# Windows (PowerShell)
Remove-Item -Recurse -Force .next
npm run dev
発生する状況:
- 依存関係を変更した後に古いコードが動作している
- ビルドエラーが解決されない
- 新しく追加したパッケージが認識されない
- 開発サーバーで変更が反映されない
まとめ
この記事では、Next.jsの環境構築からプロジェクト作成、起動までの基本的な流れを説明しました。重要なポイントをまとめると
- Node.js 18.17以上が必要
- create-next-appで簡単にプロジェクト作成
- App Routerを使用した現代的な構造
- ファイルベースルーティングで直感的なページ作成
- Hot Reloadによる効率的な開発体験
Next.jsは学習コストは少し高めですが、一度慣れてしまえば非常に生産性の高いフレームワークです。
まずはシンプルなページから始めて、徐々に機能を追加していくことをお勧めします。
次のステップとしては、以下のようなトピックに進むと良いでしょう。
- コンポーネントの作成と再利用
- CSSスタイリング(Tailwind CSS、CSS Modules)
- API Routesでのバックエンド機能
- データフェッチング(SSR、SSG)
- デプロイ方法(Vercel、Netlify等)