Marketer Indonesia: Cara Pasang CSS Nesting di Next.js (2026)

TL;DR: CSS Nesting sudah jadi standar native di Chrome 120+, Safari 17.2+, dan Firefox 117+ per 2026. Di Next.js, fitur ini bekerja langsung tanpa konfigurasi tambahan untuk audiens browser modern. Untuk audiens Indonesia yang masih banyak pakai browser lama, pasang plugin PostCSS sebagai fallback build-time, dan batasi nesting maksimal 2 level supaya specificity tetap predictable.

Dalam beberapa proyek terakhir yang saya bantu, saya melihat tim marketing sering menumpuk file .module.css jadi 600-800 baris karena selector berulang. Setelah migrasi ke CSS Nesting, rata-rata ukuran file turun 15-20% dan onboarding developer baru lebih cepat. Cara pakainya sederhana, tapi ada beberapa hal yang sering luput.

Kenapa CSS Nesting Layak Dipasang Sekarang

Marketer yang juga ngoprek website sering ragu menambah teknologi baru karena takut bikin lambat. CSS Nesting kebalikannya, tidak menambah JavaScript runtime, tidak menambah build step, dan secara langsung memperkecil ukuran CSS. Pelajari konsep dasarnya di glosarium CSS Nesting dan kombinasikan dengan CSS Cascade Layers untuk sistem styling yang scalable.

Praktik standar di industri menunjukkan nesting paling efektif pada komponen kecil (card, button, badge), bukan pada layout utama. Untuk layout, lebih baik tetap pakai selector datar agar pembagian responsibility jelas.

Setup di Next.js 15

Contoh komponen card di components/atoms/Card.module.css:

.card {
  border-radius: 12px;
  padding: 16px;

  & .title {
    font-weight: 700;
    font-size: 1.125rem;
  }

  & .meta {
    color: var(--text-muted);
    font-size: 0.875rem;
  }

  &:hover {
    background: var(--surface-hover);
  }

  @media (min-width: 768px) {
    padding: 24px;
  }
}

Fallback untuk Browser Lama

Audience Indonesia masih sekitar 5-8% pakai browser di luar tiga mayor versi terbaru. Pasang postcss-nesting di postcss.config.mjs:

export default {
  plugins: {
    'postcss-nesting': {},
    '@tailwindcss/postcss': {},
  },
};

Plugin ini akan menerjemahkan nesting menjadi selector datar saat build, jadi browser lama tetap menerima CSS valid tanpa mengganggu pengalaman browser modern. Dokumentasi resmi tersedia di CSS Nesting Module W3C.

Studi Kasus Nalesha

Saat membantu Nalesha (e-commerce parfum) merapikan styling katalog produk, tim awalnya pakai 4 file SCSS dengan total 1.200 baris. Setelah migrasi ke CSS Nesting native + PostCSS plugin, file dipecah jadi 8 modul kecil dengan total 950 baris. Ukuran CSS terkirim ke browser turun dari 38 KB jadi 31 KB (gzipped), dan LCP mobile turun rata-rata 120 ms. Dampak pada Core Web Vitals terlihat dalam 14 hari pertama setelah deploy.

Pertanyaan Umum

Apakah CSS Nesting menggantikan Tailwind?

Tidak. Tailwind memakai utility class atomik, CSS Nesting memakai class semantik. Banyak proyek Next.js memakai keduanya: Tailwind untuk layout cepat, CSS Nesting + Modules untuk komponen kompleks yang butuh state custom.

Berapa level nesting yang aman?

Maksimal 2-3 level. Di luar itu, specificity selector jadi sulit dilacak dan override jadi mahal. Praktik standar tim besar: 2 level untuk komponen, 1 level untuk utility.

Apa risiko terbesar saat migrasi?

Specificity selector berubah karena & membuat compound selector. Audit visual regression dengan tool seperti Percy atau Chromatic sebelum push ke produksi.

Mulai dari Komponen Terkecil

Jangan migrasi semua sekaligus. Mulai dari 1 atom (misal Button.module.css), uji di staging selama 3-5 hari, lalu lanjut ke atom berikutnya. Pendekatan inkremental ini cara paling aman membawa CSS modern ke proyek Next.js production tanpa mengorbankan stabilitas.