导航：首页 > 开发技术 >

怎么在Next.js项目中制作自定义加载屏幕

发表于：2025-01-17 作者：千家信息网编辑

千家信息网最后更新 2025年01月17日，这篇文章主要介绍了怎么在Next.js项目中制作自定义加载屏幕，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。制作自定义加载屏幕组件这部

千家信息网最后更新 2025年01月17日怎么在Next.js项目中制作自定义加载屏幕

这篇文章主要介绍了怎么在Next.js项目中制作自定义加载屏幕，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

制作自定义加载屏幕组件

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

import React from "react";import styles from "./Loading.module.css";function Loading(props) {  return (

);}export default Loading;

加载组件的样式 (CSS)：

.body_loading {  display: flex;  align-items: center;  justify-content: center;  height: 100vh;}.none {  display: none;}.lds_ellipsis {  display: inline-block;  position: relative;  width: 80px;  height: 80px;}.lds_ellipsis div {  position: absolute;  top: 33px;  width: 15px;  height: 15px;  border-radius: 50%;  background: var(--orange);  animation-timing-function: cubic-bezier(0, 1, 1, 0);}.lds_ellipsis div:nth-child(1) {  left: 8px;  animation: lds_ellipsis1 0.6s infinite;}.lds_ellipsis div:nth-child(2) {  left: 8px;  animation: lds_ellipsis2 0.6s infinite;}.lds_ellipsis div:nth-child(3) {  left: 32px;  animation: lds_ellipsis2 0.6s infinite;}.lds_ellipsis div:nth-child(4) {  left: 56px;  animation: lds_ellipsis3 0.6s infinite;}@keyframes lds_ellipsis1 {  0% {transform: scale(0);  }  100% {transform: scale(1);  }}@keyframes lds_ellipsis3 {  0% {transform: scale(1);  }  100% {transform: scale(0);  }}@keyframes lds_ellipsis2 {  0% {transform: translate(0, 0);  }  100% {transform: translate(24px, 0);  }}

因此，您已经成功地使用自定义样式构建了加载屏幕组件，现在是时候在每次路由更改时在 Web 应用程序上呈现它了。

为此，我们将借助 Next.js 路由器事件，您可以侦听 Next.js 路由器内部发生的不同事件。

以下是支持的事件列表：

routeChangeStart(url, { shallow }) - Fires when a route starts to changerouteChangeComplete(url, { shallow }) - Fires when a route changed completelyrouteChangeError(err, url, { shallow }) - Fires when there's an error when changing routes, or a route load is cancellederr.cancelled - Indicates if the navigation was cancelledbeforeHistoryChange(url, { shallow }) - Fires before changing the browser's historyhashChangeStart(url, { shallow }) - Fires when the hash will change but not the pagehashChangeComplete(url, { shallow }) - Fires when the hash has changed but not the page

有关这些事件和其他路由器方法的更多详细信息，您可以访问Next.js 官方文档

借助这些事件，您可以将加载屏幕组件添加到 app.js 中，看看如何：

首先导入{useState, useEffect}from "react"，{useRouter}from"next/router"和您的Loading组件。

import { useState, useEffect } from "react";import { useRouter } from "next/router";import Loading from "../components/Loading";

现在我们将loading使用useState钩子声明变量并使用它进行初始化false，我们将true在路由更改时将其设置为，并在路由更改完成后将其恢复为 false。

我们将把这个逻辑放在useEffecthook 中并设置router为它的依赖项。这意味着每次router更改useEffect钩子内的逻辑都会被执行。

function MyApp({ Component, pageProps }) {const router = useRouter();const [loading, setLoading] = useState(false);useEffect(() => {const handleStart = (url) => {  url !== router.pathname ? setLoading(true) : setLoading(false);};const handleComplete = (url) => setLoading(false);router.events.on("routeChangeStart", handleStart);router.events.on("routeChangeComplete", handleComplete);router.events.on("routeChangeError", handleComplete);  }, [router]);  return (<>                    );}export default MyApp;}

我们将通过loading变量为道具，以我们的Loading组件，以便随时loading为true Loading组件将已经class有display: block当它是false将有class有display: none。