使用 nprogress 加入換頁進度條

2022 iThome 鐵人賽

DAY 23

Modern Web

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 23 篇

使用 nprogress 加入換頁進度條 - Modern Next.js Blog 系列 #23

14th鐵人賽 next.js nprogress blog nextjs

EasonChang

2022-10-08 22:47:13

1443 瀏覽

這是「Modern Blog 30 天」系列第 23 篇文章。

上一篇優化完了內文圖片效能，這篇我們繼續來改善讀者體感效能，使用 nprogress 來加入換頁進度條！

最終效果如下：

progress bar animation

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day22-custom-image...day23-nprogress

我的個人網站裡也有此系列的好讀版，程式碼更易讀、也支援深色模式和側邊目錄，歡迎前往閱讀！

在 Next.js 安裝 nprogress

pnpm add nprogress
pnpm add -D @types/nprogress

修改 src/pages/_app.tsx：

// ...
// 引入 nprogress/nprogress.css
import 'nprogress/nprogress.css';

// ...
// 引入 NProgress、useRouter、useEffect
import { useRouter } from 'next/router';
import NProgress from 'nprogress';
import { useEffect } from 'react';

// 呼叫 NProgress.configure 來初始化
NProgress.configure({ showSpinner: false });

function MyApp({ Component, pageProps }: AppProps) {
  // 新增下面這塊 useEffect，在 Next.js 換頁時開始 Nprogress 讀條，並在換頁完成時停止
  const router = useRouter();

  // Integrate nprogress
  useEffect(() => {
    router.events.on('routeChangeStart', () => NProgress.start());
    router.events.on('routeChangeComplete', () => NProgress.done());
    router.events.on('routeChangeError', () => NProgress.done());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // ...
}

調整進度條顏色

進度條預設是水藍色的，如果要修改的話能寫 css 改顏色。

新增 src/styles/nprogress-custom.scss：

#nprogress {
  .bar {
    @apply h-1 bg-primary-500;
  }

  .peg {
    @apply shadow-[0_0_10px] shadow-primary-500;
  }
}

修改 src/pages/_app.tsx，在全站引入新的 scss 檔：

import '@/styles/globals.css';
import '@/styles/prism-dracula.css';
import '@/styles/prism-plus.css';
import 'nprogress/nprogress.css';
// 新增下面這行引入 nprogress-custom.scss
import '@/styles/nprogress-custom.scss';

// ...