プレビュー機能をどう実装しようか😥

[yutteee]

ブログのプレビューページってどうやって実装するのがいいんかなぁ
案1
/preview/[id]みたいな感じでプレビューページを本番環境に加える
検索で見えちゃったりしたらまずくね?
各ページだけ検索にヒットしないように見たいなのできるんかなぁ
案2
プレビュー用のブランチを切ってデプロイ
変更した時に本番環境と差異が出ないか？
案3
プレビュー用のページを作って、プレビューしたい記事のnotionのidを入力してもらってレンダリング
ユーザーがめんどい作業が必要になる

[yutteee]

Static exportsとSSGって違うみたいですね...
https://blog.arthur1.dev/entry/2023/06/04/184745

jack-blogはstatic exportsを元々使っていた。
buildをしたらSSGでもちゃんと動きそう

[yutteee]

この記事だと、環境変数を使用したSSRを使うのがいいんかなぁ
https://zenn.dev/sinhalite/articles/69cc37dc5b6b93

[yutteee]

いやー、SSGしたいよなぁ
キャッシュするとは言っても、キャッシュが切れてたらローディング長くなるわけだし。

[yutteee]

てかNotionのクライアントだからNext.jsのキャッシュ戦略にうまく乗れなそうなんだよなぁ

[yutteee]

Next.jsのドラフトモードはどうか？
https://nextjs.org/docs/app/building-your-application/configuring/draft-mode

まとめてみる

ヘッドレスCMSで下書きをプレビューしたい場合に使う
ドラフトコンテンツを取得したい場合のみ、Next.jsを動的レンダリングに切り返る

使い方

ルートハンドラーを作成してアクセス

ルートハンドラーを作成することで、ドラフトモードが有効になるようにCookieが設定される。
このCookieを含む後続のリクエストにより、ドラフトモードがトリガーされる。

実際には、このルートハンドラーをヘッドレスCMSから安全に呼び出す必要がある。

These steps assume that the headless CMS you’re using supports setting custom draft URLs. If it doesn’t, you can still use this method to secure your draft URLs, but you’ll need to construct and access the draft URL manually.

おっと？？？
下書き用のURLをサポートしていることを前提としている。
ていうかCMSとアプリケーションでシークレットトークンを共有できる仕組みがあることが前提で話しているな。。

シークレットキーをurlに含めてリクエストしないといけないわけだから、結局これもめんどくさいよね。

[yutteee]

結局案3が一番いいのでは...？
idを入れないとプレビューできないので、特に外部に公開しても問題はなさそうだし。