使用 Cloudflare Pages 部署 Next.js
date
Apr 23, 2024
slug
deploy-nextjs-by-cloudflare-pages
status
Published
tags
Cloudflare
Next.JS
Frontend
summary
type
Post
這篇緣起於 Vercel 突然調漲，社群開始吹起一股反 Vercel 的浪潮，於是打算趁把個人首頁調整成 App Router 時順便來看看 Next.js 在 Cloudflare Pages 上好不好部署。
先講結論，我覺得沒什麼大問題，設計上蠻完整的，也有 GitHub Integration 可以使用，很有潛力，而且 Cloudflare 本身也有提供 API 可以 purge cache，很有機會能配合 Incremental Cache (use KV or Cache API) 來做到 on-demand revalidation，達到更良好的動靜分離，這塊未來也會花點時間來玩一下。
而專案建立上，Cloudflare 也有提供 CLI Tool 來讓你快速建立起第一個 Next on Pages 專案
next 的部分看起來是基於 create-next-app 做的，所以不會到太陌生。
而 app build 的部分也有提供一個
@cloudflare/next-on-pages library 來處理，至於部署上則是和 worker 一樣交由 wrangler CLI。而最棒的是 boilerplate 上都把 scripts 寫給你了，所以不太需要多設定些什麼。而如果你是走 GitHub Integration 的話則是直接在他們的 dashboard 上面把自己的 repository 連上去就可以了，覺得無痛轉移，很讚！
至於效能上，因為也換成了 App Router 所以平台間的比較好像不太適合，但我個人在兩者間更偏好選 Cloudflare，除了免費方案上很佛心外，CDN cache 可控這點很加分，後續能玩的東西也蠻多的。
最後附上 PageSpeed 的結果
整體 Mobile 在降速的環境下，Performance 那塊還是比以前跑 7x 分相比有進步一些，甚至有些時候可以跑到 9x 分，主要的扣分項是在 TBT，可能也和載入 GA 有點關係 (期待哪天可以轉換到 Partytown)，而 Desktop 上都是滿分，覺得很讚 🫶🏻
實際成果歡迎到 https://maxam.dev 上體驗！