Next.js + microCMSの画面プレビューの実装方法
Next.js AppRouter Draft Modeを使用して、mocroCMS画面プレビューを実装する手順についての備忘録です。
事前準備
Next.js 14.2.0
この記事は、microCMSドキュメント - チュートリアルを前提に作成しています。
環境設定
Next.js標準のprocess.envを使用します。
MY_SECRET_TOKEN=YourSecretId
ソースコード解説
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';
export async function GET(request: Request) {
//URLからクエリパラメータを取得
const { searchParams } = new URL(request.url);
const secret = searchParams.get('secret');
const contentId = searchParams.get("id");
const draftKey = searchParams.get("draftkey");
// シークレットトークンの一致、コンテンツIDとdraftKeyの有無もチェック
if (secret !== process.env.MY_SECRET_TOKEN || !contentId || !draftKey) {
return new Response("Invalid token", { status: 401 });
};
// ドラフトモードを有効化してプレビュー画面にリダイレクト
draftMode().enable();
redirect(`/preview/${contentId}?draftkey=${draftKey}`);
};
このコードは、Next.jsアプリケーション内でドラフトモードを実装するためのものです。
Draft Modeは、公開前のコンテンツをプレビューするための機能です。
/api/draft/へのアクセスを検証
/app/api/draft/***に入力されたURLを検証して、microCMSからのアクセスかを確認し、もし正規のアクセスの場合は、ドラフトモードを有効化してプレビュー表示にリダイレクトします。
import { draftMode } from "next/headers";
import { notFound } from "next/navigation";
import { getDetail } from "@/libs/client";
import Article from "@/components/Article";
interface Props {
params: { postId: string };
searchParams: { draftkey: string };
};
export default async function Page({ params, searchParams }: Props) {
const { isEnabled } = draftMode();
// ドラフトモードの真偽を確認
if (isEnabled) {
const contentId = params.postId;
const draftKey = searchParams.draftkey;
const data = await getDetail(contentId, { draftKey: draftKey });
if (!data) {
notFound()
};
return <Article data={data} /> ;
} else {
notFound();
};
};
このコードでは、ドラフトモードが有効かどうかを確認し、記事データのプレビュー画面を返します。
もしドラフトモードが有効な場合、params.postIdからコンテンツIDを取得し、searchParams.draftkeyからdraftKeyを取得します。
getDetail関数は、コンテンツの詳細を取得します。もし取得できない場合は、notFound関数を呼び出します。
paramsとsearchParamsについて - File Conventions page.js
-
params
An object containing the dynamic route parameters from the root segment down to that page.
-
searchParams
An object containing the search parameters of the current URL.
取得できた場合は、<Article data={post} />:記事データを返します。<Article>の詳細についてはチュートリアルを確認してください。
ドラフトモードが無効な場合は、notFound関数を呼び出します。
参考サイト：Next.jsのDraft Modeを使ってmicroCMSの画面プレビューを実装する
microCMS側の設定
ドキュメント-画面プレビューの設定を参考に、遷移先URLを設定してください。
⚙API設定 -> 画面プレビュー
ローカル環境を利用する場合の遷移先URL
https://localhost:3000/api/draft?secret=YourSecretId&id={CONTENT_ID}&draftkey={DRAFT_KEY}
Discussion