generated at
Preview Mode
Next.jsのPreview Mode


Headless CMS向けの機能
例えばContentfulで書いた記事のプレビューを、実際にその開発中のサービス上で見たい時に便利
普通のSSGのみ場合は、このプレビューを見るためだけに
ビルド→静的コンテンツ生成
の過程を踏む必要があり、かなり面倒
そこでこの機能を使い /api/preview?hoge=piyo とすることでそのページを見ることができる

/pages/api/preview.ts に記述する
普通は、このファイル内ではHeadless CMSのAPIを呼ぶことになるはず
Contentfulとかそういうの
/pages/api/preview.ts
... const content = await fetch(..) // cmsからデータを取得してゴニョる ... res.setPreviewData({ slug: content.id, draftKey: req.query.draftKey, }); res.writeHead(307, { Location: `/${content.id}` }); res.end('Preview mode enabled'); };
]

microCMSというHeadless CMSを使用するときの解説
contentfulを使うときも参考にはなると思う