Next.jsにプログレスバーを導入してみましょう。
GoogleやMediumといった大手が導入しているプログレスバーを手軽に実装するために作成された「NProgress」を、Next.js向けに改良した「nextjs-progressbar」を使用して実現します。
nextjs-progressbarはTypeScriptにも対応しています。
デモページが公開されているので気になる方はご覧ください。
##nextjs-progressbar の導入方法
###インストール
まずはパッケージのインストールを行います。
npm i nextjs-progressbar
or
yarn add nextjs-progressbar###_app.js の編集
次は_app.jsもしくは_app.tsxを編集します。
インポートを宣言します。
import NextNprogress from 'nextjs-progressbar';次にインポートしたコンポーネントを設置します。
<NextNprogress />以上で実装完了です。
###カスタマイズ
パラメータを付けてやることで色や線の太さといったカスタマイズが行えます。
<NextNprogress color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />##おまけ
私の_app.tsxを晒しておきます。上記の説明でイメージが沸かなかった場合に参考にしてください。
import type { AppProps } from "next/app";
import Head from "next/head";
import { Header } from "../components/organisms/Header";
import { Footer } from "../components/organisms/Footer";
import NextNprogress from "nextjs-progressbar";
import "tailwindcss/tailwind.css";
import "../styles/prism.css";
const App = ({ Component, pageProps, router }: AppProps) => {
return (
<>
<Head>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</Head>
<NextNprogress color="#4338ca" stopDelayMs={100} height={2} />
<Header />
<Component {...pageProps} />
<Footer />
</>
);
};
export default App;
Authors & Editors
