[Next.js入門] 選択しているタブの色を変える

結論

useRouterを使う!
公式ドキュメント

この記事について

Next.jsで表示しているページに合わせてリンクの色を変える方法のメモになります
方法としては useRouter.pathname で現在表示しているURLを取得し、
classNameの中で表示している/していない場合でクラス名を区別します

動作環境

• node.js: v16.11.1
• Next.js: 12.1.0
• tailwindcss: ^3.0.23

Layoutコンポーネントを作成

プロジェクトフォルダ直下に components フォルダを追加し、
Layout.jsx を作成します

components/Layout.jsx

import Link from "next/link";
import { useRouter } from "next/router";

const navigation = [
  { name: "Red", href: "/red" },
  { name: "Blue", href: "/blue" },
  { name: "Green", href: "/green" },
];

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default function Layout() {
  // routerを定義
  const router = useRouter();

  return (
    <div className="flex justify-center my-12">
      <nav className="flex-1 px-2 pb-4 space-y-1">
        {navigation.map((item) => (
          <Link key={item.name} href={item.href}>
            <a>
              <div
                className={classNames(
                  // 現在表示されているURLを取得
                  router.pathname.startsWith(item.href)
                  // 表示中かどうかでクラス分け
                    ? "bg-gray-700 text-white"
                    : "text-gray-700",
                  "group flex items-center px-2 py-2 text-base font-medium rounded-md"
                )}
              >
                {item.name}
              </div>
            </a>
          </Link>
        ))}
      </nav>
    </div>
  );
}

pages配下に適当なファイルを追加

pages/ に下記の3ファイルを追加し、それぞれのコンポーネントからLayoutコンポーネントを呼び出します

• red.jsx
• blue.jsx
• green.jsx

pages/red.jsx

import Layout from "../components/Layout";

export default function Red() {
    return <Layout></Layout>;
}

pages/blue.jsx

import Layout from "../components/Layout";

export default function Blue() {
    return <Layout></Layout>;
}

pages/green.jsx

import Layout from "../components/Layout";

export default function Green() {
    return <Layout></Layout>;
}

index.jsも合わせて修正する

pages/index.js

import Layout from "../components/Layout";

export default function Home() {
  return <Layout></Layout>;
}

実行結果

useRouterを使うことで結構簡単にタブの色を変えることができました！
よくわからずにuseStateを使おうとして苦労していたので、
ちゃんとドキュメント読もうと思いました。。

参考

Next.js公式ドキュメント
Next.jsで今の場所（current url）を判定して表示を変える