nextjs 上的页面加载器答案

【问题标题】：Page loader on nextjsnextjs 上的页面加载器
【发布时间】：2022-01-27 08:11:01
【问题描述】：

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

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

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

抱歉这个含糊的问题，但我不知道从哪里着手解决这个问题，我想它可以通过两种可能的解决方案来解决：

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

【问题讨论】：

这能回答你的问题吗？ Loading Screen on next js page transition

标签： javascript css material-ui next.js

【解决方案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>
      
    } 
    </>
);
}

【讨论】：

【解决方案2】：

在解决这个问题时，有两种方法可以考虑。

单个页面入口/出口（淡出/淡入）可以应用动画，这实际上意味着这些组件可以应用基于 CSS 的过渡，因为已安装路由并将过渡应用到父级（页面级容器）
可以在卸载单个元素时对其进行动画处理。

#1 和 #2 如果你想自己动手，可以看看https://reactcommunity.org/react-transition-group/switch-transition

这两种方法建立在上述想法之上

如果你同意添加 Framer - https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion
带有下一页过渡 - 更侧重于反应过渡组https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions

【讨论】：