導覽

• 整自己blog #1 基本架構
• 整自己blog #2 Server架構
• 整自己blog #3 Strapi CMS
• 整自己blog #4 Next.js
• 整自己blog #5 Next.js + Tailwind
• 整自己blog #6 Next.js + Strapi
• 整自己blog #7 AWS
• 整自己blog #8 Docker + Route 53 + nginx
• 整自己blog #9 Github + Vercel

正文

今次會講點樣用next.js 去call strapi 既api
首先第一樣野係要係strapi 開一個api token 先
詳細可以refer 返 第3篇

係strapi 搞左一大輪野就可以返黎next.js 度
第一件事係root度開一個.env 既environment variable file先
係拎黎儲低頭先我地generate出黎既token

.env

STRAPI_API_PATH = http://localhost:1337/api/
STRAPI_API_TOKEN = INPUT_YOUR_TOKEN_HERE

Set完之後就可以用process.env.STRAPI_API_PATH同process.env.STRAPI_API_TOKEN 咁去拎返呢兩個variables
同時用.env既好處就係方便gloablly改同埋防止將sensitive 既資料放上github

做完之後正式同strapi傾計
第一部開一個/utils/fetch.tsx

最重要果句係 const res = await fetch(apiRequest, options)
apiRequest 就係我地睇strapi documentation 度得出既api path
上面既例子我仲specify左3樣野 第一樣就係filter，which is 如果cateogry 唔係係 "ALL" 既時候會filter返category.name
第二樣就係根據返個post既publishedAt (publish date) sort返
第三樣野就係返黎既response會俾幾多個result 我地
可以睇到靠strapi 既api 可以慳返唔少CURD既功夫

而options 就係specify 一些default之外既parameter
例如cache: 'no-store' 就係define返next.js點樣cache返同一個request
headers 就係authorization，權限認證，限制返相關人等去request api
最後next 入面既revalidate 當然係next先有既options
係vanilla js 入面fetch 係by default 既function
但next.js 入面會有少許改動
而今次呢個revalidate 就係講緊個server 會cache 呢個result 60秒
如果過左呢個時段既話next.js就會重新去strapi度拎最新既result返黎
寫完呢段之後就可以係需要既地方import 返getPostInfo 呢個function入去啦

而post 都係同樣寫法

特別既地方係strapi 傳返過黎既rich text content 其實係markdown format
方便將一d plain text 變做有格式既內容 包括粗體斜體 引用 貼圖等等都support 到 所以呢度會用markdown 既library 係parse 佢