介绍
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=&