Next.js + Microcms + Cloudflare Pages でどこまで出来るのか試した事の備忘録（2022/12時点）
hrgwtrCloudflare PagesがNextに対応し始めた記事をいくつか目にしていたので、どのくらい出来るのかと、そろそろNext.jsのSSR/ISRとかをちょこっと触ってみようという動機で検証してみました。
hrgwtrNext.13のセットアップや出来ることとかは色々な記事を見て進めました。
hrgwtrローカル環境の立ち上げ。
オフィシャルの記事や他の記事を参考に進めれば特に詰まることもありませんでした。
hrgwtrNext13のappDirectoryを使います。
page.jsにシンプルなfetchとレンダリングを書きました。
こちらはローカルでもCloudflareでもSSRで動作します。
const Page = async (): Promise<ReturnType<React.FC>> => {
const uuid = await fetch("https://uuid.rocks/plain").then(
async (response) => await response.text()
)
return (
<div>
<span>uuid: </span>
<code>{uuid}</code>
</div>
)
}
export default Page
次にMicroCMSのAPIから記事を取得しようと思いました。
このコードはローカルでは問題なく動きます。useもnext（ISR）使いましたがローカルでは問題ありませんでした。
ただ、このコードだとCloudflareでは動きません。エラーが表示されますが、SSRの為画面では詳細がわかりません。Cloudflare側のログの見方も分からなかったので、色々と調べることになりました。
const Page = async (): Promise<ReturnType<React.FC>> => {
const res = await fetch('https://[domain].microcms.io/api/v1/[api]', {
headers: {
'X-MICROCMS-API-KEY': process.env.MICROCMS_API_KYE
},
})
if (!res.ok) {
return <></>
}
const list = res.json()
return (
<div>
{list && list.contents.map((content: any) => {
return (
<div>
<h2>{content.title}</h2>
</div>
)
})}
</div>
)
}
export default Page
色々と試した結果、fetchにURL以外のオプションを渡すとダメなのではと。
そこでCloudflare WorkerにMicroCMSのAPIを経由して結果を返すAPIを作りました。
そうすることでurlのみでfetch出来るコードにしました。
uuidの時とNext側は同じなので、やはり問題なくCloudflare上で実行出来ました。
※Next.jsのAPIでも同じことをしましたが、こちらはダメでした。
hrgwtr色々調べている時にgithubのissueを見つけました。
vercelにもissueを送っていたので、どうやらNext.js自体のバグ？のようです。
まだ、13が出て間もないので仕方ないですね。
hrgwtrということでMicroCMSとの連携色々や、ISRは全く試せていません。
また、Cloudflareのプランごとの成約もあるので、実務に使えるかはわかりません。