Next.js ねくすとじぇいえす
簡単に言うとこんな感じ！
Reactっていう「部品を作るための道具」を、もっと便利に使えるようにしたフレームワークだよ！ページの読み込みを速くしたり、SEOに強くしたり、APIまで作れちゃったりと、「Webサイト＆Webアプリを丸ごと作れる全部入りの土台」ってイメージ！
Next.jsとは
Next.jsは、Meta（旧Facebook）が開発したUIライブラリ React をベースに、Webアプリケーション開発に必要な機能を一通り揃えた フルスタック対応のWebフレームワークです。クラウドホスティング企業の Vercel が開発・メンテナンスしており、2016年の初リリース以降、急速に普及しています。
通常のReactだけでは「ページ遷移の仕組み」「SEO対策のためのサーバー処理」「APIの実装」などを自前で組み合わせる必要がありますが、Next.jsはこれらを最初から内包しています。「React単体がエンジンだとすれば、Next.jsはエンジン付きの完成した車」とイメージすると分かりやすいでしょう。
システム発注の現場では、「フロントエンドはNext.jsで」という指定がRFPや提案書によく登場します。Reactエコシステムの事実上の標準フレームワークとして定着しており、採用・発注・評価の判断軸として知っておく価値のある技術です。
Next.jsの主なレンダリング方式
Next.jsの最大の特徴は、どこでHTMLを生成するかを柔軟に選べることです。用途に合わせて複数の方式を使い分けられます。
| 方式 | 英語名 | 仕組み | 向いている用途 |
|---|---|---|---|
| SSR | Server-Side Rendering | リクエストのたびにサーバーでHTML生成 | 常に最新データを表示したいページ |
| SSG | Static Site Generation | ビルド時にHTMLを事前生成 | 更新頻度が低いLP・ブログ |
| ISR | Incremental Static Regeneration | 静的生成＋一定時間後に再生成 | ECサイトの商品ページなど |
| CSR | Client-Side Rendering | ブラウザ上でJSがHTMLを生成 | ログイン後のダッシュボードなど |
覚え方：「ど・び・い・ぶ」
- どのタイミングで — SSR（どリクエスト時）
- びルド時に — SSG（ビルド時）
- いったん静的→いずれ更新 — ISR
- ぶラウザで — CSR
App Router と Pages Router
Next.js 13以降、ページ構成の方式が2種類存在します。
| 方式 | 特徴 | 推奨度 |
|---|---|---|
| App Router（新） | app/ ディレクトリ。Server Components対応。より細かい制御が可能 | ✅ 現在の推奨 |
| Pages Router（旧） | pages/ ディレクトリ。歴史が長く情報が豊富 | ⚠ 既存プロジェクトで多い |
提案書や見積書に「App Router移行対応」と書かれていたら、旧方式から新方式への切り替え作業を指しています。
歴史と背景
- 2016年10月 — Vercel（当時 Zeit）がNext.js 1.0をオープンソースとして公開。Reactの「SSRがやりにくい」問題を解決するために生まれた
- 2018年 — 動的ルーティング対応など機能が充実し、本格的なプロダクション採用が増加
- 2020年 — Next.js 10でISR（Incremental Static Regeneration）を導入。静的サイトの「鮮度」問題を解決
- 2022年10月 — Next.js 13でApp Router（beta）とReact Server Componentsの採用を発表。フレームワークの設計思想が大きく転換
- 2023年〜現在 — App RouterがStableに。世界的なフロントエンドフレームワークの主流の一つとなり、日本でも多くの企業が採用
他フレームワークとの比較
Next.jsと比較されることが多いフレームワーク・ライブラリを整理します。
| 名前 | ベース | 主な特徴 | 選ぶ理由 |
|---|---|---|---|
| Next.js | React | SSR/SSG/ISR/CSR全対応・フルスタック | バランスが良く採用実績が最大 |
| Nuxt.js | Vue.js | Next.jsのVue版 | Vue.jsを使いたいチーム向け |
| Remix | React | サーバー重視・Web標準準拠 | パフォーマンスを極めたい場合 |
| Astro | 複数対応 | コンテンツサイト特化・JS最小化 | ブログ・ドキュメントサイト |
| SvelteKit | Svelte | 軽量・高速 | 学習コストを下げたい小規模PJ |
Next.jsのアーキテクチャ概要
関連用語
- React — Next.jsのベースとなるUIライブラリ。コンポーネント単位でUIを構築する
- SSR（サーバーサイドレンダリング） — サーバー側でHTMLを生成してからブラウザに返す方式
- SSG（静的サイト生成） — ビルド時にHTMLを事前生成しておく方式。高速・低コスト
- Vercel — Next.jsを開発するクラウドホスティング企業。Nextとの親和性が最高
- TypeScript — Next.jsプロジェクトでほぼ標準的に組み合わせて使われる型付きJS
- REST API — Next.jsのAPI Routesで構築することの多いAPI形式
- CDN — 静的ファイルやISRページの配信を高速化するために組み合わせて使う
- Headless CMS — Next.jsと組み合わせてコンテンツ管理に使うCMSの形態