诚之和:如何在 Next.js 项目中制作自定义加载屏幕

介绍

Next.js 是一个建立在 Node.js 之上的开源开发框架，支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。

我试图在 Next.js 中为我的项目构建一个自定义加载屏幕，所以我尝试谷歌我们如何实现它，经过数小时的搜索，我无法找到适合我需要的解决方案。我在互联网上遇到了一个解决方案，它使用一个名为“nprogress”的库来执行此操作，但它没有提供我想要实现的加载屏幕，因此在浏览 Next.js 文档和这个“nprogress”解决方案后，我能够找出解决问题的方法。我花了很多时间，所以我创建了这个博客来帮助任何想要在更短的时间内轻松地在 Next.js 中实现自定义加载屏幕的人。

制作自定义加载屏幕组件

这部分完全取决于您以及您希望加载屏幕组件的外观。例如下面是我的加载组件：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#201e2f"><span style="color:#f8f8f2"><code><span style="color:#f92672">import</span> React <span style="color:#f92672">from</span> <span style="color:#e6db74">"</span><span style="color:#e6db74">react</span><span style="color:#e6db74">"</span>;
<span style="color:#f92672">import</span> styles <span style="color:#f92672">from</span> <span style="color:#e6db74">"</span><span style="color:#e6db74">./Loading.module.css</span><span style="color:#e6db74">"</span>;

<span style="color:#f92672">function</span> <span style="color:#a6e22e">Loading</span>(<span style="color:#f8f8f2">props</span>) {
  <span style="color:#f92672">return</span> (
    <span style="color:#f8f8f2 !important"><</span><span style="color:#f8f8f2 !important"><span style="color:#f92672">div</span></span> <span style="color:#f8f8f2 !important"><span style="color:#f92672">className</span></span><span style="color:#f8f8f2 !important">=</span><span style="color:#f8f8f2 !important"><span style="color:#e6db74">{</span></span><span style="color:#f8f8f2 !important"><span style="color:#e6db74">props</span></span><span style="color:#f8f8f2 !important"><span style="color:#e6db74">.</span></span><span style="color:#f8f8f2 !important"><span style="color:#e6db74">loading</span></span> <span style="color:#f8f8f2 !important">?</span> <span style="color:#f8f8f2 !important"><span style="color:#f92672">styles</span></span><span style="color:#f8f8f2 !important"><span style="color:#f92672">.</span></span><span style="color:#f8f8f2 !important"><span style="color:#f92672">body_loading</span></span> <span style="color:#f8f8f2 !important"><span style="color:#f92672">:</span></span> <span style="color:#f8f8f2 !important"><span style="color:#f92672">styles</span></span><span style="color:#f8f8f2 !important"><span style="color:#f92672">.</span></span><span style="color:#f8f8f2 !important"><span style="color:#f92672">none</span></span><span style="color:#f8f8f2 !important">}</span><span style="color:#f8f8f2 !important">></span>
      <span style="color:#f8f8f2 !important"><</span><span style="color:#f8f8f2 !important"><span style=&