load splash screen before nextjs

Question

I have a NextJS website and I want to add a Splash Screen for before website is loaded

but because the Splash Screen is also in the NextJS code, it will loading when nextjs rendered on the server and the JS downloaded and executed on the client. in fact, it's useless because it will execute after the page is ready!

how can I do the Splash Screen before react completely loaded and executed ?

I also use nginx for proxy_pass

Answer 1

You can easy use loading.js file in your folder,see documentation - https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Answer 2

use this code

useEffect(() => {
        const handleStart = () => { setPageLoading(true); };
        const handleComplete = () => {
                 setPageLoading(false);
        };
        router.events.on('routeChangeStart', handleStart);
        router.events.on('routeChangeComplete', handleComplete);
        router.events.on('routeChangeError', handleComplete);
    }, [router]);

and use pageLoding for show splash