Open20
Next.js App Router難所
terrierscriptOnly async functions are allowed to be exported in a "use server" file.
"use server"つけたファイルはasync functionしか許されないらしい。constとかの定義出来ない。不便。
terrierscript"use client"の場合はasync function使えない ->ってことはわざわざserver side用とclient side用のファイルをいちいちわけないといけない？
terrierscriptRequestが取れない。
next/headerから無理やりheaderをそれっぽく取り出すことは出来なくもない
import { headers } from "next/headers"
const headerObject = Object.fromEntries(Array.from(headers().entries()))
export const fetchCache = 'default-no-store';
export const dynamic = 'force-dynamic';
本当にserver componentじゃないと使えない。Router Dirと組み合わせたりしたときに使え無さそう
terrierscriptterrierscript/index/page.tsxを作ると起きる？
terrierscriptWarning: Only plain objects can be passed to Client Components from Server Components
export function serializeServerData<T>(data: T): T {
return JSON.parse(JSON.stringify(data))
}
Client ComponentからServer Component呼び出した時。
Internal error: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
useRouter使ってるところは全部変えないとダメ。
next/routerからnext/navigation
terrierscriptappとpagesが混ざったとき
Module not found: Can't resolve '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client.ts'
pages側が"use server"に関わるファイルを触ると起きる？
terrierscript↑これっぽい。use serverはかなり慎重に使わないとダメそう
terrierscript-
https://github.com/orgs/vercel/discussions/1212
app routerを入れるとコケるvercel
terrierscripthydration error
terrierscriptconst NoSSR: FC<PropsWithChildren<{}>> = ({ children }) => {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
if (!isClient) {
return
}
return <>{children}</>
}