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

2022/03/14に公開約2,500字

結論

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)を判定して表示を変える

Discussion

ログインするとコメントできます