841-biborokuWebフロントエンドの備忘録

Cloudflare Pages×Next.jsで実装するmicroCMSのプレビュー画面

CloudflaremicroCMSNext.js

「CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る」で作成した検索ページをもとにmicroCMSのプレビュー画面を作成しました。

バージョン：Next.js v13.5.4（Pages Router）、@cloudflare/next-on-pages CLI v.1.8.6、microcms-js-sdk v2.7.0

microCMSに画面プレビューボタンを表示する

  1. API設定＞画面プレビューを開く
  2. 遷移先URLを設定
    https://プレビュー表示させるドメイン/プレビュー用のページ/?id={CONTENT_ID}&draftKey={DRAFT_KEY}
  3. 画面プレビューボタンの表示をONにする
  4. 変更する
  5. 編集画面に「画面プレビュー」ボタンが表示される

💬余談
ローカルで開発してるときは遷移先URLに「http://localhost:3000/」を設定してすぐ確認できるようにしてました。

プレビュー用ページ

src/プレビュー用ページ/index.tsx

import type {
  GetServerSideProps,
  InferGetServerSidePropsType,
  NextPage,
} from "next";
import { getBlogDetail, getAllCategoryList } from "@/libs/microcms";
import type { Blog, Category } from "@/libs/microcms";
import { NextSeo } from "next-seo";
import { CategoryList } from "@/components/CategoryList";
import { Article } from "@/components/Article";

export const runtime = "experimental-edge";

type Props = {
  post: Blog;
  categories?: Category[];
} & InferGetServerSidePropsType<typeof getServerSideProps>;

const Page: NextPage<Props> = ({ post, categories }) => {
  if (post)
    return (
      <>
        <NextSeo noindex={true} />
        <Article post={post} />
        <CategoryList categories={categories} />
      </>
    );
};
export default Page;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const postId = context.query.id;
  const draftKey = context.query.draftKey;
  const post = postId
    ? await getBlogDetail(`${postId}`, {
        draftKey: `${draftKey}`,
      })
    : null;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  if (!post) {
    return {
      notFound: true,
    };
  }

  const data = {
    post,
    categories,
  };

  return {
    props: data,
  };
};

エッジランタイムの設定

Ensure all server-rendered routes use the Edge Runtime

Cloudflare PagesでSSRするときに必要な設定をプレビューページに設定します。

export const runtime = "experimental-edge";

コンテントIDと下書き状態を取得するdraftKeyのクエリ文字列を取得

const postId = context.query.id;
const draftKey = context.query.draftKey;
const post = postId
  ? await getBlogDetail(`${postId}`, {
      draftKey: `${draftKey}`,
    })
  : null;

getBlogDetail()はmicroCMS SDKのgetListDetail()を使って記事を取得するようにしています。

これで終わりです。

あとはほぼ検索結果ページと同じ仕組みにしているので、簡単に実装ができました。

シェア

Category