如何在nextjs 13上制作加载页面

Question

嗨，我试图在网站需要时间加载时显示加载页面。因为它是一个相当大的网站，我认为加载屏幕会提供最好的用户体验，但是我似乎无法弄清楚如何让它在 nextjs 13 上工作。我创建了一个简单的功能组件，上面写着加载...并且有直接将其导入到我的layout.jsx文件夹中。

我正在使用应用程序目录方法，这是相当新的，而且我也是 nextjs 的新人，所以我有点迷失^^

任何建议都会很棒。

谢谢

我的布局如下

layout.jsx

import "./globals.css";
import { Suspense } from "react";
import Loading from "../components/loading/loading";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <Suspense fallback={<Loading />}>{children}</Suspense>
      </body>
    </html>
  );
}

加载Page.js

const LoadingPage = () => {
  return (
    <div className="loading w-screen h-screen bg-red-100">
      <p>Loading...</p>
    </div>
  );
};

export default LoadingPage;

正在加载.js

import LoadingPage from "@/components/loading/loading";

export default function Loading() {
  return <LoadingPage />;
}

Answer 1

在下一个 js 13 中，他们有一个名为“加载 UI”的新功能。您需要在同一文件夹中创建一个名为“loading js”的文件。您可以在这里找到其他详细信息https://beta.nextjs.org/docs/routing/loading-ui

如何在nextjs 13上制作加载页面

问题描述投票：0回答：1

1个回答

最新问题

如何在nextjs 13上制作加载页面

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1