➡️
Next.jsのApp Routerで、next-nprogress-barをつかって画面推移のプログレスバーを作る
こんにちは!!
記事を書くのはひさびさです。
今回は、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