Nextjs：加载或挂起回退不会在生产中显示

qojgxg4l 于 2023-06-22 发布在其他

关注(0)|答案(1)|浏览(123)

我用nextjs v13将我的个人页面迁移到了应用程序directoy上。
我尝试先在Suspense组件的fallback prop 中添加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>
  );
}

都在当地发展部门工作