Next.js 页面跳转进度条自定义配置 | NProgress 使用指南 - 常规

Next.js 页面跳转进度条自定义配置 | NProgress 使用指南

在 Next.js 应用中，页面跳转时通常会显示进度条，这可以提升用户体验，让用户感知到页面正在加载。Next.js 自带简单的进度条，但有时我们需要根据自己的需求进行自定义。

本文将介绍如何使用 NProgress 库来添加并自定义 Next.js 页面跳转进度条。

使用 NProgress 添加进度条

安装 NProgress 库:

npm install nprogress

导入 NProgress 并配置:

在 _app.tsx 文件中导入 NProgress 库，并使用 nprogress.configure() 方法进行配置。该方法接受一个对象参数，用于设置进度条的样式和行为。

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

NProgress.configure({
  minimum: 0.1,
  easing: 'ease',
  speed: 800,
  showSpinner: false,
  barStyle: {
    backgroundColor: '#1890ff',
    height: '2px',
    position: 'fixed',
    top: 0,
    left: 0,
    zIndex: 9999,
  },
});

参数说明:

minimum: 进度条开始显示的最小进度值，默认值为 0.08。
easing: 进度条动画的缓动函数，默认值为 'ease'。
speed: 进度条动画的持续时间，单位为毫秒，默认值为 200。
showSpinner: 是否显示进度条的旋转图标，默认值为 true。
barStyle: 进度条的样式配置，是一个对象，可以设置进度条的背景颜色、高度、位置等属性。

控制进度条的显示和隐藏:

在 _app.tsx 的 componentDidMount 和 componentWillUnmount 生命周期中分别调用 NProgress.start() 和 NProgress.done() 来控制进度条的显示和隐藏。

class MyApp extends App<AppProps> {
  componentDidMount() {
    NProgress.start();
  }

  componentWillUnmount() {
    NProgress.done();
  }
  // ...
}

完整的 _app.tsx 代码示例

import React from 'react';
import App, { AppProps } from 'next/app';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import 'antd/dist/antd.css';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

NProgress.configure({
  minimum: 0.1,
  easing: 'ease',
  speed: 800,
  showSpinner: false,
  barStyle: {
    backgroundColor: '#1890ff',
    height: '2px',
    position: 'fixed',
    top: 0,
    left: 0,
    zIndex: 9999,
  },
});

class MyApp extends App<AppProps> {
  componentDidMount() {
    NProgress.start();
  }

  componentWillUnmount() {
    NProgress.done();
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <ConfigProvider locale={zhCN}>
        <Component {...pageProps} />
      </ConfigProvider>
    );
  }
}

export default MyApp;

总结

本文介绍了如何使用 NProgress 库为 Next.js 页面跳转添加进度条，并提供了自定义进度条样式的方法。您可以根据自己的需求调整进度条的样式和行为。

注意: _app.tsx 文件是 Next.js 应用的根组件，用于包装所有页面组件，所以 NProgress 的配置和控制逻辑应该放在这里。

希望本文能够帮助您更好地了解和使用 NProgress 库。

如果您还有其他问题或需要更深入的讨论，欢迎留言交流。