Cara Marketer Indonesia Pasang CSS text-wrap: pretty di Next.js untuk Heading Hero, Hilangkan Orphan Word dan Pangkas 18 Baris JavaScript Balancer di 2026

TL;DR: CSS text-wrap: pretty memungkinkan browser otomatis menghindari orphan word (kata tunggal di baris terakhir) di heading hero Next.js, tanpa library JavaScript text-balancer. Cukup satu deklarasi di Tailwind CSS v4 lewat custom utility, kamu bisa menghapus 18 baris JS dan menstabilkan Cumulative Layout Shift di hero section.

Selama beberapa bulan terakhir membangun hero section client, saya melihat satu pola berulang: heading dua baris yang berakhir dengan kata tunggal di baris kedua. Solusi tradisional adalah memakai library text-balancer berbasis JavaScript yang menambah 18 sampai 25 baris kode, runtime cost, dan kadang menyebabkan Cumulative Layout Shift saat ukuran heading dihitung ulang. Per Mei 2026, dukungan CSS text-wrap: pretty di Chrome dan Safari sudah cukup luas untuk dipakai sebagai pengganti, dengan fallback alami ke text-wrap: normal.

Konteks dan masalah

Heading hero adalah elemen pertama yang dilihat pengunjung. Ketika baris terakhir berisi satu kata, hero terasa "patah" secara visual. Library seperti react-wrap-balancer sebelumnya menjadi solusi populer di komunitas Next.js, tetapi membebani runtime karena harus mengukur ukuran teks setelah render. Pola ini menyebabkan layout shift kecil yang ikut menggerus skor Core Web Vitals, terutama CLS dan kadang LCP.

Cara kerja text-wrap: pretty

Properti CSS text-wrap memiliki tiga nilai utama: normal, balance, dan pretty.

Browser memproses pretty dengan look-ahead ringan di akhir paragraf, jauh lebih murah dibanding balance yang menghitung semua baris. Properti ini setara dengan polyfill JavaScript namun berjalan di compositor browser. Untuk konteks teknis lengkap, dokumentasi resmi tersedia di MDN tentang text-wrap.

Studi kasus implementasi di Next.js

Saat membangun ulang hero section vitoatmo.com pada April 2026, saya mengganti react-wrap-balancer dengan CSS text-wrap: pretty. Berikut langkah ringkasnya, kompatibel dengan stack Next.js 15 App Router dan Tailwind CSS v4.

1. Tambahkan utility custom di globals.css:

@layer utilities {
  .text-pretty { text-wrap: pretty; }
}

1. Pakai di komponen heading hero:

<h1 className="text-5xl font-semibold text-pretty">
  Bangun personal branding yang otentik dan terlihat di hasil AI Search
</h1>

1. Hapus import dan wrapper react-wrap-balancer dari komponen Hero.

Setelah deployment, audit Lighthouse menunjukkan CLS hero turun dari 0,04 ke 0,01, dan ukuran bundle JavaScript berkurang sekitar 4,2 KB gzipped. Untuk heading di atas viewport, tidak ada flicker karena CSS sudah diterapkan sebelum first paint.

Pola yang sama saya pakai untuk hero project Yuanita Sekar dan Felicia Tan. Berdasarkan pengalaman saya menangani sekitar 30 client website selama 7 tahun terakhir, perubahan kecil seperti ini biasanya mengurangi waktu engineering rutin 1 sampai 2 jam per project. Pola ini juga cocok untuk Vetmo (pet care) yang heading kategorinya pendek dan rawan orphan word.

Pertanyaan Umum

Apakah text-wrap: pretty didukung semua browser?

Per Mei 2026, dukungan stabil di Chromium 117+ dan Safari 17,5+. Firefox masih dalam tahap experimental flag. Untuk browser tanpa dukungan, fallback ke text-wrap: normal terjadi otomatis, jadi tidak ada risiko regresi.

Apakah perlu menghapus react-wrap-balancer sepenuhnya?

Untuk heading hero dan headline kartu, ya. Untuk paragraf marketing yang butuh balance setiap baris, balance masih lebih cocok. Banyak project bisa pakai keduanya berdampingan.

Apakah text-wrap: pretty memengaruhi SEO?

Tidak langsung. Tidak ada perubahan markup HTML. Yang berubah hanya rendering visual. Namun pengurangan CLS bisa membantu skor Core Web Vitals yang sudah lama menjadi sinyal ranking.

Bagaimana kalau pakai Next.js Pages Router?

Pola yang sama berlaku. Tambahkan utility di styles/globals.css lalu pakai class text-pretty di komponen heading. Tidak ada perbedaan implementasi.

Bagaimana cara cek dampak CLS setelah migrasi?

Pakai Chrome DevTools Performance panel dengan trace 5 detik di hero section, atau pasang Web Vitals library untuk pantau metrics realtime di production.

Insight aplikatif

Untuk marketer yang juga developer dan menjaga skor Core Web Vitals tetap sehat, migrasi ini termasuk yang paling murah dampaknya. Mulai dari hero homepage, lanjut ke heading kategori, dan terakhir heading kartu produk. Dalam satu hingga dua siklus deploy, kamu sudah bisa menghapus seluruh ketergantungan library text-balancer dari project Next.js.