# Next.jsとは？CMSと組み合わせて使うフロントエンドの主役

元のページ: <https://chot-inc.com/knowledge/nextjs-with-cms>

CMSとは｜種類・選び方とヘッドレスCMS入門ガイド

Next.jsとは何か、CMSと組み合わせるフロントエンドの主役として解説します。App Router・SSG/ISR・Vercel連携など、CMSと組み合わせる際の基礎知識をまとめています。

## **はじめに**

ヘッドレスCMSの話をすると、必ずと言っていいほど「Next.js」という名前が出てきます。2025年現在、Next.jsはモダンなWebサイト・Webアプリケーション開発において事実上の標準フレームワークとなっており、世界の主要企業のWebサイトで採用されています。

本記事では、Web制作の意思決定者・担当者が理解すべきNext.jsの概要・特徴・CMSとの関係を解説します。エンジニア向けの技術的な解説ではなく、「なぜNext.jsが選ばれるのか」「自社のサイトにどう関係するのか」という観点で整理します。

## **Next.jsとは**

Next.jsは、Vercel社が開発・メンテナンスするオープンソースのWebフロントエンドフレームワークです。JavaScriptライブラリ「React」をベースに、Webサイト・Webアプリケーションの開発に必要な機能を統合したフレームワークとして2016年に登場しました。

GitHubでの公開以来、急速にスターを集め、2025年現在では世界で最も使用されているReactフレームワークとなっています。

## **Next.jsが普及した理由**

### **理由1：レンダリング戦略を柔軟に選択できる**

Webサイトのページをどのように生成するかを「レンダリング戦略」と呼びます。Next.jsが優れている点は、ページの特性に応じて最適なレンダリング戦略を選択できることです。

#### **SSG（静的サイト生成）**

ビルド時にHTMLを事前生成します。生成済みのHTMLをCDNで配信するため、表示速度が最速になります。更新頻度が低いコーポレートサイト・ランディングページに最適です。

#### **ISR（インクリメンタル静的再生成）**

SSGの高速性を保ちながら、指定した間隔でコンテンツを自動更新します。大量の記事を持つブログ・ニュースサイトに適しています。

#### **SSR（サーバーサイドレンダリング）**

リクエストのたびにサーバーがHTMLを生成します。ユーザーごとにパーソナライズされたページ（マイページ等）に適しています。

#### **CSR（クライアントサイドレンダリング）**

ブラウザ側でJavaScriptがHTMLを生成します。インタラクティブなダッシュボード・管理画面等に適しています。

一つのプロジェクト内で、ページごとに最適なレンダリング戦略を組み合わせられることが、Next.jsが選ばれる大きな理由です。

### **理由2：パフォーマンス最適化が標準装備**

Next.jsには、パフォーマンスを向上させる機能が標準で組み込まれています。

next/image：画像を自動的にWebP変換・リサイズし、遅延読み込みを設定します。CLSの防止にも貢献します。

next/font：フォントを最適化し、レイアウトシフトを防ぎます。

next/link：リンク先ページを事前読み込み（プリフェッチ）することで、ページ遷移を高速化します。

Code Splitting：必要なJavaScriptコードのみをロードし、初期表示を高速化します。

これらの機能により、開発者が個別に最適化を実装しなくても、Lighthouseスコア・Core Web Vitalsを高いレベルで維持することができます。

### **理由3：Vercelとの親和性**

Next.jsを開発するVercel社は、Next.jsのデプロイ・ホスティングサービスも提供しています。Vercelにデプロイするだけで、世界中のエッジネットワークでコンテンツが配信され、手動でCDNを設定する必要がありません。

後述のVercelとNext.jsの組み合わせは、現在のモダンWeb開発における「最強の組み合わせ」と言われます。

### **理由4：App Routerによる開発体験の向上**

2023年にリリースされたNext.js 13以降で本格導入された「App Router」は、Reactの最新機能（Server Components）を活用した新しいルーティングシステムです。サーバー側でのデータ取得・レンダリングが効率化され、より高速なWebアプリケーションの構築が可能になっています。

## **Next.jsとCMSの関係**

ヘッドレスCMSとNext.jsの連携は、現代のWeb制作における標準的なアーキテクチャです。

#### **データの流れ**

- コンテンツ担当者がヘッドレスCMS（microCMS・Orizm等）の管理画面でコンテンツを入力・更新します

- ヘッドレスCMSがコンテンツをAPIで公開します

- Next.jsがAPIを通じてコンテンツを取得します

- Next.jsがコンテンツを組み込んだHTMLを生成（SSG/ISR/SSR）します

- 生成されたHTMLがVercelのCDNで配信されます

- 訪問者のブラウザに高速で届く

この仕組みにより、コンテンツが更新されるたびに新しいページが自動的に生成・配信されます。

ヘッドレスCMSについて詳しく知りたい方は「[**ヘッドレスCMS比較（従来CMSとの違い）**](https://chot-inc.com/knowledge/headless-cms-explained)」も参考にしてください。

#### **AIとの統合**

Next.jsはVercel AI SDKとの親和性が高く、チャットUI・AIアシスタント・ストリーミングレスポンスなどのAI機能をWebサイトに組み込む実装が容易です。ヘッドレスCMSのコンテンツをAIが参照・要約して回答するAIアシスタントの実装も、このスタックで現実的なコストで実現できます。

## **ReactとNext.jsの違い**

「ReactとNext.jsは何が違うのか」という質問をよく受けます。

ReactはUIを構築するためのJavaScriptライブラリです。コンポーネントベースの設計でUIを組み立てるための仕組みを提供しますが、ルーティング・データ取得・SSR/SSGなどの機能は含まれていません。

Next.jsはReactをベースに、これらの機能を追加したフレームワークです。Reactで必要になる各種設定・機能が標準で統合されており、「ReactでWebサイトを作るための実践的なフレームワーク」という位置づけです。

現在のモダンWeb開発では「Reactを使う＝ほぼNext.jsを使う」という状況になっています。

## **他のフレームワークとの比較**

### **Next.js vs Astro**

Astroは、コンテンツ中心のWebサイト（ブログ・ドキュメント・マーケティングサイト）に特化したフレームワークです。JavaScriptを最小限に抑えた「アイランドアーキテクチャ」により、デフォルトで非常に高速なサイトを生成できます。

- Next.jsが有利な場面：インタラクティブな要素が多い・AI機能の統合・ユーザー認証が必要なサイト

- Astroが有利な場面：静的コンテンツ中心・JavaScriptを最小化したい・ブログ・ドキュメントサイト

## **発注側が知っておくべきポイント**

制作会社の提案にNext.jsが含まれている場合、以下の点を確認することを推奨します。

#### **Vercelへのデプロイを前提としているか**

Next.jsは他のホスティング環境でも動作しますが、Vercelが最もパフォーマンスを発揮できる環境です。コスト面での懸念があれば、Vercelの料金体系を事前に確認します。

#### **レンダリング戦略の説明ができるか**

「コーポレートサイトはSSG、採用ブログはISR、マイページはSSR」というように、ページ特性に応じたレンダリング戦略を選定・説明できる会社かを確認します。

#### **App RouterかPages Routerか**

旧来のPages Routerを使い続けているか、モダンなApp Routerを採用しているかを確認します。新規プロジェクトではApp Routerを採用することが現在の標準です。

## **まとめ**

Next.jsはReactをベースに、レンダリング戦略の柔軟性・パフォーマンス最適化の標準装備・Vercelとの高い親和性を持つフロントエンドフレームワークです。ヘッドレスCMSとの組み合わせにより、高速・セキュア・拡張性の高いWebサイトを実現する現在の主流アーキテクチャの中核を担っています。

次の記事では、Next.jsと最も相性の良いホスティングサービス「Vercel」を詳しく解説します。

## エージェント型Web・AIアプリ 開発のご相談

chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。

[お問い合わせ](https://chot-inc.com/contact)

## このテーマの他の記事

- ### [CMSとは？Webサイト制作における役割をわかりやすく解説](https://chot-inc.com/knowledge/what-is-cms)
  [CMSとは何か、Webサイト制作における役割をわかりやすく解説します。静的サイトとの違い・CMSが必要なケース・選定時の基本知識をまとめています。](https://chot-inc.com/knowledge/what-is-cms)
- ### [CMSの種類と比較｜オープンソース・クラウド・ヘッドレスの選び方](https://chot-inc.com/knowledge/cms-types)
  [CMSの種類をオープンソース・クラウド・ヘッドレスの3つに分けて仕組みから解説します。それぞれの特徴と向いているケースを比較整理しています。](https://chot-inc.com/knowledge/cms-types)
- ### [WordPressとは？世界シェア40%のCMSが選ばれ続ける理由と限界](https://chot-inc.com/knowledge/wordpress-explained)
  [WordPressとは何か、世界シェア40%のCMSが選ばれ続ける理由と2025年における限界を解説します。WordPress特有のセキュリティ・速度・拡張性の問題点もまとめています。](https://chot-inc.com/knowledge/wordpress-explained)

[CMSとは｜種類・選び方とヘッドレスCMS入門ガイド一覧](https://chot-inc.com/knowledge/themes/cms)