Next.js＋microCMSでSSG最小構成を作ってみる

概要

ホスティングサービスへのデプロイ時（ビルド時）に、Next.js(TypeScript 使用)を用いて、バックエンド側のヘッドレス CMS(microCMS)からコンテンツデータを取得し、静的 HTML を出力する構成を最小構成で作ってみましたので、載せておきます。

環境

• Next: 12.0.10
• React: 17.0.2
• typescript: 4.5.5

ヘッドレス CMS(microCMS)側の設定

• newsというエンドポイント名で API（リスト形式）を作成します。
• API スキーマの設定で、titleという名前のテキストフィールドを作成します。

接続先情報の取得

• microCMS のコンテンツ管理画面から、APIプレビューを押下し、エンドポイントの URL と、X-MICROCMS-API-KEYの値を控えておきます。

プログラム

pages/index.tsx内容を下記のようにします。
URL と API-KEY のところは環境に合わせて書き換えてください。

pages/index.tsx

import { GetStaticProps } from 'next'
import styles from '../styles/Home.module.css'

export const getStaticProps : GetStaticProps = async() => {
  const newsListApiUrl = "https://[API毎に異なる値].microcms.io/api/v1/news";
  const headers = {"X-MICROCMS-API-KEY":"[管理画面から取得した値]"}
  const response = await fetch(newsListApiUrl,{"headers": headers});
  const json = await response.json()

  return {
    "props":{
      message : json.message ? json.message : "",
      contents : json.contents ? json.contents : []
    }
  }
}

type Props = {
  message?: string,
  contents? : any[]
}

const Home: React.VFC<Props> = (props) => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <ul>
        {(() =>{
          if(props.contents){
            if(props.contents.length){
              let newsList = props.contents.map((contents,i) => {
                return <li key={i}>{contents.title}</li>
              });
              return <ul>{newsList}</ul>
            }else{
              return <div>No Content!!</div>
            }
          }else{
            return <div>Error!!</div>
          }
        })()}
        </ul>
     </main>
    </div>
  )
}

export default Home

ヘッドレス CMS(microCMS)で登録したコンテンツが出力されれば OK です。
　※もっとちゃんとした書き方があると思いますが、ひとまず動かすことを目的としています。

getStaticPropsの部分の処理はサーバサイド（本番環境）ではビルド時に動作し、フロントからのアクセス時には、静的ページとしてレスポンスされます。

Netlify や Vercel などの環境にデプロイすることになると思いますが、Webhook 連携を両側で設定することで、コンテンツを更新した時に、自動で再ビルドをかけることができるようです。