Proyek Mini: Blog Sederhana

Gambaran proyek

Saatnya merangkai semuanya. Kita bangun blog sederhana dengan fitur:

• Daftar artikel di /blog (Server Component + fetch data)
• Halaman artikel dinamis /blog/[slug] (dynamic route + metadata)
• Form komentar (Server Action + validasi Zod)
• Sitemap dan halaman 404 kustom

Struktur file

Halaman artikel lengkap

// app/blog/[slug]/page.tsx
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { tambahKomentar } from "./actions";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const a = await getArtikel(slug);
  return { title: a?.judul ?? "Artikel" };
}

export default async function Artikel({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const artikel = await getArtikel(slug);
  if (!artikel) notFound();

  return (
    <article>
      <h1>{artikel.judul}</h1>
      <p>{artikel.isi}</p>
      <form action={tambahKomentar}>
        <input type="hidden" name="slug" value={slug} />
        <input name="nama" placeholder="Namamu" required />
        <textarea name="komentar" placeholder="Tulis komentar" required />
        <button type="submit">Kirim komentar</button>
      </form>
    </article>
  );
}

Langkah pengembangan

Kerjakan bertahap: daftar artikel dulu, lalu halaman dinamis, lalu metadata, lalu komentar, terakhir sitemap dan 404. Setiap tahap diakhiri npm run build untuk memastikan tidak ada error.

Selamat, kamu sudah menempuh 32 modul Next.js dari nol sampai bisa membangun aplikasi full-stack!

Kesalahan umum pemula

• Langsung ke database tanpa prototipe. Mulai dari data dummy di file. Pola komponennya sama, migrasi ke database nanti jauh lebih mudah.
• Skip npm run build per tahap. Menumpuk semua lalu build di akhir membuat debugging seperti mencari jarum di tumpukan jerami.
• Lupa SEO di proyek akhir. Setelah semua fitur jalan, luangkan waktu untuk metadata, sitemap, dan 404. Itu pembeda blog amatir dan profesional.

Latihan singkat

1. Selesaikan blog mini mengikuti struktur di modul ini sampai npm run build lolos tanpa error.
2. Deploy ke Vercel, daftarkan sitemap ke Google Search Console, dan bagikan link-nya. Ini portfolio pertamamu!

Rangkuman

• Proyek ini merangkai: dynamic route, metadata, Server Action, sitemap, dan 404 kustom.
• Kerjakan bertahap dan akhiri tiap tahap dengan npm run build.
• Mulai dari data dummy, migrasi ke database nanti tanpa mengubah pola komponen.
• Deploy ke Vercel dan daftarkan sitemap: blog pertamamu resmi live!

Catatan teknis: Untuk data, mulai dari array di file atau JSON lokal seperti contoh di modul-modul sebelumnya. Saat siap naik level, ganti getArtikel dengan query database (Prisma/Drizzle) atau CMS headless. Pola komponennya tidak berubah, hanya sumber datanya.