🐣
【microCMS+Next.js】話題のヘッドレスCMSを使ってみる
記事の目的
microCMSで文字を画面に表示させるまでの手順をまとめました。
参考記事
おおむね以下記事を参考にしました。
実行環境
Windows10 Home
以下記事を参考にWSL2 + Docker環境上でNext.jsの環境を作りました。
microCMSの初期設定
公式チュートリアルを参照してmicroCMSのAPIの作成を行う ※APIは３個までなら無償プランで作成可能ですが、上限を１個追加するたび月額2,200円かかります。
以下設定でAPIを作成した。
API名 - おためしAPI
エンドポイント - testing
APIの型 - リスト形式
APIスキーマ定義
-フィールドID title 、種類 テキストフィールド
-フィールドID content 、種類 テキストエリア
上記設定後に作成したAPIからコンテンツ追加ボタンを押下後、
タイトル・コンテンツの入力エリアが出てくるので
任意文字列を設定して公開する。
Docker環境上で以下をコマンド
next.jsのプロジェクトを準備
docker-compose run --rm app yarn create next-app .
microCMS javaScriptSDKをインストール
home/microcms-sdk/
docker-compose run --rm app yarn add microcms-js-sdk
/libs/client.jsを準備
/libs/client.js
import { createClient } from "microcms-js-sdk";
export const client = createClient({
serviceDomain: 'XXXXXXXXX',// microCMS API作成時に設定したドメイン名 XXXXXXXXX.microcms.io
apiKey: 'YYYYYYYYY', // microCMS APIキー管理画面でAPIキーを取得
});
※APIキーは他人に公開してはいけないものなので、
実践ではベタ書きせずに環境変数から読み込む等、ラッパー手段を用意することになります。
/pages/index.jsを準備
/pages/index.js
import Head from 'next/head'
import Image from 'next/image'
import { client } from "../libs/client";
import styles from '../styles/Home.module.css'
export default function Home({ data }) {
return (
<div className={styles.container}>
<Head>
<title>タイトル</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
{data.map((data) => (
<a>{data.title}</a>
))}
</h1>
<p className={styles.description}>
{data.map((data) => (
<a>{data.content}</a>
))}
</p>
</main>
</div>
)
}
// 以下はビルド時のみ実行される
export const getStaticProps = async () => {
const data = await client.get({ endpoint: "ZZZZZZ"}); // microCMSの基本情報に記載のエンドポイント/v1/ZZZZZZの部分
return {
props: {
data: data.contents, // SDKの型の仕様でcontentsプロパティにデータ配列が格納されています。
},
};
};
サーバー起動してローカルで表示を確認
docker-compose run --rm app sh -c "yarn dev"
ローカルURL microCMS APIに設定した任意文字列が画面に出力されます。
Discussion