Cara Mendapatkan Respons Markdown dari WordPress REST API

Pendahuluan

WordPress adalah CMS yang sangat populer, tetapi secara bawaan (default) REST API milik WordPress mengembalikan output HTML mentah. Jika Anda membangun frontend modern menggunakan React atau Next.js, menggunakan format Markdown memberikan banyak keuntungan, seperti kontrol penataan gaya yang lebih presisi, ukuran respons yang lebih hemat, dan keamanan yang lebih tinggi terhadap potensi celah XSS.

---

Langkah 1: Memahami Struktur WordPress REST API

Endpoint bawaan WordPress biasanya dapat diakses di:

GET /wp-json/wp/v2/posts

Respons standar berisi properti content.rendered yang berformat HTML terkompilasi. Untuk mengubahnya menjadi Markdown, kita dapat memanfaatkan ekstensi plugin atau membuat filter kustom di berkas functions.php tema Anda.

---

Langkah 2: Menggunakan Filter Kustom di WordPress

Tambahkan potongan kode berikut ke dalam file functions.php pada tema WordPress Anda:

add_action('rest_api_init', function () {
    register_rest_field('post', 'content_markdown', array(
        'get_callback' => function ($post_arr) {
            $content = $post_arr['content']['raw'] ?? '';
            return apply_filters('the_content_markdown', $content);
        },
        'schema' => null,
    ));
});

---

Langkah 3: Mengambil Data dari Next.js Frontend

Setelah API siap, Anda bisa mengambil data secara langsung di komponen Next.js Anda:

interface WordPressPost {
  id: number;
  slug: string;
  title: { rendered: string };
  content_markdown: string;
}

export async function getPostBySlug(slug: string): Promise<WordPressPost | null> {
  const res = await fetch(`https://your-wordpress-site.com/wp-json/wp/v2/posts?slug=${slug}`, {
    next: { revalidate: 3600 }
  });
  
  if (!res.ok) return null;
  const posts = await res.json();
  return posts[0] || null;
}

---

Kesimpulan

Menggunakan Markdown sebagai format perantara antara Headless WordPress dan Next.js menyederhanakan logika rendering komponen, mempermudah pengabaian tag HTML yang tidak diinginkan, serta menjaga payload data tetap bersih dan ringan.