Nextjs：載入或懸念回退不會在生產中顯示
我已使用 nextjs v13 將我的個人頁面遷移到應用程式目錄。
我嘗試先在Suspense 元件的fallback 屬性中新增RSC 載入程序，並新增位於app 目錄中每個路由的路徑中的loading 元件。
// src/app/posts/loading.tsx
import { Container } from '~/components/organisms/container';
export default function Loading() {
return (
<Container>
{/* Add a big loading string with tailind */}
<span className="text-6xl font-bold text-center text-red-500">Loading...</span>
</Container>
);
}
還有這樣的
// src/app/posts/page.tsx
export default async function PostsPage() {
return (
<Container>
<PageHeader
title='Posts'
description="I love to write about things I'm learning.
Blogging is a great way to improve and share knowledge.
And who knows, maybe one day it might help me to write a book!"
/>
<Suspense
fallback={
<Container>
{/* Add a big loading string with tailind */}
<span className='text-6xl font-bold text-center text-red-500'>
Loading...
</span>
</Container>
}
>
{/* @ts-expect-error Server Component */}
<Posts />
</Suspense>
</Container>
);
}
兩人都致力於本地開發
但是它們沒有顯示在我的 vercel 部署中
- 用
Suspense包裝 RSC：此網址 - 使用
loading.tsx檔案：此網址
我在本機使用節點 18.16，在我的 vercel 部署中使用節點 18.x。我還使用預設配置在 vercel 中部署 nextjs 專案。
如果有人需要更多詳細信息，可以在此處找到分支代碼
