关键词：
【中文标题】如何在 Next.js 中实现加载屏幕【英文标题】：How to implement loading screen in Next.js 【发布时间】：2020-07-25 19:37:02 【问题描述】：我是 nextjs 的新手，使用 nextjs v9.3、next-redux-wrapper v5、@material-ui/core v4.2 和 custom express server。
我试图在我的 Nextjs 应用程序中更改路线时实现加载屏幕，因此我使用 framer motion 进行页面之间的转换并且工作正常，但现在 如何在更改路线时使用加载组件？
我用了这些方法，但是没用：
Loading Screen on next js page transition How can I use a loading component instead of nprogress?我目前的实现如下：
_app.js
import React, useEffect from "react";
import ThemeProvider from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core";
import theme from "../lib/theme";
import withRedux from "next-redux-wrapper";
import Provider from "react-redux";
import reduxStore from "../store/store";
import PersistGate from "redux-persist/integration/react";
import AnimatePresence from "framer-motion";
import Navbar from "../components/Navbar";
import Meta from "../components/Meta";
function MyApp(props)
useEffect(() =>
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles && jssStyles.parentNode)
jssStyles.parentNode.removeChild(jssStyles);
, []);
const Component, pageProps, store, router = props;
return (
<ThemeProvider theme=theme>
<CssBaseline />
<Provider store=store>
<PersistGate persistor=store.__PERSISTOR loading=null>
<Meta/>
<Navbar ...props />
<AnimatePresence exitBeforeEnter>
<Component ...pageProps key=router.route/>
</AnimatePresence>
</PersistGate>
</Provider>
</ThemeProvider>
);
export default withRedux(reduxStore)(MyApp);
更新
`___-_-_-_-_my solution_-_-_-_-___`
方法1：在next.js v9.3中我使用framer-motion
import React,
useEffect,
useState,
from "react";
import ThemeProvider as MaterialThemeProvider from "@material-ui/core/styles";
import ThemeProvider as StyledThemeProvider from "styled-components";
import CssBaseline from "@material-ui/core";
import AnimatePresence, motion from "framer-motion";
import theme from "../lib/theme";
import Layout from "../components/Layout";
import Loader from "react-loader-spinner";
function MyApp(props)
const Component, pageProps, router = props;
// blow useState & useEffect for tracking change route
const [isRouteChanging, setIsRouteChanging] = useState(false);
useEffect(() =>
const routeChangeStartHandler = () => setIsRouteChanging(true);
const routeChangeEndHandler = () => setIsRouteChanging(false);
router.events.on("routeChangeStart", routeChangeStartHandler);
router.events.on("routeChangeComplete", routeChangeEndHandler);
router.events.on("routeChangeError", routeChangeEndHandler);
return () =>
router.events.off("routeChangeStart", routeChangeStartHandler);
router.events.off("routeChangeComplete", routeChangeEndHandler);
router.events.off("routeChangeError", routeChangeEndHandler);
;
, []);
// useEffect config material-ui
useEffect(() =>
// Remove the server-side injected CSS.
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles && jssStyles.parentNode)
jssStyles.parentNode.removeChild(jssStyles);
, []);
return (
<StyledThemeProvider theme=theme>
<MaterialThemeProvider theme=theme>
<CssBaseline />
/*animation for each page when route changes*/
<Layout>
isRouteChanging ? (
<motion.div
initial=
opacity: 0,
height: "90vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
animate=
opacity: 1,
exit=
opacity: 0,
>
<Loader
type="Grid"
color=theme.spinnerColor
height=80
width=80
/>
</motion.div>
) : (
<AnimatePresence exitBeforeEnter>
<Component ...pageProps key=router.route />
</AnimatePresence>
)
</Layout>
</MaterialThemeProvider>
</StyledThemeProvider>
);
export default MyApp;
方法 2：在 next.js v10 中，我使用了 "nprogress": "^0.2.0"
import React, useEffect from "react";
import Router from "next/router";
// MUI Core
import CssBaseline from "@material-ui/core/CssBaseline";
import ThemeProvider from "@material-ui/core/styles";
// Utils
import theme from "Utils/theme";
// NProgress
import NProgress from "nprogress";
//Binding events.
Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());
function MyApp( Component, pageProps)
// useEffect config material-ui
useEffect(() =>
// Remove the server-side injected CSS.
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles && jssStyles.parentNode)
jssStyles.parentNode.removeChild(jssStyles);
, []);
return (
<Provider store=store>
<ThemeProvider theme=theme>
<CssBaseline />
<Component ...pageProps />
</ThemeProvider>
</Provider>
);
export default MyApp;
【问题讨论】：
请do not upload images of code 【参考方案1】：我是这样做的。在_app.tsx:
import useRouter from 'next/router';
const MyApp = (
MainComponent,
pageProps,
) =>
const router = useRouter();
const [pageLoading, setPageLoading] = React.useState<boolean>(false);
React.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]);
return (
...
pageLoading
? (<div>Loading</div>)
: <MainComponent ...pageProps />
...
)
【讨论】：
【参考方案2】：这可能会有所帮助，您可以将此组件放在布局组件中并用它包装_app.js 或直接将其导入到_app.js：
import React from 'react';
import Router from 'next/router';
import CustomLoadingScreen from './components/CustomLoadingScreen'; // example
Router.onRouteChangeStart = () =>
console.log('onRouteChangeStart Triggered');
<CustomLoadingScreen />;
;
Router.onRouteChangeComplete = () =>
console.log('onRouteChangeComplete Triggered');
<CustomLoadingScreen />;
;
Router.onRouteChangeError = () =>
console.log('onRouteChangeError Triggered');
<CustomLoadingScreen />;
;
您可以设计<CustomLoadingScreen />，以便在调用时接管设备的整个视图。
【讨论】：
在 Next.js 中实现 Cloudinary 产品库
】在Next.js中实现Cloudinary产品库【英文标题】：ImplementingCloudinaryProductGalleryinNext.js【发布时间】：2021-08-0906:42:25【问题描述】：我正在尝试在我的电子商务-Next.js项目中使用Cloudinary产品库，但很难将其组合在一起。这里是Cloudinary... 查看详情
Next JS : 在 dom 渲染时加载屏幕
...hedomisrendeing【发布时间】：2021-09-0802:29:21【问题描述】：如何显示我自己的加载程序而不是空白的白屏？例如，Tweeter在页面加载时显示徽标，对于Facebook、googleAdSense等也是如此。看这个动图，我想在NextJs里有这样的东西。我猜... 查看详情
如何在android中实现长按屏幕？
】如何在android中实现长按屏幕？【英文标题】：Howtoimplementlongpressonscreeninandroid?【发布时间】：2014-03-1911:27:37【问题描述】：我在滚动视图中使用了表格布局。现在我想在屏幕上长按（即长按屏幕上的任何地方我想做一些动作）... 查看详情
如何在 ASP.NET 页面中实现异步加载？
】如何在ASP.NET页面中实现异步加载？【英文标题】：HowtoimplementasynchronousloadinginASP.NETpage?【发布时间】：2012-02-0623:11:53【问题描述】：ASP.NET页面如何实现异步加载？我的ASP.NET页面中有3个部分。所有部分都是独立的。LoadSection1();... 查看详情
如何在 UITableView 中实现类似 UIImageView 的延迟加载
】如何在UITableView中实现类似UIImageView的延迟加载【英文标题】：HowtoimplementUIImageView-likedelayedloadinginUITableView【发布时间】：2009-11-0312:20:00【问题描述】：背景：我有一个UITableView在每个单元格中显示一个图像。这些图像都是大pdf... 查看详情
您将如何在 Android 应用程序中实现此教程屏幕？
】您将如何在Android应用程序中实现此教程屏幕？【英文标题】：HowwouldyouimplementthistutorialscreeninAndroidapp?【发布时间】：2015-02-1220:47:36【问题描述】：当我第一次启动并打开我的模拟器并想在我的应用程序中包含类似的东西时，... 查看详情
如何使用 VLDn 指令在 NEON 中实现 4 路去交错加载
】如何使用VLDn指令在NEON中实现4路去交错加载【英文标题】：Howtoimplement4-wayde-interleavingloadinNEONusingVLDninstruction【发布时间】：2020-05-1318:29:19【问题描述】：作为参考，我正在查看http://infocenter.arm.com/help/topic/com.arm.doc.dui0489c/DUI0489... 查看详情
如何在 iOS 中实现这种风格？
】如何在iOS中实现这种风格？【英文标题】：HowcanIachievethisstyleiniOS?【发布时间】：2012-06-1814:02:55【问题描述】：在我的应用程序中，我想在我的UITableViewController屏幕中显示一个弹出屏幕，列出一些供用户选择的选项。类似于Face... 查看详情
在 Flutter 的登录屏幕中显示循环进度对话框，如何在 Flutter 中实现进度对话框？
】在Flutter的登录屏幕中显示循环进度对话框，如何在Flutter中实现进度对话框？【英文标题】：ShowCircularProgressDialoginLoginScreeninFlutter,howtoimplementprogressdialoginflutter?【发布时间】：2018-12-2703:41:51【问题描述】：我有一个登录表单，... 查看详情
如何使用 angular2 在 Office 加载项中实现对话框 API？
】如何使用angular2在Office加载项中实现对话框API？【英文标题】：HowtoimplementtheDialogAPIinOfficeAdd-inswithangular2?【发布时间】：2017-08-1301:08:38【问题描述】：我想在我的office插件中实现oauth，因为我找到了officejsdialogapi并通过它发现它... 查看详情
如何在 Flutter Dart 中实现插件架构
】如何在FlutterDart中实现插件架构【英文标题】：HowtoimplementthePluginArchitectureinFlutterDart【发布时间】：2020-02-0914:24:37【问题描述】：我想在FlutterDart中实现一个插件架构。流程如下：1.用户下载应用。2.用户从我们的网站加载插件... 查看详情
Android Studio 如何在 LinearLayout 元素中实现锚链接？
】AndroidStudio如何在LinearLayout元素中实现锚链接？【英文标题】：AndroidStudiohowtoimplementanchorlinksinaLinearLayoutelement?【发布时间】：2020-09-2203:32:45【问题描述】：我有一个页面，它由LinearLayout标签内的几个TextView组成。如何在单击屏... 查看详情
我们可以使用 React Native 在 jitsi meet 中实现“屏幕截图”功能吗
...eet中实现“屏幕截图”功能吗？如果是，我可以知道我们如何实现它。提前致谢【问题讨论】：【参考方案1】：您可以 查看详情
Flutter 按住闪屏 3 秒。如何在 Flutter 中实现闪屏？
】Flutter按住闪屏3秒。如何在Flutter中实现闪屏？【英文标题】：Flutterholdsplashscreenfor3Seconds.HowtoimplementsplashscreeninFlutter?【发布时间】：2018-10-1206:36:29【问题描述】：如何在颤动中显示启动屏幕3秒，然后转到下一个我的登录屏幕。... 查看详情
如何在 react native 中实现 Twitter 个人资料屏幕的 UX，可折叠标题（Sticky TabBar）和可滚动选项卡？
】如何在reactnative中实现Twitter个人资料屏幕的UX，可折叠标题（StickyTabBar）和可滚动选项卡？【英文标题】：HowcanIimplementtheUXofTwitter\'sProfilescreeninreactnative，collapsibleheader(StickyTabBar)withscrollabletabs?【发布时间】：2020-05-0907:31:02【问... 查看详情
如何在android开发中实现屏幕切换
参考技术A屏幕切换指的是在同一个Activity内屏幕间的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为FrameLayout... 查看详情
如何在黑莓中实现搜索功能？
】如何在黑莓中实现搜索功能？【英文标题】：Howtoimplementsearchfunctionalityinblackberry?【发布时间】：2012-05-2206:48:54【问题描述】：我想为黑莓开发一个应用程序，我想在屏幕上添加一个文本框。如果我在该文本框中输入任何单词... 查看详情
如何在 iOS 11 中实现音量快门？
】如何在iOS11中实现音量快门？【英文标题】：HowdoIimplementavolumeshutteriniOS11?【发布时间】：2017-01-1216:16:25【问题描述】：我想在我的相机应用中实现音量快门。当用户按下音量按钮时，我应该得到一个拍照的事件。我正在寻找满... 查看详情