在Nextjs 13.3.1上使用Nextjs进度条

ijnw1ujt 于 2023-06-22 发布在其他

关注(0)|答案(1)|浏览(150)

**如何将下面的nextjs代码添加到新的nextjs的layout.tsx文件中

该文件是一个进度条。当前的文档使用了以前版本的nextjs中的app.js。**

import NextNProgress from 'nextjs-progressbar';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextNProgress />
      <Component {...pageProps} />;
    </>
  );
}

这就是我所尝试的

"use client"
import './globals.css'
import { Inter } from 'next/font/google'
import NextNProgress from 'nextjs-progressbar';
const inter = Inter({ subsets: ['latin'] })

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 className={inter.className}>
        <NextNProgress></NextNProgress>
      {children}</body>
    </html>
  )
}

next.js

来源：https://stackoverflow.com/questions/76137514/using-nextjs-progress-bar-on-nextjs-13-3-1

1条答案

按热度按时间

q3aa05251#

要将进度条代码添加到新的Next.js布局文件（layout.tsx）中，可以修改现有代码，如下所示：

// layout.tsx
import '../styles/globals.css'; // Assuming this is your global styles file
import { Inter } from 'next/font/google';
import NextNProgress from 'nextjs-progressbar';

const inter = Inter({ subsets: ['latin'] });

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

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <NextNProgress />
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </>
  );
}

在本例中，NextNProgress组件放置在Layout组件内部，正好在<html>标记之前。这可确保进度条将呈现在使用此布局的每个页面上。
确保您已经通过运行npm install nextjs-progressbar安装了nextjs-progressbar包。
现在，您可以使用Layout组件作为页面或组件的 Package 器，方法如下：

import Layout from '../path/to/layout';

export default function MyPage() {
  return (
    <Layout>
      {/* Your page content */}
    </Layout>
  );
}

通过这样做，每当您在Next.js应用程序中的路由之间导航时，进度条将显示在页面顶部。

赞(0）回复(0）举报 2023-06-22

我来回答

在Nextjs 13.3.1上使用Nextjs进度条

1条答案

相关问题

热门标签

最新问答