Membuat Blog Sederhana dengan Next.js

Pernah nggak sih kamu ingin bikin blog pribadi tapi bingung mulai dari mana? Atau mungkin kamu sudah familiar dengan HTML/CSS tapi ingin mencoba bikin blog yang “lebih keren” pakai React dan bisa dibaca Google (SEO-friendly)?
Tenang, kamu datang ke tempat yang tepat! Kali ini kita akan belajar cara membuat blog statis menggunakan Next.js, dari nol sampai online, cocok banget buat pemula

Di artikel ini, kamu akan belajar bagaimana:

1. Membuat project Next.js dari nol
2. Membaca file markdown sebagai konten blog
3. Menampilkan daftar artikel di homepage
4. Membuka halaman detail artikel dengan routing dinamis
5. Menampilkan HTML dari konten markdown

Dan hasil akhirnya akan berupa blog sederhana yang statis — bisa kamu deploy langsung ke internet!

Persiapan Awal

Software yang Harus Dipasang:

• Node.js (minimal versi 14, disarankan versi LTS)
• VS Code (atau text editor lain)
• Koneksi internet aktif

Inisialisasi Project Baru

Buka terminal dan jalankan:

npx create-next-app blog-sederhana
cd blog-sederhana
npm run dev

Setelah npm run dev, buka browser dan akses:http://localhost:3000
Kalau muncul halaman Next.js default, berarti sukses!

Struktur Folder Next.js

Setelah setup, kamu akan melihat struktur seperti ini:

blog-sederhana/
├─ pages/
│  ├─ index.js         ⟵ Halaman utama (homepage)
│  └─ posts/
│     └─ [slug].js     ⟵ Halaman artikel (dinamis)
├─ public/
│  └─ (gambar/static file)
├─ styles/
├─ posts/              ⟵ Kita buat sendiri: isi artikel markdown
├─ lib/                ⟵ Kita buat sendiri: helper function

Menulis Artikel dalam Format Markdown

Markdown adalah format teks ringan yang mudah ditulis dan dibaca.

Buat Folder posts

Buat folder posts/ di root project.
Tambahkan file baru bernama: hello-world.md

---
title: "Hello World"
date: "2025-07-09"
---

Ini adalah postingan blog pertamaku yang dibuat dengan Next.js dan Markdown!

Memasang Library Tambahan

Agar kita bisa membaca file .md, pasang beberapa library:

npm install gray-matter remark remark-html

• gray-matter → untuk membaca metadata (frontmatter)
• remark & remark-html → untuk mengubah markdown ke HTML

Membaca dan Mengolah Konten Markdown

Buat file baru lib/posts.js, isi dengan:

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getAllPosts() {
  const fileNames = fs.readdirSync(postsDirectory);

  return fileNames.map(fileName => {
    const slug = fileName.replace(/\.md$/, '');
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    const { data } = matter(fileContents);

    return {
      slug,
      ...data,
    };
  });
}

Menampilkan Daftar Artikel di Homepage

Edit file pages/index.js agar bisa menampilkan semua artikel:

import Head from 'next/head';
import Link from 'next/link';
import { getAllPosts } from '../lib/posts';

export async function getStaticProps() {
  const posts = getAllPosts();
  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    
      
        Blog Sederhana
      
      Blog Sederhana
      
    
  );
}

Membuat Halaman Detail untuk Artikel

Next.js punya fitur routing dinamis. Kita buat file:

???? pages/posts/[slug].js

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';

export async function getStaticPaths() {
  const files = fs.readdirSync('posts');
  const paths = files.map((file) => ({
    params: { slug: file.replace('.md', '') },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const filePath = path.join('posts', `${params.slug}.md`);
  const fileContent = fs.readFileSync(filePath, 'utf-8');
  const { data, content } = matter(fileContent);

  const processedContent = await remark()
    .use(html)
    .process(content);
  const contentHtml = processedContent.toString();

  return {
    props: {
      title: data.title,
      date: data.date,
      contentHtml,
    },
  };
}

export default function Post({ title, date, contentHtml }) {
  return (
    

{title}

{date}

 ); }

Menjalankan Kembali

Setelah semua selesai, jalankan kembali server:

npm run dev

Buka http://localhost:3000 dan kamu akan melihat daftar artikel. Klik salah satu judul, maka akan masuk ke halaman detailnya.

Bonus: Menambahkan Gaya (Styling)

Untuk mempercantik tampilan, kamu bisa:

• Tambahkan CSS di styles/globals.css
• Pasang Tailwind CSS
• Gunakan komponen UI seperti shadcn/ui atau Chakra UI

Contoh gaya sederhana:

body {
  font-family: sans-serif;
  padding: 2rem;
  max-width: 700px;
  margin: auto;
}
a {
  color: darkblue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Deploy ke Internet (Vercel)

1. Buat akun di https://vercel.com
2. Klik New Project dan hubungkan ke repo GitHub-mu
3. Klik Deploy

Selesai! Sekarang blog kamu sudah online dan bisa dibagikan ke teman-teman.

Kesimpulan

Dalam tutorial ini kamu telah belajar:

• Membuat project blog dengan Next.js
• Membaca konten dari file markdown
• Menampilkan daftar dan detail artikel
• Men-deploy blog secara gratis ke Vercel

Framework ini sangat cocok untuk kamu yang ingin membuat blog pribadi, dokumentasi, atau bahkan portofolio!