Cara Untuk Membuat Active Link Di React/NextJS

Emang boleh semudah ini??

3 min readNov 4, 2023

Di Dalam beberapa kasus, kalian mungkin akan menemukan navbar seperti contoh di atas, yang mana labelnya akan aktif sesuai dengan halaman dari router/page nya. Tujuannya dibuat seperti ini, adalah untuk memudahkan user untuk mengenali halaman yang sedang aktif saat ini.

Di NextJS, kita bisa menggunakan salah satu hook, yaitu usePathName, karena hook ini bergantung pada browser API, yang dimana browser API itu masuk ke kategori client component, maka kita harus mengubahnya menjadi client component, untuk bisa menggunakan hook tersebut, kita harus menambahkan use client.

"use client"

Kalo kalian masih bingung, kapan saatnya kita menggunakan server component dan kapan saatnya menggunakan client component, kalian bisa cek di website resmi nya nextJS: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns.

Membuat Navbar 👍

Oke, Pada kasus kali ini, kita akan coba membuat navbar dari salah satu design website dari https://codedesign.dev/.

Design Figma nya akan saya taruh di akhir :D

untuk source codenya, kalian bisa salin saja kode yang ada di bawah ini.

"use client"
import Link from "next/link"

export default function Navbar() {
  interface LinkProps = {
    label: string;
    href: string;
  };
  const links: LinkProps[] = [
    { label: "Overview", href: "/overview" },
    { label: "Skills", href: "/skills" },
    { label: "Projects", href: "/projects" },
    { label: "Contact", href: "/contact" },
  ];

  return (
    <nav className="fixed md:px-4 xl:px-0 md:left-0 right-0 flex justify-between items-center max-w-6xl mx-auto md:py-6 z-50">
      <div className="left__navbar hidden md:flex gap-10">
        <div className="block py-4 px-5 text-center rounded-md bg-[#2ba386] text-white">IK</div>
        <ul className="hidden md:flex justify-between items-center gap-10">
          {links.map(({ href, label }, index) => (
            <Link key={index} href={href} className="text-white/[.60]">
              {label}
            </Link>
          ))}
        </ul>
      </div>
      <div className="px-4 py-3 md:py-4 rounded-md bg-[#2ba386] text-white">Punya Project?</div>
    </nav>
  );
}

Menggunakan usePathname() 🥶

Kita hanya perlu import usePathName dari next/navigation, seperti ini

"use client"
import Link from "next/link"
import { usePathName } from "next/navigation"

lalu, tidak lupa untuk panggil hook nya dan disimpan di dalam variabel seperti ini.

export default function Navbar() {
const currentPath = usePathName(); // definisikan disini
console.log({ currentPath }) // agar kita tau outputnya apa

  interface LinkProps = {
    label: string;
    href: string;
  };
//...

Jangan lupa untuk melakukan checking dengan console.log() maka ketika kalian melakukan perpindahan halaman, maka kalian akan mendapatkan output seperti ini.

Step Terakhir 😎

Setelah mendapatkan path namedari pageyang kita akses, maka kita tinggal melakukan logic sederhana, seperti ini,

jika href nya sama dengan currentPath, maka beri dia style text-white font-semibold border-b

{links.map(({ label, href }, index) => (
   <Link key={index} href={href} className={`${href === currentPath ? "text-white font-semibold border-b" : "text-white/[.60]"}`}>
     {label}
    </Link>
  ))}