Cara Membuat Link di Next.js App Router

Hallo teman-teman developer web!

Dalam dunia pengembangan web, navigasi antar halaman sangatlah penting. Dengan memiliki link yang baik di aplikasi web-mu, pengguna dapat dengan mudah menjelajahi berbagai bagian dari situsmu tanpa kehilangan arah.

Pada artikel ini, kita akan menjelajahi cara membuat link di Next.js App Router. Next.js adalah framework React yang populer digunakan oleh banyak developer web karena kemudahan penggunaannya dan performa yang cepat.

Yap, langsung saja kita ke-pembahasannya🚀

Pengenalan dan Penggunaan Link Component

• 

Pada saat membangun aplikasi web dengan Next.js, pengalaman pengguna menjadi prioritas utama. Salah satu aspek yang penting adalah kemampuan navigasi antar halaman dengan mulus dan cepat. Nah, untuk membantu kamu dalam hal ini, Next.js menyediakan sebuah komponen bawaan yang bernama Link.

Komponen Link pada dasarnya adalah perluasan dari tag HTML <a> yang kita kenal. Tapi, yang membuatnya istimewa adalah kemampuannya untuk memprediksi halaman selanjutnya yang akan kamu kunjungi dan melakukan client-side navigation tanpa perlu memuat ulang halaman secara keseluruhan. Ini membuat pengalaman navigasi di aplikasi web-mu terasa lebih responsif dan cepat.

Untuk menggunakan komponen Link di Next.js, kamu cukup mengimpornya dari modul next/link, dan kemudian mengirimkan atribut href ke dalam komponen tersebut.

Let’s to write code🚀

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Dengan menggunakan kode seperti di atas, kamu sudah membuat sebuah link menuju halaman dashboard di web-mu. Sangat mudah, bukan?

Contoh Lainnya Penggunaan Link Component

Okee, sebelumnya kamu sudah membuat Link menuju halaman dashboard. Namun, Link memiliki banyak contoh penggunaan selain itu. Mari kita bahas satu persatu🚀

Contoh Pertama: Checking Active Links

Kamu bisa menggunakan usePathname() untuk menentukan apakah sebuah link aktif. Misalnya, untuk menambahkan class ke link aktif, kamu bisa memeriksa apakah pathname saat ini cocok dengan href dari link:

'use client'
 
import { usePathname } from 'next/navigation'
import Link from 'next/link'
 
export function Links() {
  const pathname = usePathname()
 
  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            Home
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            About
          </Link>
        </li>
      </ul>
    </nav>
  )
}

Contoh Kedua: Scrolling to an id

Jika kamu ingin menggulir ke id tertentu saat navigasi, kamu bisa menambahkan URL-mu dengan tautan hash (#). Ini dimungkinkan karena <Link> akan dirender sebagai elemen <a>.

<Link href="/dashboard#settings">Settings</Link>
 
// Output
<a href="/dashboard#settings">Settings</a>

Contoh Ketiga: Linking to Dynamic Segments

Ketika kamu ingin menghubungkan ke dynamic segments, kamu bisa menggunakan template literals dan interpolasi untuk menghasilkan daftar link.

import Link from 'next/link'
 
export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Kesimpulan

Dengan menggunakan Link Component di Next.js, kamu dapat membuat navigasi antar halaman menjadi lebih responsif dan cepat. Komponen ini memungkinkan kamu untuk membuat link di aplikasi web-mu tanpa perlu memuat ulang halaman secara keseluruhan, sehingga meningkatkan pengalaman pengguna secara keseluruhan.

Dengan demikian, pengetahuan tentang penggunaan Link Component di Next.js dapat membantu meningkatkan kualitas navigasi dan interaksi pengguna dalam aplikasi web-mu.

Buat kamu yang ingin mempelajari fitur-fitur selanjutnya, kamu bisa ikut kelas di BuildWithAngga. Salah satunya yaitu, Kelas Online Gratis NextJS Basic ataupun yang berupa project base yaitu, Kelas Online Complete React Native Beginner to Pro: Bikin Aplikasi Cari Kantor.

So, ayo kita menjadi expert bersama BuildWithAngga🚀

See you guys!