Memulai dengan Next.js dan Markdown

1 min
nextjsmarkdowntutorial

Next.js adalah framework React yang memungkinkan Anda membuat aplikasi web dengan mudah. Salah satu kelebihan Next.js adalah kemampuannya untuk menghasilkan halaman statis (Static Site Generation) yang sangat cepat dan SEO-friendly.

Kenapa Menggunakan File Markdown?

Markdown adalah format penulisan yang sederhana dan mudah dibaca. Beberapa kelebihannya:

  1. Fokus pada konten: Tidak perlu khawatir dengan HTML atau CSS
  2. Portable: File Markdown bisa dibuka di editor mana saja
  3. Versioning: Mudah untuk melakukan version control dengan Git

Cara Kerja Blog Ini

Blog ini menggunakan beberapa teknologi:

  • Next.js untuk framework utama
  • gray-matter untuk parsing frontmatter
  • next-mdx-remote untuk render Markdown ke HTML
  • Tailwind CSS untuk styling
// Contoh kode untuk parse Markdown
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export function getPostBySlug(slug) {
  const fullPath = path.join(process.cwd(), 'content/posts', `${slug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  
  // Parse markdown with frontmatter
  const { data, content } = matter(fileContents);
  
  return {
    slug,
    frontmatter: data,
    content
  };
}

Langkah Selanjutnya

  • Menambahkan fitur pencarian
  • Implementasi kategori dan tag
  • Integrasi dengan sistem komentar

Blogging adalah percakapan, bukan monolog. Dan jika dilakukan dengan benar, blogging menjadi percakapan yang dapat dirasakan oleh jutaan orang.

Author Avatar

Written by Edwin Samodra

"Keep learning and growing every single day"