Apa itu Routing di Next.js

Routing adalah mekanisme yang menentukan halaman apa yang ditampilkan ketika user mengakses sebuah URL.

Dalam React biasa, biasanya kita menggunakan library seperti:

react-router-dom

Namun Next.js memiliki pendekatan yang jauh lebih sederhana yaitu File Based Routing.

Artinya, struktur folder secara otomatis menjadi URL route tanpa perlu konfigurasi tambahan.

Contoh sederhana:

src/app/page.tsx

akan otomatis menjadi route:

/

Dan jika kita membuat file berikut:

src/app/about/page.tsx

maka URL-nya menjadi:

/about

Pendekatan ini membuat routing di Next.js jauh lebih mudah dipahami dan di-maintain.

File Based Routing

Di Next.js App Router, setiap folder di dalam directory:

src/app

merepresentasikan sebuah route.

Contoh struktur folder:

src/app
├── page.tsx
├── about
│   └── page.tsx
├── contact
│   └── page.tsx

Maka URL yang dihasilkan adalah:

/          → page.tsx
/about     → about/page.tsx
/contact   → contact/page.tsx

Contoh isi halaman:

export default function AboutPage() {
  return (
    <main>
      <h1>About Page</h1>
      <p>Ini adalah halaman about.</p>
    </main>
  )
}

Dengan sistem ini kita tidak perlu membuat konfigurasi routing secara manual seperti di React Router.

Nested Route

Next.js juga mendukung nested routing dengan cara membuat folder di dalam folder.

Contoh struktur:

src/app
├── blog
│   ├── page.tsx
│   └── post
│       └── page.tsx

Maka URL yang terbentuk adalah:

/blog
/blog/post

Contoh halaman:

export default function BlogPage() {
  return (
    <main>
      <h1>Blog Page</h1>
    </main>
  )
}

Sedangkan halaman post:

export default function BlogPostPage() {
  return (
    <main>
      <h1>Blog Post</h1>
    </main>
  )
}

Nested routing ini sangat berguna ketika kita memiliki struktur halaman yang kompleks.

Dynamic Route

Dalam banyak aplikasi, kita sering membutuhkan halaman yang dinamis.

Contohnya:

/blog/1
/blog/2
/blog/hello-world

Next.js menyediakan Dynamic Route menggunakan bracket syntax.

Contoh struktur folder:

src/app/blog/[slug]/page.tsx

Maka route yang dihasilkan bisa menjadi:

/blog/nextjs
/blog/tutorial-nextjs
/blog/react-guide

Untuk mengambil parameter slug, kita bisa menggunakan props:

export default function BlogDetail({ params }: { params: { slug: string } }) {
  return (
    <main>
      <h1>Blog: {params.slug}</h1>
    </main>
  )
}

Jika user membuka:

/blog/nextjs

Maka nilai params.slug adalah:

nextjs

Catch All Route

Next.js juga menyediakan Catch All Route untuk menangani route dengan jumlah segment yang tidak terbatas.

Contoh:

src/app/docs/[...slug]/page.tsx

Maka route berikut akan ditangani oleh halaman tersebut:

/docs/install
/docs/setup/linux
/docs/api/auth/login

Contoh penggunaannya:

export default function DocsPage({ params }: { params: { slug: string[] } }) {
  return (
    <main>
      <h1>Docs</h1>
      <p>{params.slug.join("/")}</p>
    </main>
  )
}

Jika user membuka:

/docs/setup/linux

Maka params.slug akan berisi:

["setup", "linux"]

Navigasi Antar Halaman

Untuk berpindah halaman di Next.js, kita menggunakan komponen bawaan bernama:

next/link

Contoh penggunaan:

import Link from "next/link"

export default function HomePage() {
  return (
    <main>
      <h1>Home</h1>

      <Link href="/about">
        Go to About
      </Link>
    </main>
  )
}

Menggunakan Link lebih direkomendasikan dibandingkan tag HTML biasa seperti:

<a>

karena Next.js akan melakukan client-side navigation yang jauh lebih cepat.

Navigasi Menggunakan useRouter

Selain menggunakan Link, kita juga bisa melakukan navigasi secara programmatic menggunakan hook:

useRouter

Hook ini berasal dari package:

next/navigation

Contoh:

"use client"

import { useRouter } from "next/navigation"

export default function ButtonPage() {

  const router = useRouter()

  const goToBlog = () => {
    router.push("/blog")
  }

  return (
    <button onClick={goToBlog}>
      Go to Blog
    </button>
  )
}

Metode yang sering digunakan:

router.push()
router.replace()
router.back()

Penutup

Routing adalah salah satu fitur yang membuat Next.js sangat powerful.

Dengan sistem file-based routing, kita bisa membuat struktur halaman yang kompleks tanpa perlu konfigurasi tambahan seperti di React Router.

Dalam artikel ini kita sudah mempelajari:

• konsep routing di Next.js

• file based routing

• nested route

• dynamic route

• catch all route

• navigasi menggunakan Link

• navigasi menggunakan useRouter

Di artikel selanjutnya kita akan membahas Rendering di Next.js, termasuk perbedaan antara:

• Server Side Rendering (SSR)

• Static Site Generation (SSG)

• Incremental Static Regeneration (ISR)

Topik ini sangat penting karena rendering strategy adalah salah satu keunggulan utama Next.js dibandingkan React biasa.