Next.js(App Router)でお知らせページを運用する中で、公開済み記事と公開前の下書きプレビューを同じレイアウトで表示する実装が個人の実践例として紹介されています。ヘッドレスCMS「genko.me」を使い、URLクエリパラメータ「draftKey」で下書き表示を切り替える構成で、Next.js 16以降を想定しReact 19、TypeScript、genko.me SDKを利用しています。
「/news」で公開済み記事を6件ずつページネーション表示し、「/news/[id]」で詳細、「/news/[id]?draftKey=...」で下書きプレビューを表示します。公開記事と下書きの表示JSXを共通化し、取得条件・キャッシュ・エラー処理だけを分離する設計にしたとのことです。下書きの取得にはキャッシュを使わず、draftKeyが不正な場合も公開版に自動で切り替えず失敗として表示する仕様にしたと述べています。
出典が伝えている要点
- 対象はNext.js 16以降を想定した実装
- 使用技術はReact 19、TypeScript、genko.me SDK
- 「/news」パスで公開済み記事一覧を6件ずつページネーション表示する
- 「/news/[id]」パスで記事詳細を表示する
- 「/news/[id]?draftKey=...」のURLで下書きプレビューを表示する
- 実装手順はgenko.meでのAPI作成、CLIでの接続、一覧ページ作成、詳細ページ作成、プレビューURL設定の順
- 公開記事と下書きの表示JSXを共通化し、取得条件・キャッシュ・エラー処理のみを分離する設計になっている
- 下書きの取得にはキャッシュを使わない
- draftKeyが不正な場合は公開版に自動で切り替えず、失敗として表示する仕様になっている
原文より
公開・下書きのどちらも/news/[id]で扱えるため、ページ自体を共通にしています。
取得に失敗したときは失敗として表示することで、確認できたと誤解するのを避けます。
出典: zenn.dev