javascript - How to make a loading page on nextjs 13

Hi im trying to get a loading page to show while website is taking the time to load. as it quite a large website I thought a loading screen would provide the best possible user experience however I cannot seem to figure out how to get it to work on nextjs 13. I have created a simple functional ponent that says loading... and have imported it directly into my layout.jsx folder.

I am using the app directory method which is quite new and im also new at nextjs so im a little lost ^^

any advice would be great.

thanks

my layout is as follows

layout.jsx

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

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

LoadingPage.js

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

export default LoadingPage;

Loading.js

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

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

I am using the app directory method which is quite new and im also new at nextjs so im a little lost ^^

any advice would be great.

thanks

my layout is as follows

layout.jsx

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

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

LoadingPage.js

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

export default LoadingPage;

Loading.js

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

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

Share Improve this question asked Jan 30, 2023 at 18:12 Omar 733 silver badges10 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

In the next js 13 they have a new feature called Loading UI. you need to create a file called loading.js in same folder. you can find other details here https://beta.nextjs/docs/routing/loading-ui

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to make a loading page on nextjs 13 - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)