tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

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

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

手順

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 をそれぞれに渡します。
f:id:okinawanpizza:20211024073709p:plain

コンポーネントに渡す

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

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

以上!