# @bprogress/next 中文文档

规范地址：https://npmcn.com/package/%40bprogress/next/

版本：3\.2\.12
npm 元数据更新时间：2025-04-14T15:15:02.496Z
中文译文更新时间：2026-11-08T13:09:37.412Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bprogress/next
原文对照：https://npmcn.com/package/%40bprogress/next/?lang=original
项目主页：https://bprogress.vercel.app/docs/next/installation
源码仓库：https://github.com/imskyleen/bprogress#main

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：227 kB，23 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：next \>=13\.0\.0，react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2025-02-16T18:29:43.252Z
- 最新版本发布：2025-04-14T15:15:02.291Z
- 近 30 天下载量：1265869（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 0 个）

## 中文简介

NProgress bar like for Next.js 兼容新应用程序目录

## 安装

```sh
npm install @bprogress/next
```

也可以使用：`pnpm add @bprogress/next`、`yarn add @bprogress/next`、`bun add @bprogress/next`

## README

# 下一个.js的进展

兼容 Next.js 的整合进度 **应用** 财务报告和审定财务报表 **/页** 目录.

**下一个进步酒吧和进步V2成为进步!**

## 从 `next-nprogress-bar`

使用时 `next-nprogress-bar`你可以迁移到 `@bprogress/next` 通过跟踪 [移徙指南](https://bprogress.vercel.app/docs/next/migration)。 。 。 .

## 安装

要安装 BProgress, 请运行以下命令:

```bash
npm install @bprogress/next
```

## 导入

### 应用目录

导入到您的 `/app/layout(.js/.jsx/.ts/.tsx)` 文件夹.

```tsx
import { ProgressProvider } from '@bprogress/next/app';
```

### 页目录

导入到您的 `/pages/_app(.js/.jsx/.ts/.tsx)` 文件夹.

```tsx
import { ProgressProvider } from '@bprogress/next/pages';
```

## 使用量

```tsx
<ProgressProvider>...</ProgressProvider>
```

## 示例

### 应用目录

在使用客户端布局中的第一个方法 .

```tsx
// In /app/layout.tsx
'use client';

import { ProgressProvider } from '@bprogress/next/app';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ProgressProvider
          height="4px"
          color="#fffd00"
          options={{ showSpinner: false }}
          shallowRouting
        >
          {children}
        </ProgressProvider>
      </body>
    </html>
  );
}
```

第二方法将客户端组件包起来。 (建议)

创建一个提供商组件, 将您的应用程序与所有需要“ 使用客户端” 的组件包裹在一起, 例如 B Progress 或您不同的上下文...

```tsx
// In /app/providers.tsx
'use client';

import { ProgressProvider } from '@bprogress/next/app';

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <ProgressProvider
      height="4px"
      color="#fffd00"
      options={{ showSpinner: false }}
      shallowRouting
    >
      {children}
    </ProgressProvider>
  );
};

export default Providers;
```

然后将您的应用程序与供应商组件相包装 .

```tsx
// In /app/layout.tsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

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

### 页目录

```tsx
// In /pages/_app.tsx
import type { AppProps } from 'next/app';
import { ProgressProvider } from '@bprogress/next/pages';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ProgressProvider
      height="4px"
      color="#fffd00"
      options={{ showSpinner: false }}
      shallowRouting
    >
      <Component {...pageProps} />
    </ProgressProvider>
  );
}
```

## 有关文件的更多信息

转到 [文档](https://bprogress.vercel.app/docs/next/installation) 学习更多关于B进步.

## 问题

如果你遇到任何问题,不要犹豫 [打开一个问题](https://github.com/imskyleen/bprogress/issues) 或制作 PR [这里](https://github.com/imskyleen/bprogress)。 。 。 .

## 自由主义

麻省理工学院

## 常见问题

### @bprogress/next 是什么？

NProgress bar like for Next\.js 兼容新应用程序目录

### 如何安装 @bprogress/next？

在项目目录运行 npm install @bprogress/next，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（\>=13\.0\.0）、react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bprogress/next 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bprogress/next 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bprogress/next 可以商用吗？

@bprogress/next 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bprogress/next 的下载量有多少？

根据 npm 官方下载统计，@bprogress/next 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,265,869 次，日均约 42,196 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bprogress/next 还在维护吗？

最新版本 3\.2\.12 发布于 2025/04/14（1\.6 年前）；至今共发布 30 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/02/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。