Zenn
➡️

Next.jsのApp Routerで、next-nprogress-barをつかって画面推移のプログレスバーを作る

2024/04/17に公開
Next.js
TypeScript
#
progressbar
#
App Router
#
nextnprogressbar
tech

こんにちは!!

記事を書くのはひさびさです。
今回は、next-nprogress-bar というライブラリを作って、Next.jsのApp Routerで画面推移時に上部に出てくるプログレスバーを簡単に作りたいと思います。

完成イメージ

こんな感じ

つかうライブラリ

next-nprogress-bar を使います。名前の大元にも含まれているnprogress というライブラリをNext.js用にImportできるnext-progressというライブラリがありますが、2023年の夏頃からメンテナンスされておらず、App Routerで使用することができないと思われます。
2024年4月時点でnext-nprogress-barはメンテナンスされており、App Router向けに使用することができるので、今回はこちらを使います。

Installation

npmの場合

npm install next-nprogress-bar

yarnの場合

yarn add next-nprogress-bar

レイアウトにインポート

ここからは2パターンあります。1度読んでいただいて、適切な方をお使いください

Layoutを"use client"しても良い もしくは、すでにされている場合

TypeScript

/app/layout.tsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

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

JavaScript

/app/layout.jsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

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

Layoutを何となく"use client"したくない サーバーサイドの処理を行っている もしくは、コンポーネントを分けたい

TypeScript

/components/ProgressBarProvider.tsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

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

export default ProgressBarProvider;
/app/layout.tsx
import ProgressBarProvider from './ProgressBarProvider';

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>
        <ProgressBarProvider>{children}</ProgressBarProvider>
      </body>
    </html>
  );
}

JavaScript

/components/ProgressBarProvider.jsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

const ProgressBarProvider = ({ children }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default ProgressBarProvider;
/app/layout.jsx
import ProgressBarProvider from './ProgressBarProvider';

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ProgressBarProvider>{children}</ProgressBarProvider>
      </body>
    </html>
  );
}

オプション

さまざまなPropsにオプションがあります。
詳しくはこちら

おわりに

今回はApp Router向けに使用できる画面推移のプログレスバーの実装ができる記事が見当たらなかったので書いてみました。
ありがとうございました!!!

Discussion