Bab 2: Menghidupkan Konten, Menampilkan Daftar Artikel

"Panggung" kita sudah siap dari bab sebelumnya. Sekarang, saatnya kita memanggil para "aktor" ke atas panggung. Di bab ini, kita akan melakukan tiga hal penting:

1. Membuat file artikel pertama kita menggunakan format MDX.
2. Membangun "mesin" untuk membaca data dari file-file tersebut.
3. Menampilkan daftar artikel kita di halaman /blog.

Kita akan memperlakukan sistem file (folder di komputermu) seolah-olah itu adalah database kita. Ini adalah teknik yang sangat powerful untuk situs statis!

1. Membuat Artikel MDX Pertama Kita

MDX adalah gabungan dari Markdown dan JSX. Ini memungkinkan kita menulis konten dengan sintaks Markdown yang mudah, sambil tetap bisa menyisipkan komponen React jika diperlukan nanti.

Setiap file MDX akan memiliki dua bagian:

• Frontmatter: Metadata atau "label" dari artikel (judul, tanggal, deskripsi) yang diapit oleh ---.
• Content: Isi artikel itu sendiri.

Mari kita buat!

1. Di root folder proyekmu (sejajar dengan src/), buat folder baru bernama posts.
2. Di dalam folder posts, buat file baru bernama halo-dunia.mdx dan isi dengan kode berikut:

mdx

---
title: 'Halo Dunia, Ini Blog Baruku!'
date: '2024-05-22'
description: 'Ini adalah artikel pertama yang saya tulis di blog canggih yang dibangun dengan Next.js dan MDX.'
---
 
# Selamat Datang di Blog Saya
 
Ini adalah paragraf pertama dari artikel saya. Menulis dengan Markdown itu sangat menyenangkan dan intuitif.
 
Kamu bisa membuat daftar seperti ini:
- Poin satu
- Poin dua
- Poin tiga
 
Dan juga menambahkan blok kode:
```javascript
console.log("Hello from my new blog!");

Hebat! Untuk membuat daftar kita terlihat lebih hidup, buat 1-2 file artikel lagi di dalam folder `posts`, misalnya `tips-react.mdx` dan `kenapa-nextjs.mdx`. Pastikan untuk mengubah isi `frontmatter`-nya agar unik.

## 2. Membaca Data Artikel dengan Helper Function

Bagaimana cara aplikasi Next.js kita membaca file-file `.mdx` tersebut? Kita akan membuat sebuah fungsi helper. Ini adalah "otak" di balik sistem "file-system as a database" kita.

#### A. Instalasi `gray-matter`
Untuk memisahkan *frontmatter* dari konten, kita butuh library kecil yang hebat bernama `gray-matter`.

Hentikan server (Ctrl+C) dan jalankan:
```bash
npm install gray-matter

B. Membuat File Utilitas

1. Di dalam folder src/, buat folder baru bernama lib. Folder ini biasa digunakan untuk menyimpan fungsi-fungsi helper atau logika bisnis.
2. Di dalam src/lib, buat file baru bernama post-utils.ts (ingat, kebab-case!).

Isi file src/lib/post-utils.ts dengan kode berikut:

typescript

// src/lib/post-utils.ts
import fs from "fs";
import path from "path";
import matter from "gray-matter";

Fungsi getAllPosts ini sekarang menjadi satu-satunya sumber kebenaran kita untuk mendapatkan daftar semua artikel.

3. Menampilkan Daftar Artikel di Halaman Blog

Waktunya menampilkan hasil kerja keras kita ke pengguna!

A. Membuat Komponen post-card

Praktik terbaik adalah memecah UI menjadi komponen kecil. Mari buat kartu untuk setiap post.

Buat file baru di src/components/post-card.tsx:

tsx

// src/components/post-card.tsx
import Link from 'next/link';
 
type PostCardProps = {
  slug: string;
  title: string;
  date:

B. Membuat Halaman /blog

Sekarang, kita buat halaman utama yang akan menampilkan semua kartu post.

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

Isi file src/app/blog/page.tsx dengan kode berikut:

tsx

// src/app/blog/page.tsx
import { getAllPosts } from "@/lib/post-utils";
import PostCard from "@/components/post-card";
 
export default function BlogPage() {
  const posts = getAllPosts();
 
  return

Karena BlogPage adalah Server Component secara default, kita bisa langsung memanggil fungsi getAllPosts() di dalamnya. Next.js akan mengeksekusinya di sisi server saat halaman di-request.

Jalankan npm run dev dan buka http://localhost:3000/blog. Voila! Kamu seharusnya melihat daftar semua artikel yang telah kamu buat, ditampilkan dengan rapi dalam kartu-kartu yang bisa diklik.

Rangkuman & Langkah Selanjutnya

Fantastis! Di bab ini, kita telah: ✅ Membuat konten blog nyata dengan format MDX dan frontmatter. ✅ Membangun fungsi helper untuk membaca dan mem-parsing data dari sistem file. ✅ Merancang komponen post-card yang reusable. ✅ Menampilkan daftar artikel yang terurut rapi di halaman /blog.

Tentu saja, saat ini jika kamu mengklik kartu-kartu tersebut, kamu akan mendapatkan error 404. Itu karena kita belum membuat halaman untuk menampilkan isi dari masing-masing artikel.

Itulah yang akan menjadi fokus kita di bab selanjutnya: menguasai rute dinamis dan me-render konten MDX!