EstrildaEstrilda

Tech

Next.jsに2行でプログレスバーを導入する

#プログラミング#JAMstack

Next.jsに2行でプログレスバーを導入する

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;

後宮の烏
後宮の烏
Amazon