Next.js

Next.js から Contentful API を叩く方法メモ

Next.js から Contentful API を叩く方法メモです。

前準備

アカウント登録

https://www.contentful.com/

からアカウントを登録

Content Model の定義

テーブル定義みたいなもの

Content の追加

実際のデータを登録

API Keys の作成

https://app.contentful.com/spaces/hogehoge/api/keys

Content delivery / preview tokens
Content management tokens

どちらも作っておく

導入手順

yarn add contentful

型を生成するやーつ

yarn add --D contentful-typescript-codegen contentful-management

https://github.com/intercom/contentful-typescript-codegen

package.json を修正

{
  // ...
  "scripts": {
    // これはあってもなくてもOK
    "codegen": "npm run -s contentful-typescript-codegen",
    "contentful-typescript-codegen": "contentful-typescript-codegen --output src/types/generated/contentful.d.ts"
  }
}

root 直下に getContentfulEnvironment.js を生成して下記を

require('dotenv').config();
const contentfulManagement = require('contentful-management');

module.exports = function () {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CF_MANAGEMENT_API_ACCESS_TOKEN,
  });

  return contentfulClient
    .getSpace(process.env.CF_SPACE_ID)
    .then((space) => space.getEnvironment(process.env.CF_ENVIRONMENT));
};

.envまわり

$ yarn add dotenv

.env に codegen に必要な API key を仕込む

CF_SPACE_ID=
CF_DELIVERY_ACCESS_TOKEN=
CF_PREVIEW_ACCESS_TOKEN=
CF_MANAGEMENT_API_ACCESS_TOKEN=
CF_ENVIRONMENT=

場所は 管理画面の Settings > API keys > Content delivery / preview tokens

CF_SPACE_ID=
CF_DELIVERY_ACCESS_TOKEN=
CF_PREVIEW_ACCESS_TOKEN=
CF_MANAGEMENT_API_ACCESS_TOKEN=
CF_ENVIRONMENT=

.env と .gitignore するのを忘れずに

Vercel とかに deploy するなら環境変数の設定を行う必要がある

参考

カテゴリの作り方
https://blog.cloud-acct.com/posts/blog-creating-category/

-Next.js