Belajar Next.js App Router #3: Route Segment & Navigasi Dasar

• Apa Itu Route Segment?
• Membuat Route Segment Baru
• Navigasi Dasar di Next.js
  • Menggunakan Komponen Link
• Navigasi Antar Route Segment
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah memahami struktur folder dan konsep file-based routing pada Next.js App Router. Pada artikel ini, kita akan melanjutkan pembahasan ke konsep yang masih sangat berkaitan, yaitu route segment serta cara melakukan navigasi dasar antar halaman di Next.js.

Pemahaman tentang route segment dan navigasi sangat penting, karena hampir semua aplikasi web pasti memiliki lebih dari satu halaman dan membutuhkan mekanisme perpindahan halaman yang baik.

Apa Itu Route Segment?

Pada Next.js App Router, route segment adalah setiap bagian folder di dalam direktori app/ yang merepresentasikan potongan URL.

Sebagai contoh, jika kita memiliki struktur folder berikut:

app/blog/page.tsx

Maka blog adalah sebuah route segment yang menghasilkan URL:

/blog

Jika kita memiliki struktur folder yang lebih dalam:

app/blog/detail/page.tsx

Maka terdapat dua route segment, yaitu blog dan detail, yang menghasilkan URL:

/blog/detail

Setiap folder di dalam app/ selalu menjadi bagian dari URL, kecuali folder khusus yang akan kita bahas di materi selanjutnya.

Membuat Route Segment Baru

Untuk memahami konsep route segment dengan lebih jelas, kita akan mencoba membuat beberapa route baru.

Silahkan teman-teman buat struktur folder berikut:

app/products/page.tsx

Kemudian isi file page.tsx tersebut dengan kode sederhana:

export default function ProductsPage() {
    return (
        <div className="flex flex-col items-center pt-50 justify-center">
            <h1>Halaman Products</h1>
            <p>Ini adalah halaman products.</p>
        </div>
    )
}

Jika server masih berjalan, silakan buka browser dan akses: http://localhost:3000/products.

Maka halaman Products akan tampil. Dari sini kita bisa melihat bahwa route segment langsung terbentuk dari nama folder.

Navigasi Dasar di Next.js

Setelah memahami route segment, selanjutnya kita akan membahas cara berpindah antar halaman atau navigasi.

Pada Next.js, navigasi antar halaman sebaiknya tidak menggunakan tag HTML <a> biasa, melainkan menggunakan komponen Link yang sudah disediakan oleh Next.js. Komponen ini memungkinkan navigasi yang lebih cepat tanpa melakukan reload halaman secara penuh.

• Menggunakan Komponen Link

  Sekarang kita akan mencoba membuat navigasi dari halaman utama ke halaman Products.

  Buka file berikut:

  app/page.tsx
  

  Kemudian ubah kodenya menjadi seperti berikut:

  import Link from 'next/link'
  
  export default function HomePage() {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center p-4">
        <div className="max-w-md w-full text-center">
          {/* Judul */}
          <h1 className="text-3xl font-bold mb-8">
            Halaman Home
          </h1>
  
          {/* Deskripsi */}
          <p className="mb-10">
            Ini adalah contoh navigasi sederhana menggunakan Next.js Link
          </p>
  
          {/* Menu Navigasi */}
          <div className="space-y-4">
            <Link 
              href="/about"
              className="block p-4 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors border border-blue-200"
            >
              <span className="font-medium">Ke Halaman About</span>
            </Link>
  
            <Link 
              href="/products"
              className="block p-4 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-colors border border-green-200"
            >
              <span className="font-medium">Ke Halaman Products</span>
            </Link>
          </div>
  
          {/* Keterangan */}
          <p className="mt-10 text-sm">
            Klik link di atas untuk navigasi antar halaman
          </p>
        </div>
      </div>
    )
  }
  

  Sekarang, ketika kita mengklik salah satu link di atas, Next.js akan berpindah ke halaman yang dituju tanpa melakukan reload halaman.

  

• Navigasi Antar Route Segment

  Komponen Link tidak hanya digunakan untuk halaman utama, tetapi bisa digunakan untuk berpindah ke route mana pun yang telah kita buat.

  Sebagai contoh, jika kita memiliki route /about, maka kita bisa menambahkan navigasi seperti berikut:

  <Link href="/about">Ke Halaman About</Link>
  

  Dengan pendekatan ini, navigasi menjadi lebih cepat dan pengalaman pengguna menjadi lebih baik.

Kesimpulan

Pada artikel ini, kita telah mempelajari konsep route segment pada Next.js App Router serta cara melakukan navigasi dasar menggunakan komponen Link. Kita juga telah mencoba membuat route baru dan menghubungkannya dengan halaman lain menggunakan navigasi bawaan Next.js.

Pemahaman tentang route segment dan navigasi ini akan menjadi dasar sebelum kita melangkah ke pembahasan berikutnya, yaitu dynamic route dan penggunaan parameter pada URL di Next.js App Router.

Terima Kasih