Contentful

Contentful を分かりやすく？

Contentful は、コンテンツマネジメントシステム(CMS)の 1 つで、ウェブサイトやモバイルアプリなどのコンテンツをクラウド上で管理し、API 経由で配信することができるヘッドレス CMS です。また、様々な言語やフレームワークとの親和性が高く、React や Next.js との組み合わせでも利用されています。

Contentful の特徴

フレキシブルなデータモデル

Contentful では、ユーザーが独自に設計したデータモデルに沿って、コンテンツを作成できます。そのため、様々な種類のコンテンツを管理することができます。

スケーラブルなクラウドインフラストラクチャ

Contentful は、Google Cloud Platform をベースにしたスケーラブルなクラウドインフラストラクチャを提供しています。そのため、大量のコンテンツでも高速に配信することができます。

親和性の高い API

Contentful は、REST API や GraphQL API を提供しています。また、様々な言語やフレームワークとの親和性が高く、JavaScript のフレームワークである React や Next.js とも連携することができます。

料金表

Contentful Pricing | Contentful

Contentful の使い方

アカウントの作成

まずは、Contentful の公式サイトにアクセスし、アカウントを作成します。作成後、メールアドレスを確認し、ログインします。

スペースの作成

Contentful では、複数のスペースを作成することができます。スペースは、それぞれのプロジェクトに対応します。まずは、新しいスペースを作成します。

コンテンツの作成

スペースを作成したら、コンテンツを作成します。コンテンツの種類や項目は、事前にデータモデルを設計しておきます。例えば、ウェブサイトの場合、記事や製品などがコンテンツとなります。

API の設定

Contentful では、REST API や GraphQL API を使用して、コンテンツを取得することができます。まずは、API の設定を行います。

先ほどのコードでは、createClient関数を使用して API クライアントを作成し、getEntries関数を使用してエントリーのデータを取得しました。

次に、Next.js のサーバーサイドレンダリング（SSR）機能を使って、ページがクライアント側でレンダリングされる前に必要なデータを取得して、HTML が生成される前にそのデータを埋め込みます。これにより、ページがさらに高速に読み込まれるようになります。

まず、getStaticProps関数を使用して、コンポーネントの初期データを取得するために必要なデータを取得します。getStaticProps関数は、Next.js がビルド時に実行し、その結果を事前に生成された HTML に埋め込みます。これにより、初回アクセス時にデータを取得する必要がなく、ページの読み込み時間が短縮されます。

import { GetStaticProps } from 'next'
import { createClient } from 'contentful'

export const getStaticProps: GetStaticProps = async () => {
  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID || '',
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN || '',
  })

  const { items } = await client.getEntries({ content_type: 'blogPost' })

  return {
    props: {
      posts: items,
    },
  }
}

上記のコードでは、getStaticProps関数をエクスポートし、GetStaticProps型を使用して型定義します。この関数では、Contentful の API クライアントを作成し、getEntries関数を使用して必要なエントリーのデータを取得しています。

次に、この関数は、propsとしてエントリーのデータを含むオブジェクトを返します。このオブジェクトは、コンポーネントのpropsとして使用されます。

type Props = {
  posts: Entry<BlogPost>[]
}

const Blog: NextPage<Props> = ({ posts }) => {
  // ...
}

上記のコードでは、Props型を定義し、Entry型を使用して Contentful から取得したデータを型指定しています。そして、NextPage型を使用して、Blogコンポーネントのpropsを型指定します。NextPage型は、Next.js の型で、React コンポーネントのpropsに加えて、getInitialProps関数が含まれます。

最後に、Blogコンポーネントで取得したデータを使用してページをレンダリングします。

const Blog: NextPage<Props> = ({ articles }) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {articles.map((article) => (
          <li key={article.slug}>
            <Link href={`/blog/${article.slug}`}>
              <a>{article.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID || '',
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN || '',
  })

  const res = await client.getEntries<ArticleFields>({
    content_type: 'article',
  })

  const articles = res.items.map((item) => ({
    slug: item.fields.slug,
    title: item.fields.title,
  }))

  return {
    props: {
      articles,
    },
  }
}

ここでは、createClient 関数を使用して Contentful の API クライアントを作成し、 getEntries メソッドを使用して article のデータを取得しています。取得したデータは res 変数に格納され、それを map メソッドを使用して必要なフィールドだけを取り出しています。そして、取得した記事データを props として返しています。

これで、Contentful からデータを取得して Next.js アプリケーションに表示するためのデータの取得ができました。

まとめ

今回は、Contentful と Next.js を使用して、コンテンツ管理システムからデータを取得して、Next.js アプリケーションに表示する方法について学びました。Contentful では、コンテンツ管理画面を使用して、簡単にコンテンツを管理することができます。また、API クライアントを使用して、簡単にデータを取得することができます。Next.js と組み合わせることで、高速かつパフォーマンスの高い Web アプリケーションを開発することができます。