Panduan Bikin Blog Sendiri dengan Next.js, App Router dan Contentlayer

Pernah kepikiran bikin blog pribadi? Tapi bukan yang pake WordPress, bukan yang dari template, tapi blog bikinan lu sendiri, dari stack modern kayak Next.js + Markdown?

Project ini gua bikin khusus buat lu yang pengen:

• Punya blog yang simple, clean, dan custom 100%.
• Belajar bikin blog dari nol dengan Next.js (App Router).
• Nulis artikel pakai Markdown, tapi tetap dinamis.
• Gak mau ribet styling pake Tailwind, cukup CSS Modules aja.

Gua bikin project ini sebagai eksperimen pribadi, tapi ternyata hasilnya cukup solid buat dijadikan starting point siapa aja yang mau bangun blog modern. Open source, clean, dan bisa langsung lu adaptasi.

# Stack & Tools yang Dipakai

Berikut teknologi yang gua pakai, semuanya modern dan cocok buat dev zaman now:

• Next.js 15 dengan App Router
• Contentlayer buat ngebaca file .mdx dan convert ke data blog
• CSS Modules, bukan Tailwind (biar belajar styling manual lagi)
• MDX buat nulis artikel, sekaligus bisa disisipin React Component
• Vercel untuk deploy super cepat dan gratis

# Kenapa Stack Ini Cocok Buat Belajar?

1. App Router = Routing Masa Depan

Next.js sekarang udah mengarahkan semuanya ke App Router. Buat lu yang baru mulai, ini saat yang tepat buat belajar routing model terbaru — bisa nested layout, loading handler, error boundaries, dan segment control. Gak ribet tapi powerful.

2. Contentlayer = Markdown CMS Lokal

Daripada setup CMS kayak Sanity atau Strapi, Contentlayer langsung baca file .mdx dari folder. Tapi bedanya, dia kasih lu Typed Content. Artinya, lu bisa pakai TypeScript buat akses konten blog dengan aman.

3. CSS Modules = Back to Basics

Lu bakal belajar bikin styling komponen satu per satu. Gak ada magic class flex justify-between. Ini cocok buat ngelatih skill CSS dasar dan struktur komponen secara rapi.

4. Static Site, No Backend

Gak perlu database. Gak ada admin panel. Semua konten lu tulis di folder /Content/posts, dan site bakal dibuild statically. Cepat, ringan, dan hemat biaya hosting.

# Apa Aja yang Bisa Lu Pelajari dari Project Ini?

1. Struktur Blog Dinamis

Lu bisa lihat langsung gimana caranya:

• Bikin halaman list artikel (/posts)
• Bikin halaman detail berdasarkan slug (/posts/[slug])

Ambil data dari Markdown pake Contentlayer

2. Frontmatter dan Metadata

Semua artikel pakai frontmatter seperti ini:

markdownSalin
---
title: 0 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
desc: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
image: /posts/thumb.jpg
video: https://youtube.com/@bayumahadika
date: 2024-10-27T18:23:45.098Z
---

Frontmatter ini otomatis jadi props di komponen, dan Contentlayer bantu validasi datanya.

3. Layout Dinamis via App Router

Lu bisa eksplor layout parent-child yang disediakan App Router: Global layout di /app/layout.tsx

4. Simulasi konten otomatis via seeder

Gak perlu bikin artikel dummy satu per satu. Cukup jalankan:

shSalin
yarn seed

…dan folder /Content/posts lu langsung keisi. Ini solusi super praktis buat:

• Testing pagination
• Preview SEO
• Cek tampilan blog sebelum produksi

# Struktur Folder

plaintextSalin
/Components
    ├── Card
    ├── CodeBlock
    ├── Icons
    └── RenderMarkdown
/Content
    └── posts              # Semua artikel MDX lu di sini
/seeders
    ├── posts.js           # Seeder dummy artikel blog
    └── index.js           # Script seedernya
/app
    ├── page.tsx           # Halaman utama (landing)
    └── posts
        ├── page.tsx       # List artikel
        └── [slug]
            └── page.tsx   # Detail artikel
/Utils                     # Kumpulan utilitas
    └── paginateData       # Function paginasi data/post

Lu bisa langsung clone dan lihat struktur ini di GitHub-nya.

# Cara Pakai Seeder Otomatis

1. Clone project ini:

bashSalin
git clone https://github.com/bayumahadika/nextjs-blog.git
cd nextjs-blog

2. Install dependencies:

bashSalin
yarn

3. Jalankan seeder:

shSalin
yarn seed

4. Jalankan local dev server:

plaintextSalin
yarn dev

Dan... boom, blog lu udah keisi artikel demo. Cocok buat eksplorasi fitur tanpa mikirin konten duluan.

# Live Demo & Source Code

• Live Preview: nextjs-blog-eight-brown-29
• GitHub Repo: github.com/bayumahadika/nextjs-blog

Lu bisa langsung clone, oprek, terus deploy ke Vercel. Dalam hitungan menit, blog lu udah online.

# Next Steps

Kalau lu mau ngembangin dari sini, bisa tambahin:

• Dark mode toggle
• Pagination
• Fitur kategori/tag
• Search bar
• Integrasi komentar
• Halaman project / about

Gua sendiri masih anggap ini project “jalan-jalan”, jadi gak semua fitur gua lengkapin. Tapi udah cukup jadi pondasi kuat buat bikin blog sendiri yang scalable dan maintainable.

# Penutup

Bikin blog sendiri itu bukan cuma soal punya tempat nulis. Tapi juga proses belajar bikin produk digital dari nol. Dengan stack kayak Next.js + Contentlayer + CSS Modules, lu bisa punya blog yang:

• Cepat
• Clean
• Custom
• Dan lu ngerti betul dalemannya

Project ini gua bikin buat eksplorasi, tapi semoga bisa jadi starter kit buat lu yang pengen mulai nulis sambil ngoding.