Next.js14(App Router)でのContentfulのAPI【使い方】

概要

ContentfulでのAPIの使い方をSSG(Static Site Generation)でブログサイトを作りたい人向けに紹介します。ちなみに自分のサイトはContentfulでブログの投稿がされたらWebhooksで自動で更新が適用されるようにしています。

手順

参考: Content Delivery API

npm install contentful

まずパッケージをnpmを使ってインストールします。

次にContentfulのSpaceを開き右上のSettingsからAPI Keysを開いてAdd API keyをクリックして新しいAPI Keyを作ります。Nameを適当に付けたらAdd API keyを更に押して完成。設定した名前をクリックして開きます。

CONTENTFUL_SPACE_ID=...
CONTENTFUL_ACCESS_TOKEN=...

そうしたら、Space IDとContentful Delivery APIをそれぞれコピーして.env.localファイルをルートディレクトリに作り、ペーストして保存します。

import { createClient } from "contentful";
const client = createClient({  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,});
export default client;

ルートディレクトリにlibフォルダーを作成して、更にその中にcontentfulフォルダーを作って上記のコードを書いたclient.jsを入れます。(ファイルの場所はどこでも大丈夫です。)

試しにContentfulのSpaceのページに戻りContent modelタブ-> Create content typeからAuthorと名前を付けたContent typeを作成してみましょう。FieldsにはnameとdescriptionをTextで設定します。

次にContentタブ -> Add entryからいくつかAuthorを作っておきましょう。

最後に、api.jsを次のように書きます。

import client from "./client";
export async function getAllAuthors() {  
 const response = await client.getEntries({
    content_type: "author",  
 });  
return response.items;
}

実際にAPIを叩く

authorsにgetAllAuthorsから取ってきた情報を入れ

import { getAllAuthors } from "@/lib/contentful/api";
import AuthorCard from "./AuthorCard";
export default function Authors() {
const authors = await getAllAuthors();
 return (
 <div>
  <h1>
    Authors
  </h1>
   <div className="grid grid-cols-1 gap-6">
     {authors?.map((author: any) => (
      <AuthorCard author={author} key={author.sys.id} />
       ))}
     </div>
    </div>
  );
}

さらにauthorsをmap関数でAuthorCardに渡します。

export default function AuthorCard({ author }: any) {
  const { name, description } = author.fields;
  return (
   <div>
    <p>{name}</p>
    <p>{description}</p>
   </div>
  )
}

Fieldの情報はfieldsの中に入っているので分割代入で取り出します。あとは適当に表示して完了です。

最後に

api.jsのgetEntriesの中を変えれば、更新順などに並び替える事も可能です。この記事が役に立てば幸いです。

Next.js14(App Router)でのContentfulのAPI【使い方】

目次

概要

手順

実際にAPIを叩く

最後に