PractiX Code Lab

Next.js × NEWT ：ヘッドレスCMS連携のはじめかた

Share this post

🚪はじめに

管理人のTKGです。

ヘッドレスCMS「NEWT」を使って、Next.jsでフロントエンドを構築する手順を紹介します。

CMSといえばWordPressが有名ですが、今回は「ヘッドレスCMS」のひとつである NEWT を使って、Next.jsと連携したブログ構築の方法を紹介します。

CMSと連携することで、非エンジニアでもコンテンツ管理がしやすくなり、ブログやオウンドメディア運営の効率が一気に上がります。

この記事では、Next.jsとの接続方法や実装の流れ、注意点などをまとめます。

🎯想定読者

  • ヘッドレスCMSに興味のある初学者
  • Next.jsでブログやメディアサイトを作りたい方
  • NEWTとAPI連携する実装フローを理解したい方

📘本記事でわかること

  • NEWTで必要なAPI設定とスキーマの作り方
  • Next.jsでのAPI連携の実装（取得・表示）
  • 実際のコード例と注意点（非同期、ISR対応など）

🧭導入の流れ（概要）

  1. NEWTでプロジェクト・モデル作成（データ構造の土台を用意）
  2. APIトークンの取得（Next.js側と安全に通信）
  3. Next.js 側で fetch 関数を作成（コンテンツを取得）
  4. ISR or CSR で表示（パフォーマンスと体験を両立）
  5. デザイン調整（表示部分を整える） 　

🏗️ NEWT 側の準備

1. スペースの作成

NEWTのダッシュボードからスペースを作成。ブログやメディア用など用途を選択。

2. モデル（コンテンツタイプ）の作成

記事（Article）やカテゴリ（Category）など、使いたいデータ構造を定義。

3. APIトークンの取得

「CDN API トークン」を取得し、Next.js の .env ファイルに設定。

NEXT_PUBLIC_NEWT_SPACE_UID=your_space_uid
NEXT_PUBLIC_NEWT_APP_UID=your_app_uid
NEXT_PUBLIC_NEWT_API_TOKEN=your_api_token

🏗️ Next.js 側の実装

1. クライアントの作成（lib/newtClient.ts）

import { createClient } from 'newt-client-js';

export const newtClient = createClient({
  spaceUid: process.env.NEXT_PUBLIC_NEWT_SPACE_UID,
  token: process.env.NEXT_PUBLIC_NEWT_API_TOKEN,
  apiType: 'cdn',
});

2. 記事取得関数の作成

export async function getArticles() {
  const res = await newtClient.getContents({ appUid: 'blog', modelUid: 'article' });
  return res.items;
}

3. ページでの呼び出し

const articles = await getArticles();
return (
  <div>
    {articles.map((article) => (
      <h2 key={article._id}>{article.title}</h2>
    ))}
  </div>
);

⚠️ 実装時の注意点

  • APIキーは必ず.envで管理（直書き厳禁）
  • 型定義がないため、anyを使いがちになるが非推奨
  • ISRとの相性が良い（SSGより柔軟）
  • カテゴリや著者などリレーションを使う場合は構造を把握して設計を

✅ まとめ

本記事では、NEWTとNext.jsの連携手順をステップごとに紹介しました。APIトークンの設定から、実際のデータ取得、表示までを体系的に理解いただけたかと思います。

NEWTを使えば、柔軟にコンテンツを管理でき、Next.jsとの相性も抜群です。初期構築は少し複雑ですが、一度設計できればスケーラブルなメディア運営が可能になります。

今回の技術スタックである「Next.js × NEWT」の組み合わせは昨今、流行しているJamStackアーキテクチャとなり今後開発需要も増えることが予想されます。

是非この記事を参考にヘッドレスCMSのNEWTを活用したブログを作成してみてください。

🚀成果物リンク

🔗ブログ：PractiX Code Lab｜次の実践へつなぐ技術メディア

💻 GitHubリポジトリ：Github

Share this post