Membangun Fitur Blog dengan Next.js dan Velite

Dalam postingan ini, saya akan berbagi cara saya membangun fitur blog untuk website portfolio menggunakan Next.js, Velite, dan teknologi web modern.

Mengapa Velite?

Velite adalah sistem manajemen konten modern yang bekerja dengan sempurna bersama Next.js. Ini menyediakan:

• Konten yang type-safe dengan schema Zod
• Dukungan Markdown/MDX dengan syntax highlighting
• Generasi statis untuk performa optimal
• Workflow berbasis Git untuk manajemen konten

Fitur Utama

1. Internasionalisasi

Blog mendukung beberapa bahasa menggunakan i18n routing bawaan Next.js:

// Routing dinamis dengan locale
/[locale]/blog/[slug]

2. Optimasi SEO

Setiap postingan blog termasuk:

• Meta tags untuk berbagi sosial
• Data terstruktur untuk mesin pencari
• URL yang bersih dengan slug
• Generasi sitemap

3. Dukungan Markdown

Dukungan markdown penuh termasuk:

• Code blocks dengan syntax highlighting
• Tabel dan daftar
• Gambar dan link
• GitHub Flavored Markdown (GFM)

4. Fitur Love

Fitur engagement sederhana yang:

• Menyimpan hitungan tanpa memerlukan login
• Menggunakan localStorage untuk tracking client-side
• Mencegah love duplikat

Detail Implementasi

Schema Konten

const BlogPostSchema = z.object({
  title: z.string(),
  description: z.string(),
  slug: z.string(),
  date: z.coerce.date(),
  locale: z.enum(['id', 'en']),
  tags: z.array(z.string()).default([]),
  draft: z.boolean().default(false),
  loveCount: z.number().default(0),
});

Markdown Rendering

Menggunakan react-markdown dengan rehype-pretty-code untuk code blocks yang indah:

<ReactMarkdown
  remarkPlugins={[remarkGfm]}
  rehypePlugins={[[rehypePrettyCode, options]]}
>
  {content}
</ReactMarkdown>

Kesimpulan

Membangun blog dengan tools modern membuat prosesnya efisien dan menyenangkan. Kombinasi Next.js, Velite, dan TypeScript menyediakan fondasi yang kuat untuk manajemen konten.

Fitur apa yang ingin Anda lihat dalam sistem blog?