株式会社GoodFunction
テックブログ | GoodFunctionの技術や開発を発信
Contentful x Next.js でテックブログを作りました

Contentful x Next.js でテックブログを作りました

  • Contentful
  • Next.js
Contentful x Next.js でテックブログを作りました

伴野 太一朗

2024.02.19

はじめに

こんにちは！GoodFunctionの伴野です。テックブログを開設して第一回目の記事となります。何を書こうか決めかねてましたが、このテックブログを開発したことについて書こうと思います。

テックブログを開設するにあたり、ヘッドレスCMSを使用して自社オリジナルのテックブログを運営したい思いが強かったので、複数の技術から比較・検討を行いました。今回は、世間での実績と自身のスキルを考慮して「Next.js x Contentful」の組み合わせで開発することにしました。

ヘッドレスCMSとJamstackの構成で、テックブログをゼロから開発する流れを書きましたので、ぜひご覧ください。

システム構成

  • ホスティング : Vercel

  • フレームワーク : Next.js

  • ヘッドレスCMS : Contentful

システム構成はいたってシンプルです。
CMSからのデータ取得は、Contentfulのクライアントライブラリから取得します。
取得したデータは、フロントエンド用に望む形に加工します。

インストール

Next.js、Contentfulをインストールします。Contentfulの型モデルを使用するためTypescriptもインストールします。

# react, next.jsをインストール
npm i react react-dom next

# Typescriptと型定義をインストール
npm i -D typescript @types/react @types/react-dom

# Contentfulの必要ライブラリをインストール
npm i contentful contentful-import @contentful/rich-text-types @contentful/rich-text-react-renderer

# ContentfulのCLIライブラリをインストール
npm i -D contentful-management cf-content-types-generator

Contentfulクライアントを定義

Contentfulに接続するためのクライアントを作成します。


import { createClient } from "contentful";
import { env } from "~/env.mjs";

export const client = createClient({
  space: env.CONTENTFUL_SPACE_ID || "",  
  accessToken: env.CONTENTFUL_ACCESS_TOKEN || "",
});


envファイルに設定した CONTENTFUL_SPACE_ID(スペースID) と CONTENTFUL_ACCESS_TOKEN(アクセストークン) を createClient に渡します。
スペースIDとアクセストークンはContentfulの管理画面から取得できます。
クライアントの作成はこれでOKです。

モデルのインポート

Contentfulの管理画面から作成したモデル（Content Type）をソースコードにインポートします。この機能はとても便利なのでぜひ使ってください。

手順

1. プロジェクトのルートにcontentful-import-config.jsonを定義します。

{
  "spaceId": "your space id",
  "managementToken": "your management token",
  "contentFile": "src/contentful/export.json"
}

この場合は、src/contentful 配下にexport.jsonが出力されます。


2. package.jsonのscriptsにコマンドを定義します

"scripts": {
  "contentful:import": "contentful space import --config contentful-import-config.json"
}


3. コマンドからインポートを実行

$ npm run contentful:import


4. src/contentful/export.json が出力されたことを確認できればOK


型モデルの生成

上記でインポートしたモデルをTypescriptの型モデルとして生成します。
型モデルの生成は、cf-content-types-generator というライブラリを使用しています。
cf-content-types-generator

手順

1. 生成コマンドをpackage.jsonに定義

"scripts": {
  "contentful:generate": "cf-content-types-generator src/contentful/export.json -X -o src/contentful/generated",
}

この場合、生成された型モデルは src/contentful/generated に生成されます。


2. 生成コマンドを実行

npm run contentful:generate


型モデルのtsファイルが生成されることが確認できます。

root/
├ src/
  └contentful/
  └generated/
    └ index.ts
    └ TypeMember.ts
    └ TypePost.ts
    └ TypePostType.ts
    └ TypeTag.ts
    └ TypeVideo.ts

　

Contentfulからデータを取得

ここまでできたら、いよいよデータの取得が可能になります。
下記では、単一取得とリスト取得の実装例を記載しました。


import {  type TypeTagSkeleton } from "~/contentful/generated";

...

# 単一エントリーの取得
const entry = await client.getEntry<TypePostSkeleton>(id);

# 複数エントリーの取得
const entries = await client.getEntries<TypePostSkeleton>({
  content_type: "post",
  order,
  limit,
  "fields.postType.sys.id[eq]": "value here",
  skip,
});

こちらの例では、上述で生成した型モデルを取得しています。

取得したデータは、フロントエンド用に加工してお好みの形式で表示できます。

Contentfulのリスト取得では、豊富なオプションが用意されているため、ページング・検索・ソートなど、いろいろな機能を実現することが可能です。


おわりに

Contentfulを使用してみて、JSライブラリが豊富に用意されているので、開発者がとても使いやすい作りになっていると感じました。
また自由にモデルを定義できることから、自社用のCMSを開発する手間が省けるのはとても大きいと思いました。
自社メディアやWebサービスを開発する際、一つの選択肢になるのではないでしょうか。

グッドファンクションでは、Contentfulの構築・開発支援を行なっております。
ご興味のある方は、ぜひ弊社までお問合せください。