Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to make a custom loading screen in the Next.js project, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

Make a custom load screen component

This depends entirely on you and the appearance of the screen components you want to load. For example, here are my load components:

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

Load component style (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);}

Therefore, you have successfully built the load screen component with a custom style, and it is time to render it on the Web application each time a routing change occurs.

To do this, we will use Next.js router events, where you can listen for different events that occur inside the Next.js router.

The following is a list of supported events:

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

For more details about these events and other router methods, you can access the official Next.js documentation

With these events, you can add the load screen component to app.js to see how to:

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

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

Now we will use the useState hook to declare the variable for loading and use it to initialize the false. We will set true to when the route changes and restore it to false when the route changes are complete.

We will put this logic in useEffecthook and set router as its dependency. This means that the logic in the useEffect hook is executed every time router changes.

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;}

We will use the loading variable as a prop to our Loading component, so that at any time loading for the true Loading component will have class to have display: block when it is false there will be class to have display: none.

Thank you for reading this article carefully. I hope the article "how to make a custom loading screen in the Next.js project" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.