Bab 3: Menyelami Artikel dengan Rute Dinamis & Render MDX

Kita sudah punya "etalase" yang menampilkan semua artikel kita. Sekarang, saatnya membuka "pintu" agar pengunjung bisa masuk dan membaca setiap artikel secara lengkap. Di bab ini, kita akan membangun halaman detail untuk setiap artikel.

Ini adalah salah satu konsep paling fundamental dan powerful di Next.js: Rute Dinamis. Kita akan membuat satu "template" halaman yang bisa menampilkan konten berbeda-beda, tergantung pada URL yang diakses.

1. Memahami Struktur Rute Dinamis

Di Next.js App Router, untuk membuat rute dinamis, kita menggunakan folder dengan nama yang diapit kurung siku, contohnya [slug].

1. Di dalam folder src/app/blog/, buat folder baru bernama [slug].
2. Di dalam folder [slug] tersebut, buat file baru bernama page.tsx.

Struktur foldermu sekarang akan terlihat seperti ini:

bash

src/app/
└── blog/
    ├── [slug]/
    │   └── page.tsx  # Template untuk /blog/halo-dunia, /blog/tips-react, dll.
    └── page.tsx      # Halaman daftar semua artikel /blog

Folder [slug] ini adalah sebuah placeholder. Next.js akan secara otomatis menangkap bagian dari URL setelah /blog/ dan memberikannya kepada kita sebagai parameter bernama slug.

2. Mengambil Data untuk Satu Artikel

Sama seperti kita membuat getAllPosts, kita perlu fungsi baru untuk mengambil data dari satu artikel spesifik berdasarkan slug-nya.

Buka kembali file src/lib/post-utils.ts dan tambahkan fungsi baru di bawah getAllPosts:

typescript

// src/lib/post-utils.ts
// ... (kode fs, path, matter, dan postsDirectory)
 
// ... (fungsi getAllPosts yang sudah ada)
 
export function getPostBySlug(slug: string) {
  const fullPath = path.join(postsDirectory, `${slug}.mdx`);
  const

Fungsi ini sangat lugas: ia mengambil slug, mencari file .mdx yang cocok, dan mengembalikan frontmatter beserta content (isi artikelnya).

3. Merender Konten MDX Menjadi HTML

Browser tidak mengerti sintaks MDX. Kita butuh sebuah "penerjemah" untuk mengubah string konten MDX kita menjadi komponen React atau HTML yang aman. Di sinilah next-mdx-remote berperan.

A. Instalasi next-mdx-remote

Hentikan server (Ctrl+C) dan jalankan:

bash

npm install next-mdx-remote

B. Membangun Halaman Detail Artikel

Sekarang, mari kita isi file src/app/blog/[slug]/page.tsx yang sudah kita buat tadi.

tsx

// src/app/blog/[slug]/page.tsx
import { getPostBySlug } from "@/lib/post-utils";
import { MDXRemote } from "next-mdx-remote/rsc";
 
// Props yang diterima halaman ini adalah `params`, yang berisi `slug`
type BlogPostPageProps = {
  params

Mari kita bedah kodenya:

1. BlogPostPageProps: Kita mendefinisikan tipe untuk props. Next.js secara otomatis akan memberikan objek params yang berisi segmen dinamis dari URL. Dalam kasus ini, params.slug.
2. getPostBySlug(slug): Kita memanggil fungsi helper kita untuk mendapatkan detail artikel.
3. <MDXRemote source={content} />: Ini adalah komponen dari next-mdx-remote. Kita cukup memberikan content (string MDX) kita ke prop source, dan ia akan melakukan sisanya: mem-parsing dan me-render kontennya menjadi HTML yang aman.
4. className="prose": Ini adalah utility class ajaib dari plugin Tailwind CSS Typography. Kita akan membahasnya lebih dalam di bab selanjutnya, tapi untuk sekarang, ketahuilah bahwa class ini secara otomatis memberikan styling yang indah pada elemen-elemen HTML seperti judul, paragraf, daftar, dan blok kode.

Jalankan kembali npm run dev, navigasi ke /blog, dan klik salah satu artikel. Tadaa! Kamu sekarang akan dibawa ke halaman detail artikel, lengkap dengan judul, tanggal, dan isi konten yang ter-render dengan cantik.

4. (Opsional tapi Penting) Optimasi Build dengan generateStaticParams

Saat ini, Next.js akan men-generate halaman artikel secara dinamis saat pertama kali diakses. Untuk performa terbaik dan SEO, kita bisa memberitahu Next.js untuk men-generate semua halaman artikel ini saat proses build menjadi file-file HTML statis.

Caranya adalah dengan mengekspor fungsi generateStaticParams di page.tsx kita.

Tambahkan kode berikut di file src/app/blog/[slug]/page.tsx:

tsx

// src/app/blog/[slug]/page.tsx
import { getAllPosts, getPostBySlug } from "@/lib/post-utils"; // Tambahkan getAllPosts
import { MDXRemote } from "next-mdx-remote/rsc";
 
// ... (tipe BlogPostPageProps)
 
// Fungsi ini memberitahu Next.js slug apa saja yang ada
export async function generateStaticParams() {
  const posts

Dengan fungsi ini, saat kamu menjalankan npm run build, Next.js akan:

1. Memanggil generateStaticParams.
2. Mendapatkan daftar semua slug (misal: ['halo-dunia', 'tips-react']).
3. Menjalankan komponen BlogPostPage untuk setiap slug tersebut.
4. Menghasilkan file halo-dunia.html dan tips-react.html yang sudah jadi dan siap disajikan secepat kilat dari CDN.

Rangkuman & Langkah Selanjutnya

Hebat! Di bab yang padat ini, kita telah: ✅ Menguasai konsep rute dinamis dengan membuat folder [slug]. ✅ Membuat fungsi helper untuk mengambil data satu artikel. ✅ Menggunakan next-mdx-remote untuk me-render konten MDX dengan aman. ✅ Mengoptimalkan performa dengan generateStaticParams.

Blog kita sudah berfungsi penuh! Pengguna bisa melihat daftar artikel dan membacanya. Namun, tampilannya, terutama untuk blok kode, masih bisa kita tingkatkan secara dramatis.

Di bab selanjutnya, kita akan fokus pada sentuhan akhir profesional: membuat konten artikel terlihat sangat indah dengan Tailwind Typography dan syntax highlighting yang canggih.