Next.js × microCMSでプレビュー機能

はじめに

ブログサイトを作る過程で学んだことを、備忘録目的で投稿しています。
自身は駆け出しエンジニアであり、React自体がほぼ初学者のため、誤った認識・理解をしている可能性があります。
万が一参考にする場合は、上記の点を考慮した上でご一読ください。
また、スタイリングについては割愛しています。

この記事は、過去に投稿したNext.js × microCMSでブログサイト作成した際に学んだことを書き留めるのプロジェクトを元に説明しています。

目的

microCMSのプレビュー機能で投稿前の記事を確認できるようにする。

作業環境

Windows10 Pro x64
Node.js: 20.14.0
npm: 10.3.0
Next.js: 14.2.3（App Router使用）

手順

microCMS設定

microCMSの管理画面から記事投稿のAPI設定画面に移り、「画面プレビュー」項目を開きます。
遷移先URLにブレビュー用のURLを入力します。
例えば、https://ドメイン名/articles/記事IDとして、記事詳細ページを表示するようにしていた場合、https://ドメイン名/articles/{CONTENT_ID}?dk={DRAFT_KEY}と入力します。
入力し終えたら、「変更する」ボタンをクリックします。

Next.js設定

記事詳細ページのファイルに、画面プレビューで使用するdraftKeyを取得できるように変更を加えます。
また、プレビューページはインデックス無効にし、検索結果に表示しないよう設定しました。

src/app/articles/[slug]/page.jsx

import { getArticlesDetail } from "@/libs/microcms";

export async function generateMetadata({ searchParams }) {
  const metadata = {};

  // 下書きのプレビューページではインデックス無効
  if (searchParams.dk) {
    metadata.robots = {
      index: false,
    };
  }
  return metadata;
}

// `searchParams` と `draftKey: searchParams.dk` を追加
export default async function Page({ params, searchParams }) {
  const queries = { draftKey: searchParams.dk };
  const article = await getArticlesDetail(params.slug, queries);
  return (
    <>
      省略
    </>
  );
}

GitHubにプッシュし、Vercelで自動デプロイされるのを待ちます。

画面プレビューを試す

microCMSで記事を作成し下書き保存します、この時点では記事はWeb上に公開されていません。
その後、入力画面右上にある「画面プレビュー」をクリックして表示してみます。
通常であれば問題なく表示されるはずです。
しかし、自分の場合はうまく表示できず、エラーメッセージが表示されました。

原因調査として、開発環境で直接下書きページにアクセスして表示できるか確認してみたところ、問題なく表示できました。
例：http://localhost:3000/articles/rfd_lt0a-_x?dk=rh0MvLWqJH

次に、draftKeyを更新してみたところ解消されました。
microCMS入力画面左上のdraftKey横に更新アイコンがあるのでクリックして更新します。
その後に、改めて画面プレビューを表示したところ、無事表示されました。
noindexもきちんと付与されていますね。

参考

画面プレビュー｜microCMSドキュメント
下書き中の記事を取得する方法は？｜microCMSヘルプ
Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた
Next.js（App Router）とmicroCMSでプレビュー画面を作った