PractiX Code Lab

NEXT.jsでヘッドレスCMSを利用してブログを作成してみた

Share this post

🚪はじめに

管理人のTKGです。

今回は Next.js とヘッドレスCMSを組み合わせてブログを構築しました。

本記事ではその背景や全体の開発フロー、詰まりポイントなどの概要をご紹介します。

※ 各技術や工程の詳細については、今後投稿予定の個別記事にて解説予定です。

🎯想定読者

  • Next.jsを使ってブログサイトを作ってみたい方
  • ヘッドレスCMSに興味があり、導入の雰囲気をつかみたい方
  • フロントエンドを中心としたブログ制作の流れを把握したい方

📘本記事でわかること

  • Next.js + CMSを使ったブログ制作の全体像
  • 技術スタックの選定理由
  • 詰まりポイントとその乗り越え方

🧭作成背景

  • 発信基盤の構築
    • 自身の技術検証・実装の記録を外部公開する場として、ブログを立ち上げ。
  • ヘッドレスCMS活用の検証
    • コンテンツとプレゼンテーションを分離する構成が、自身や将来の案件で応用できるかを検証。
  • Jamstackの理解深化
    • 静的生成・API連携のアーキテクチャ思想を体感するため。

🧱使用技術スタック

🧑‍💻 フロントエンド

  • Next.js（v14.1.4）
    • 使い慣れたApp Router構成で開発が可能であり、 SSG/SSRの柔軟な選択が可能で、CMSとの連携に適していたため採用
  • React（v18.2.0）
    • 特にこだわりはなく、新しい安定版を採用。
  • TypeScript（v5.8.2）
    • 型安全なコードベースによるバグ抑制と保守性の向上のため採用

🗃 CMS（コンテンツ管理）

  • Newt
    • 以下3点の理由のため採用
      • UIが直感的でわかりやすい
      • 日本語ドキュメントが充実しており学習コストが低い
      • 無料プランが充実

補助ライブラリ・API関連

  • react-google-recaptcha
    • reCAPTCHAによるスパム対策のため採用
  • resend
    • 問い合わせ通知用に採用

🚀 ホスティング

  • Vercel
    • 自動ビルド＆デプロイが可能でNext.jsの開発元が提供しているサービスのため採用

📝開発の流れと進行ログ

  • 要件定義と構成検討
    • カテゴリや著者、タグなどの構成を設計
  • Newtでモデル定義とコンテンツ投入
    • スターターキットを活用し、テストコンテンツを投稿
  • Next.jsでのデータ取得実装
    • APIトークン管理、ルーティング設計、動的ルーティング導入（[slug]）
  • 各ページのUI修正＆機能追加
    • 要件定義で設計した
  • ビルド＆デプロイ（Vercel）
    • パフォーマンス確認＆meta情報などの最適化

🧩詰まりポイント（抜粋）

  • レンダリング方式の罠
    • App Router構成では Server Components がデフォルトとなるため、クライアント側の処理（useEffectやwindow依存コード）が動作しないケースが発生 ⇒コンポーネントの切り分けを実施し、レンダリング方式を整理することで対応
  • 動的ルーティングのビルドタイミング
    • CMS連携による slug ベースの記事ページ（例：/articles/[slug]）で、記事データが取得できず404になる、または params.slug が未定義となるケースが発生 ⇒必要に応じて revalidate を設定して ISR（Incremental Static Regeneration）を採用することで対応

📂投稿予定の記事

  1. Newtでのモデル設計とAPI連携の流れ
  2. 各ページの設計の考え方と実装手順
  3. 設計初期でのレンダリング方式の見極め方

📦成果物＆GitHub

Share this post