【Next.js】contentfulのコンテンツをNext.js 側で取得する

contentfulと言うHeadlessCMSで作成した記事内容をNext.js側に出力する方法について。

手順

• contentfulをインストール
• データの取得
• コンポーネントに渡す

contentfulをインストール

• npmでインストール

npm install contentful

• index.jsxインポート

import { createClient } from "contentful";

データの取得

以下を記述

// index.jsx
export async function getStaticProps() {

  const client = createClient({
    space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
    accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN,
  });

  const res = await client.getEntries({content_type: "blog"}); 

  return {
    props: {
      articles: res.items
    }
  }
}

.env.localを作成し以下を記述

NEXT_PUBLIC_CONTENTFUL_SPACE_ID=(①)
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=(②)

settings→APIkeys→Add API key を押すと下の画像のような画面になるので
space ID と access Token をそれぞれに渡します。

コンポーネントに渡す

articles: res.itemsと設定しているので、articlesをプロップスとして渡します。

export default function Home({ articles }) {
console.log(articles);
}

以上！