下一个.js的进展
兼容 Next.js 的整合进度 应用 财务报告和审定财务报表 /页 目录.
下一个进步酒吧和进步V2成为进步!
从 next-nprogress-bar
使用时 next-nprogress-bar你可以迁移到 @bprogress/next 通过跟踪 移徙指南。 。 。 .
安装
要安装 BProgress, 请运行以下命令:
npm install @bprogress/next
导入
应用目录
导入到您的 /app/layout(.js/.jsx/.ts/.tsx) 文件夹.
import { ProgressProvider } from '@bprogress/next/app';
页目录
导入到您的 /pages/_app(.js/.jsx/.ts/.tsx) 文件夹.
import { ProgressProvider } from '@bprogress/next/pages';
使用量
<ProgressProvider>...</ProgressProvider>
示例
应用目录
在使用客户端布局中的第一个方法 .
// 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 或您不同的上下文...
// 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;
然后将您的应用程序与供应商组件相包装 .
// 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>
);
}
页目录
// 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>
);
}
有关文件的更多信息
转到 文档 学习更多关于B进步.
问题
如果你遇到任何问题,不要犹豫 打开一个问题 或制作 PR 这里。 。 。 .
自由主义
麻省理工学院