Next.jsの特徴とファイルルーティング

2025-08-12

はじめに

Reactの基本を学んだあなたにとって、Next.jsは次のステップとして最適なフレームワークです。この記事では、React開発者がNext.jsを学ぶ際に最初に理解すべき「Next.jsの特徴」と「ファイルルーティング」について詳しく解説します。

Next.jsとは？

Next.jsは、Reactを基盤としたフルスタックWebアプリケーションフレームワークです。Vercelによって開発され、Reactアプリケーションに以下のような強力な機能を追加します：

サーバーサイドレンダリング（SSR）
静的サイト生成（SSG）
組み込みのルーティングシステム
APIルート機能
画像最適化
国際化（i18n）サポート
パフォーマンス最適化

ReactとNext.jsの主な違い

特徴	React	Next.js
ルーティング	ライブラリ必要	組み込み
レンダリング方法	クライアントのみ	SSG/SSR/ISR対応
設定	手動で行う必要	合理的なデフォルト設定
パフォーマンス最適化	自分で実装	組み込み機能
SEO	不利	有利

Next.jsの主な特徴

1. ページベースのルーティングシステム

Next.jsでは、ファイルシステムがそのままルーティングになります。pagesディレクトリ内のファイル構造がアプリのURL構造を決定します。

2. プリレンダリング

Next.jsはデフォルトでページをプリレンダリングします。これには2つの方法があります：

静的生成（SSG）：ビルド時にHTMLを生成
サーバーサイドレンダリング（SSR）：リクエストごとにHTMLを生成

3. ゼロコンフィグ

Next.jsは合理的なデフォルト設定がされており、多くの設定が自動化されています。webpackやBabelの複雑な設定なしにすぐに開発を始められます。

4. 組み込みのCSSとSassサポート

CSSモジュールをすぐに使えるほか、Sassのサポートも組み込まれています。

5. APIルート

サーバーレス関数を簡単に作成できるAPIルート機能を備えています。

ファイルベースのルーティング

Next.jsの最も特徴的な機能の1つが、ファイルシステムベースのルーティングです。Reactでは通常react-router-domなどのライブラリが必要ですが、Next.jsではファイルの配置場所でルーティングが自動的に決まります。

基本的なルーティング規則

pagesディレクトリ：すべてのページコンポーネントはpagesディレクトリに配置します
ファイル名がパスになる：pages/about.js → /about
index.jsはルートパス：pages/index.js → /

ルーティングの具体例

以下に一般的なファイル構造と対応するURLの例を示します：

pages/
├── index.js        → /
├── about.js        → /about
├── blog/
│   ├── index.js    → /blog
│   ├── [id].js     → /blog/1, /blog/abc など（動的ルート）
│   └── first-post.js → /blog/first-post
└── contact/
    └── index.js    → /contact

動的ルーティング

変化するパラメータを受け取る場合は、ファイル名を角括弧で囲みます：

pages/blog/[id].js → /blog/1、/blog/abcなど
pages/[username]/profile.js → /john/profile、/jane/profileなど

ネストされたルーティング

ディレクトリをネストすることで、URLもネストされます：

pages/
└── dashboard/
    ├── index.js       → /dashboard
    └── settings.js    → /dashboard/settings

Next.jsプロジェクトの基本構造

新しいNext.jsプロジェクトを作成すると、以下のような構造になります：

my-next-app/
├── node_modules/
├── pages/            # ページコンポーネント
├── public/           # 静的ファイル
├── styles/           # CSSファイル
├── .gitignore
├── package.json
└── README.md

実際に試してみよう

簡単なNext.jsアプリを作成して、ファイルルーティングを体験してみましょう。

まず、Next.jsプロジェクトを作成します：

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

pages/index.jsを編集：

export default function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <p>Next.jsのファイルルーティングを学んでいます</p>
    </div>
  );
}

pages/about.jsを作成：

export default function About() {
  return (
    <div>
      <h1>Aboutページ</h1>
      <p>このページは/aboutにあります</p>
    </div>
  );
}

これで、/と/aboutの2つのページができました。ブラウザで確認してみましょう。

なぜファイルルーティングが便利なのか？

直感的：URLとファイル構造が一致するので分かりやすい
設定不要：ルート設定ファイルが不要
保守性：ファイルを移動すれば自動的にルートも変更される
可視性：プロジェクト構造を見るだけでアプリのルーティングが把握できる

注意点

pagesディレクトリは特別なディレクトリで、名前を変更できません
_app.jsや_document.jsといった特別なファイル名があります
先頭にアンダースコアが付くファイル（_private.jsなど）はルートとして認識されません

まとめ

Next.jsのファイルベースルーティングは、React開発者にとって以下のようなメリットがあります：

ルーティングライブラリの学習や設定が不要
プロジェクト構造がそのままURL構造になるので直感的
動的ルーティングも簡単に実装可能
コードの整理整頓が自然と促される

Reactの知識があれば、Next.jsの学習曲線は非常に緩やかです。ファイルルーティングはNext.jsの多くの便利な機能の最初の1歩に過ぎません。次の記事では、ページコンポーネントの作成とリンクによるナビゲーションについて詳しく解説します。

Next.jsの公式ドキュメントも合わせて参照すると理解が深まります：
https://nextjs.org/docs