Next.js 13.3.1中如何将进度条代码迁移至layout.tsx

步骤1：确保依赖版本兼容 #

先升级nextjs-progressbar到最新版本，旧版本可能不支持Next.js 13的App Router：

npm install nextjs-progressbar@latest
# 或使用yarn
yarn add nextjs-progressbar@latest

步骤2：在App Router中实现进度条 #

nextjs-progressbar依赖客户端路由事件，必须放在客户端组件中，以下是两种可行实现方式：

方式一：直接将根layout转为客户端组件 #

修改app/layout.tsx，添加'use client'指令后引入进度条：

'use client'

import './globals.css'
import NextNProgress from 'nextjs-progressbar'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* 可根据需求调整进度条参数 */}
        <NextNProgress 
          color="#29D"
          startPosition={0.3}
          stopDelayMs={200}
          height={3}
          showOnShallow={true}
        />
        {children}
      </body>
    </html>
  )
}

方式二：封装独立的客户端进度条组件（推荐） #

如果不想把整个根layout转为客户端组件，可单独封装进度条组件：

1. 创建app/components/ProgressBar.tsx：

'use client'

import NextNProgress from 'nextjs-progressbar'

export default function ProgressBar() {
  return (
    <NextNProgress 
      color="#29D"
      startPosition={0.3}
      stopDelayMs={200}
      height={3}
      showOnShallow={true}
    />
  )
}

2. 在根layout.tsx中引入该组件：

import './globals.css'
import ProgressBar from './components/ProgressBar'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ProgressBar />
        {children}
      </body>
    </html>
  )
}

关键配置说明 #

• showOnShallow: 设置为true时，浅路由跳转（如同一页面内的路由参数变化）也会触发进度条
• stopDelayMs: 页面加载完成后，进度条延迟消失的毫秒数
• color: 进度条的颜色，支持十六进制、RGB等格式自定义
• height: 进度条的高度，单位为像素

内容的提问来源于stack exchange，提问作者kondwaniDavid