NextJs + TypeScript进度条

13 浏览
0 Comments

NextJs + TypeScript进度条

在我的项目中，我试图使用nprogress添加一个进度条，但是我遇到的所有示例，如这个示例和这个示例，都是针对未使用TypeScript构建的Next.js项目。

在我的项目中，我没有/pages/_app.js文件可以进行配置，如下所示：

import Router from 'next/router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Router.events.on('routeChangeStart', () => NProgress.start()); 
Router.events.on('routeChangeComplete', () => NProgress.done()); 
Router.events.on('routeChangeError', () => NProgress.done());
function MyApp({ Component, pageProps }) {
    return 
}
export default MyApp;

在我的项目中，我的pages/_app.tsx设置如下：

import React from "react";
import type { AppProps } from "next/app";
import "./global.css";
import Router from "next/router";
import NProgress from "nprogress"; //nprogress module
import "nprogress/nprogress.css"; //styles of nprogress
//Route Events.
Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());
export default function MyApp({ Component, pageProps }: AppProps) {
  return (
      
  );
}

进度条能够工作吗？因为目前我使用的方式无法工作。

0