因為一直被 aws 扣錢 ( 原本應該是免費半年,但一直用到需要額外花錢的方案 ) 所以決定把專案放到 vercel 上
但發現 vercel 在編譯時
失 敗 了 !!
他的錯誤訊息如下:
是 not-found 的頁面出現問題
但因為不論是在本地或是 aws 上做 npm run build 都沒有問題
所以完全搞不清楚錯在哪!!
問了朋友
朋友說
👦🏻 : not-found.tsx 在 Next.js 中 不能使用 server-only、client-only 不相容的東西
👦🏻 : AI 說,另外一個可能就是,你有用到 useEffect 或是 useState 這類的東西嗎
因為我的 not-found 裡包覆了 layout 的元件及跑馬元件
長這樣
import RootLayout from '@/layouts';
import { NotFoundComp } from '@/components/not-found-comp';
export default function NotFound() {
return (
<RootLayout simple={true}>
<NotFoundComp />
</RootLayout>
);
}
後來開始 try error
先測試是不是 < RootLayout /> 的問題
發現可以編譯!!
那麼就絕對是 < NotFoundComp /> 的問題了
一度以為是
還想說只能用 css 去呈現
但我突然看著我的元件檔名稱
想著如果把他的名稱改掉試試呢
將 /components/not-found-comp 改成 /components/notfound-comp
import RootLayout from '@/layouts';
import { NotFoundComp } from '@/components/notfound-comp'; // 原本是 not-found-comp
export default function NotFound() {
return (
<RootLayout simple={true}>
<NotFoundComp />
</RootLayout>
);
}
結果就編譯成功了!!
才知道這應該是 Vercel 的 bug ( 因為本地跟 aws 都沒問題 >< ) 把我的 not-found-comp 的 component 以為是 not-found page 了
所以才無法編譯
這就是放到 Vercel 上的小小問題
增加了一些奇怪知識 😎 ✨