Cara Marketer Indonesia Pasang CSS Container Queries di Next.js untuk Komponen Reusable 2026

TL;DR: CSS Container Queries memungkinkan satu komponen Next.js, misal kartu produk, menyesuaikan layout berdasarkan lebar container induknya, bukan ukuran layar. Tutorial ini menunjukkan cara setup container-type di Tailwind CSS v4 dan App Router. Dari beberapa proyek terakhir, langkah ini memangkas duplikasi style 20 sampai 40 persen.

Saat menyiapkan landing page baru untuk klien Nalesha, saya menyadari kartu produk perlu tampil dua kolom di sidebar promo dan tiga kolom di halaman koleksi. Pendekatan lama, yaitu media query global, memaksa tim menulis dua varian komponen. Saat fitur CSS Container Queries stabil di semua browser utama, pendekatan ini bisa diganti dengan satu komponen yang lebih ringkas.

Artikel ini fokus pada langkah teknis pasang CSS Container Queries di Next.js 15 App Router dengan Tailwind v4. Cocok untuk marketer yang merangkap developer sekaligus pemilik bisnis yang ingin website-nya lebih DRY (Don't Repeat Yourself).

Kenapa Container Queries

Website bisnis di Indonesia umumnya memakai komponen kartu produk, kartu testimonial, dan kartu paket layanan. Ketiganya tampil di banyak halaman dengan lebar container berbeda. Media query level layar gagal menangkap konteks ini karena layar mungkin lebar tapi container kecil (misal sidebar 320px di layar 1440px).

Praktik standar di industri sekarang menempatkan container queries sebagai default untuk komponen reusable. Lihat penjelasan resmi di web.dev tentang Container Queries untuk gambaran teknisnya.

Setup di Next.js 15 + Tailwind v4

Tailwind v4 sudah menyediakan utility @container. Langkah ringkasnya:

Contoh komponen ProductCardGrid:

export function ProductCardGrid({ items }: { items: Product[] }) {
  return (
    <div className="@container">
      <div className="grid gap-4 @sm:grid-cols-2 @lg:grid-cols-3">
        {items.map((p) => <ProductCard key={p.id} product={p} />)}
      </div>
    </div>
  );
}

Komponen di atas otomatis menyesuaikan jumlah kolom berdasarkan lebar wrapper, bukan layar.

Studi Kasus Nalesha

Saat membangun Nalesha (e-commerce parfum), tim memakai komponen ProductCardGrid di halaman koleksi (lebar penuh) dan di sidebar promo (lebar 360px). Sebelum container queries, halaman koleksi tampil tiga kolom tapi sidebar harus pakai komponen berbeda agar tidak terlalu sempit. Setelah migrasi, satu komponen cukup. Hasil: pengurangan jumlah komponen turunan dari 4 menjadi 1, dan pemangkasan CSS sekitar 8 KB.

Pasangan yang sering muncul: komponen yang sama juga dipakai di kartu testimonial dan tampil baik di hero (lebar penuh) dan footer (4 kolom). Untuk mengiringi optimasi ini, periksa juga skor Core Web Vitals lewat Field Data supaya valid di pengguna nyata.

Catatan Implementasi

Tiga hal yang perlu diingat: pertama, browser sangat tua (Chrome di bawah versi 105 atau Safari di bawah 16) tidak mendukung. Sediakan default style tanpa @container. Kedua, container queries bekerja pada lebar (inline-size) lebih sering dipakai daripada tinggi. Ketiga, hindari menumpuk terlalu banyak breakpoint container di satu komponen, karena memperburuk maintainability.

Pertanyaan Umum

Apakah Container Queries memperburuk performa?

Tidak signifikan. Pengukuran di Chrome menunjukkan dampak rendering ada di bawah 1 ms untuk komponen ukuran normal. Performance budget tetap aman.

Apakah perlu polyfill?

Untuk audiens di Indonesia yang mayoritas pakai Chrome Android terbaru, tidak perlu. Tinggalkan default style sebagai fallback.

Bisakah dipakai dengan Tailwind CSS v3?

Bisa, lewat plugin @tailwindcss/container-queries. Tapi rekomendasi tetap upgrade ke Tailwind v4 karena dukungan native.

Penutup

CSS Container Queries menyederhanakan arsitektur komponen di Next.js. Untuk marketer yang merangkap developer, ini berarti waktu maintain CSS turun dan konsistensi visual naik. Mulai dari satu komponen yang paling sering dipakai ulang (biasanya kartu produk atau kartu testimonial), terapkan pola di atas, lalu ukur dampaknya dalam dua minggu.