Memulai Blog dengan Next.js dan MDX

Memiliki blog pribadi adalah salah satu cara terbaik untuk mendokumentasikan perjalanan belajar kamu. Di tulisan ini, kita akan bahas setup dasar blog modern menggunakan Next.js App Router dan sistem konten berbasis MDX.

Kenapa MDX?

MDX menggabungkan kekuatan Markdown yang ringan dengan fleksibilitas komponen React. Kamu bisa menulis konten dengan sintaks Markdown biasa, tapi tetap bisa menyisipkan komponen interaktif kapanpun dibutuhkan.

// Contoh MDX — Markdown + JSX
import { Alert } from '@/components/Alert'
 
Ini paragraf biasa dalam **Markdown**.
 
<Alert type="info">
  Dan ini adalah komponen React yang dirender langsung!
</Alert>

Setup Dasar

Ada dua pilihan populer untuk mengelola konten MDX di Next.js:

1. Velite — ringan, type-safe, cepat
2. Contentlayer — mature, ekosistem besar (deprecated)

Untuk blog ini, kita pakai Velite karena aktif dikembangkan dan outputnya sangat bersih.

Instalasi

npm install velite
npm install -D rehype-pretty-code shiki

Konfigurasi Schema

Buat file velite.config.ts di root project:

import { defineCollection, defineConfig, s } from "velite";
 
const posts = defineCollection({
  name: "Post",
  pattern: "posts/**/*.mdx",
  schema: s.object({
    title: s.string(),
    date: s.isodate(),
    description: s.string(),
    tags: s.array(s.string()).default([]),
    slug: s.path(),
  }),
});
 
export default defineConfig({
  root: "content",
  collections: { posts },
});

Kesimpulan

Dengan setup ini, menambah artikel baru semudah membuat file .mdx baru di folder content/posts/. Selamat nge-blog!