Menampilkan Daftar Artikel | Proyek: Membangun Blog Profesional dengan Next.js & MDX | Mahir.dev | Mahir.dev Academy

Menampilkan Daftar Artikel | Proyek: Membangun Blog Profesional dengan Next.js & MDX | Mahir.dev | Mahir.dev Academy

src/

posts

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

typescript

// src/lib/post-utils.ts
import fs from "fs";
import path from "path";
import matter from "gray-matter";
 
// Menentukan path ke direktori 'posts'
const postsDirectory = path.join(process.cwd(), "posts");
 
export function getAllPosts() {
  // Membaca semua nama file di dalam direktori 'posts'
  const fileNames = fs.readdirSync(postsDirectory);
 
  const allPostsData = fileNames.map((fileName) => {
    // Membuat slug dari nama file (menghapus ekstensi .mdx)
    const slug = fileName.replace(/\.mdx$/, "");
 
    // Membaca konten file sebagai string
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, "utf8");
 
    // Menggunakan gray-matter untuk mem-parsing frontmatter
    const matterResult = matter(fileContents);
 
    // Menggabungkan data frontmatter dengan slug
    return {
      slug,
      ...(matterResult.data as { title: string; date: string; description: string }),
    };
  });
 
  // Mengurutkan post berdasarkan tanggal (terbaru di atas)
  return allPostsData.sort((a, b) => {
    if (new Date(a.date) < new Date(b.date)) {
      return 1;
    } else {
      return -1;
    }
  });
}

tsx

// src/components/post-card.tsx
import Link from 'next/link';
 
type PostCardProps = {
  slug: string;
  title: string;
  date: string;
  description: string;
};
 
export default function PostCard({ slug, title, date, description }: PostCardProps) {
  return (
    <Link href={`/blog/${slug}`}>
      <div className="border rounded-lg p-4 h-full transition-all hover:border-zinc-400 dark:hover:border-zinc-600 hover:shadow-lg">
        <h2 className="text-xl font-bold mb-2">{title}</h2>
        <p className="text-sm text-zinc-600 dark:text-zinc-400 mb-3">
          {new Date(date).toLocaleDateString("id-ID", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </p>
        <p className="text-zinc-700 dark:text-zinc-300">{description}</p>
      </div>
    </Link>
  );
}

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 (
    <div>
      <h1 className="text-3xl font-bold mb-8">Semua Artikel</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {posts.map((post) => (
          <PostCard
            key={post.slug}
            slug={post.slug}
            title={post.title}
            date={post.date}
            description={post.description}
          />
        ))}
      </div>
    </div>
  );
}