nextjs 上的页面加载器

Question

如何使用 Next JS 在同一 Web 应用程序的转换之间创建加载程序页面？

现在，在开发环境中，页面有正常的过渡，这意味着 CSS 已正确应用于每个页面。当将应用程序构建到生产环境时，问题就开始了，例如，当我单击具有链接组件到另一个页面的按钮时，它会显示如下 1 或 2 秒：

1 或 2 秒后，它会相应地呈现：

很抱歉问了这个模糊的问题，但我不知道从哪里开始解决这个问题，我想它会通过两种可能的解决方案来解决：

1. 页面转换之间的加载页面。
2. 在 _app.js 或 _document.js 上做一些事情，但现在我不知道如何开始在这里查找。

Answer 1

你需要从下一个js导入Link来解决渲染问题，如果你想做一个加载屏幕你可以使用钩子，例如：

import {useState, useEffect} from 'react';
import Router from 'next/router';

    function MyApp() {
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    Router.events.on('routeChangeStart', () => setLoading(true));
    Router.events.on('routeChangeComplete', () => setLoading(false));
    Router.events.on('routeChangeError', () => setLoading(false));
    return () => {
      Router.events.off('routeChangeStart', () => setLoading(true));
      Router.events.off('routeChangeComplete', () => setLoading(false));
      Router.events.off('routeChangeError', () => setLoading(false));
    };
  }, [Router.events]);
    
  return (
    <>
    {
      (loading)
      ?
      <p>Loading...</p>
      :
      <p>Home</p>
      
    } 
    </>
);
}