因為一直被 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 上的小小問題

增加了一些奇怪知識 😎 ✨