MENU

ヘッドレスcms, react活用で始める最新開発入門ガイド

大規模情報サイト運営
react ヘッドレスcms
2025/12/01
目次

はじめに

目的

本レポートは、ヘッドレスCMSとReact（特にNext.jsやReactベースの実装）を組み合わせて使う際の基礎と実践を分かりやすくまとめたものです。技術の全体像を示し、実装時に注意する点や具体的な手順を提示します。

対象読者

フロントエンド開発者、CMS選定に関わる技術者、あるいはこれからヘッドレスCMSを導入しようとする担当者を想定しています。基本的なWeb開発の知識があれば読み進められます。

本レポートの範囲

  • ヘッドレスCMSの基本概念と利点
  • 主要なCMSの比較と選定ポイント
  • Next.jsとNilto CMSの組み合わせによる実装例
  • KurocoとReactを使ったAPI連携と表示例
    各章で実務で使える具体例を示します。

読み進め方

各章は独立して読めますが、順に読むと概念から実装まで体系的に理解できます。本章では全体の目的と構成を説明しました。次章でヘッドレスCMSの基礎に入ります。

ヘッドレスCMSとは

概要

ヘッドレスCMSは、コンテンツ管理と表示（プレゼンテーション）を分けた仕組みです。管理画面で記事や画像を登録すると、CMSはAPIを通じてそのデータを提供します。フロントエンドはそのAPIを受け取り、ReactやVue.jsなどで自由に表示を作ります。たとえば同じ記事をWebサイトとスマホアプリで共通利用できます。

仕組みのイメージ

CMS側はデータの保存と公開を担当します。外部からはRESTやGraphQLのAPIでデータを取得します。フロントエンドはAPIを呼び出して表示だけを行うため、デザインや動作を自由に設計できます。簡単な例では「/posts」APIで記事一覧を取得し、個別ページはIDで取得します。

利点

  • フロントエンドを好きな技術で作れるため表現力が高まります。
  • 同じコンテンツを複数の端末やサービスに配信できます。
  • パフォーマンス向上やスケールの柔軟性が期待できます。

注意点

  • 表示部分を自分で作る必要があり、開発工数が増える場合があります。
  • プレビュー機能や認証周りは追加対応が必要になることがあります。

こんなときに向く

マルチプラットフォームで同じコンテンツを配信したい場合や、モダンなフロントエンドで独自表現をしたい場合に特に向いています。一方で、小さな定型サイトでは従来型CMSの方が手早く済むことがあります。

Next.js × Nilto CMSの組み合わせ

概要

Nilto CMSはAPI中心の軽量なヘッドレスCMSで、Next.jsと相性が良いです。フロント側でNext.jsのServer Componentsやfetchを使い、コンテンツを柔軟に取得・表示できます。ここでは初期化からブログ一覧・個別ページまでの実装例を丁寧に解説します。

プロジェクト初期化

  1. Next.jsの新規作成: npx create-next-app
  2. 環境変数にNILTO_API_KEYを設定（.env）
  3. Nilto側でコレクション（例: posts）を作成し、スラッグや画像フィールドを用意します。

コンテンツ管理の流れ

Niltoで記事を追加するとAPI経由で取得できます。スラッグや公開日時などのメタはCMSで管理し、Next.js側はAPIを呼んで表示します。編集はCMS上で完結します。

API連携とfetchのcacheオプション

fetchで取得する際はキャッシュ設定を明確にします。例:
fetch(url, {
headers: { Authorization: Bearer ${process.env.NILTO_API_KEY} },
cache: ‘no-store’
})
cache:’no-store’は最新を常に取得、’force-cache’はビルド時の静的化に向きます。用途に合わせて選んでください。

APIキーの利用方法

APIキーは環境変数に入れ、サーバーサイドでのみ参照します。クライアントで直接埋め込むと漏洩するため避けます。Next.jsのServer ComponentやAPIルートで使うと安全です。

ブログ一覧ページの実装例

サーバーコンポーネントで記事一覧をfetchし、タイトル・抜粋・サムネイルを並べます。Linkでスラッグページへ遷移させるとシンプルです。ページネーションはAPIのlimit/offsetで実装できます。

個別ページの実装例（画像とメタデータ）

スラッグで記事を取得し、画像はnext/imageで最適化表示、altやキャプションはCMSのフィールドを使います。metaタグはHeadやNext.jsのMetadata APIでtitle、description、og:imageを出力してください。

実践的な注意点

APIのレスポンス構造を事前に確認し、nullチェックを入れてください。画像のURL変換やレスポンス遅延時のプレースホルダーも用意するとUXが向上します。

Kuroco × Reactの実装

概要

Kurocoは国産のヘッドレスCMSで、Reactと相性が良い設計です。本章ではCORSの設定手順と、テーマ・コンテンツ定義の基本スキーマ、Reactからの呼び出し例を分かりやすく示します。

前提

  • Kurocoの管理画面にアクセスできること
  • Reactアプリがローカル（例: http://localhost:3000）または公開ドメインで動作していること

CORS設定手順

  1. Kuroco管理画面のAPI設定に移動します。
  2. CORS_ALLOW_ORIGINSにReactアプリのOriginを追加します（例: http://localhost:3000 または https://your-site.example）。正確なスキームとホストを登録してください。
  3. CORS_ALLOW_METHODSにPOSTを追加します（通常はGET, POST, PUT, DELETEを許可します）。
  4. 必要に応じてCORS_ALLOW_HEADERSにContent-TypeやAuthorizationを追加し、CORS_ALLOW_CREDENTIALSをONにします。
  5. 設定を保存して動作を確認します。

テーマとコンテンツ定義の基本スキーマ例

以下はシンプルなコンテンツ定義の例です。

{
  "post": {
    "title": "string",
    "body": "text",
    "published_at": "datetime"
  }
}

テーマはテーマID、カラー、ロゴURLなどを定義しておくと、React側で共通UIを適用しやすくなります。

Reactからの呼び出し例

GETで一覧を取る例:

fetch('https://api.your-kuroco.com/content/post', { mode: 'cors' })
  .then(r => r.json())
  .then(data => console.log(data))

POSTで作成する例（CORSにPOST許可が必要）:

fetch('https://api.your-kuroco.com/content/post', {
  method: 'POST',
  mode: 'cors',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'タイトル', body: '本文' })
})

実装のポイント

  • 認証が必要なAPIはトークン管理を行ってください。
  • プレビュー機能を実装する際はプレビュー用のエンドポイントとヘッダを用意します。
  • エラー処理とキャッシュ制御をきちんと実装するとUXが向上します。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
react ヘッドレスcms
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次