Cara Marketer Indonesia Pasang Popover API Native di Next.js untuk Modal Promo Tanpa Library 2026

TL;DR: Popover API adalah HTML native yang menggantikan modal library di Next.js. Cukup popover="auto" di div dan popovertarget="id" di button, browser handle open/close, fokus, dan top-layer rendering. Per Mei 2026 dukungan browser di atas 94%, aman untuk produksi e-commerce Indonesia.

Saat membangun ulang halaman promo Nalesha untuk koleksi parfum lebaran 2026, saya menghapus satu library modal yang sudah dipakai 2 tahun. Hasilnya: initial JavaScript bundle turun 9,2 KB dan bug "modal tertutup z-index sidebar" yang sudah jadi ticket berulang akhirnya hilang permanen.

Yang menggantikannya adalah Popover API. Satu atribut HTML, nol baris JavaScript untuk fungsi dasar. Artikel ini menjelaskan kenapa marketer dan developer di Indonesia harus serius mempertimbangkan Popover API untuk modal promo, dropdown menu, dan tooltip di proyek Next.js berikutnya.

Kenapa Modal Library Sering Bikin Bug

Setiap library modal yang saya pakai dalam 5 tahun terakhir, mulai dari Headless UI sampai Radix, punya satu masalah arsitektur yang sama. Mereka merender modal di posisi DOM tempat komponen dipanggil, lalu pakai position: fixed dan z-index tinggi untuk muncul di atas. Pendekatan ini pecah saat ada parent dengan overflow: hidden, transform, atau filter. Browser memperlakukan parent-parent ini sebagai stacking context baru, dan modal akhirnya terjebak di dalamnya.

Popover API memperbaiki ini di level browser. Elemen popover dirender di top-layer, sebuah lapisan khusus di atas seluruh dokumen yang kebal terhadap stacking context. Tidak ada z-index arms race, tidak ada portal manual, tidak ada layout shift saat modal muncul, sebuah keuntungan tambahan untuk Core Web Vitals.

Pasang di Next.js 15: 5 Menit Selesai

Berikut implementasi minimal di App Router. Tidak butuh 'use client' untuk fungsionalitas dasar:

// app/promo/page.tsx
export default function PromoPage() {
  return (
    <main>
      <button popovertarget="promo-modal" popovertargetaction="show">
        Lihat Promo Lebaran
      </button>
      <div id="promo-modal" popover="auto" className="rounded-xl p-6">
        <h2>Diskon 30% Koleksi Lebaran</h2>
        <p>Berlaku hingga 30 April 2026.</p>
        <button popovertarget="promo-modal" popovertargetaction="hide">
          Tutup
        </button>
      </div>
    </main>
  );
}

Atribut popover="auto" membuat browser otomatis menutup popover saat user klik di luar (light dismiss) atau menekan Escape. Untuk styling, gunakan pseudo-class :popover-open di Tailwind atau CSS biasa.

Studi Kasus: Migrasi Modal di Nalesha

Saat membangun Nalesha (e-commerce parfum lokal), ada 6 modal aktif di halaman utama: voucher claim, ukuran panduan, review viewer, share product, login prompt, dan banner promo. Library awal menambah 14 KB ke initial bundle dan butuh 3 berbagai komponen wrapper.

Setelah migrasi penuh ke Popover API pada Februari 2026:

Yang tidak terduga: tim CS jadi lebih cepat onboard fitur baru karena tidak perlu memahami abstraksi library. HTML native lebih mudah didiskusikan dengan stakeholder non-teknis.

Pertanyaan Umum

Apakah Popover API mendukung animasi masuk dan keluar?

Ya, lewat properti CSS transition-behavior: allow-discrete dan @starting-style. Browser modern menanganinya tanpa JavaScript tambahan.

Bagaimana fallback untuk browser lama?

Per Mei 2026 dukungan sudah di atas 94% (caniuse.com). Untuk sisa 6%, Anda bisa pasang polyfill resmi dari Oddbird, ukurannya hanya 3 KB gzipped.

Apakah ini menggantikan elemen <dialog>?

Tidak. <dialog> cocok untuk modal blocking dengan focus trap penuh (konfirmasi hapus, login wajib). Popover untuk overlay non-blocking seperti menu, tooltip, share sheet.

Apakah Popover API mempengaruhi SEO?

Konten di dalam popover tetap dirender di HTML dan diindeks Google. Tapi karena display: none saat tertutup, Google menganggapnya konten sekunder. Jangan taruh konten utama di dalam popover.

Mulai dari Komponen yang Paling Banyak Pakai Modal

Ganti dulu satu komponen, ukur dampak bundle, baru migrasi penuh. Untuk tim yang sudah pakai design system, mulai dari atom level: pasang Popover API di komponen Tooltip atau Dropdown dasar. Komponen yang lebih kompleks seperti drawer atau dialog konfirmasi tetap pakai <dialog> atau library sesuai kebutuhan.

Referensi lengkap: MDN Popover API dan web.dev guide.