Next.js的 loading.js

在Next.js中，loading.js是一个特殊的文件，它可以帮助你使用React Suspense创建有意义的加载UI。通过使用loading.js，你可以在加载路由内容时显示来自服务器的即时加载状态，并在渲染完成后自动切换到新内容。

loading.js的作用是在路由切换期间显示一个加载状态，以便用户知道页面正在加载中。它可以帮助改善用户体验，特别是在网络较慢或加载时间较长的情况下。

使用loading.js和React Suspense的步骤如下：

1. 首先，在你的Next.js项目中创建一个名为loading.js的文件。
2. 在loading.js文件中，你可以定义一个加载组件，用于显示加载状态。这个组件可以是一个loading动画、一个加载提示或任何你认为合适的UI元素。
3. 在你的路由文件中，使用React Suspense组件包裹需要加载的组件或页面。例如，在Next.js中，你可以使用<Suspense>组件包裹你的页面组件。
4. 在路由切换期间，loading.js文件中定义的加载组件将被显示出来，直到新内容加载完成。
5. 当新内容加载完成后，loading.js文件中定义的加载组件将自动切换到新内容。

通过使用loading.js和React Suspense，你可以为你的Next.js应用程序创建更好的加载体验，并提供更好的用户反馈。

---

Learn more:

1. Next.js 13 and React Suspense: Create a loading component - LogRocket Blog
2. Using loading.js and Suspense in Next 13 - DEV Community
3. How to Create Loading UIs in Next.js 13 Using React Suspense