Cara Marketer Indonesia Pasang Web Share API di Next.js untuk Tombol Share Native Tanpa Widget Vendor 2026

TL;DR: Widget share dari vendor pihak ketiga sering membawa 80-150 KB JavaScript dan tracker yang membebani halaman. Web Share API menggantikan widget tersebut dengan dialog share native sistem operasi, dipanggil cukup lewat navigator.share(). Di Next.js 15, integrasinya butuh satu komponen client kecil dengan fallback salin URL untuk browser yang belum dukung.

Dalam beberapa proyek terakhir, saya melihat satu pola yang berulang: tombol share di blog atau landing page memakai widget dari vendor yang sebenarnya hanya dipakai 1-3% pengunjung. Bobot scriptnya tetap dimuat untuk 100% pengunjung. Saat membongkar bundle Yuanita Sekar dan Aris Setiawan, widget share menyumbang 90-120 KB tanpa korelasi yang jelas dengan trafik referral.

Tahun ini saya beralih memakai Web Share API untuk semua client baru, dengan fallback sederhana untuk browser yang belum dukung. Hasilnya: bundle lebih ringan, dialog share lebih familier (pakai UI native), dan tidak ada tracker pihak ketiga yang masuk ke halaman.

Kapan Web Share API Paling Pas Dipakai

Web Share API menang di skenario mobile, terutama Android dan iOS yang mendominasi trafik Indonesia. Pengguna desktop sebagian besar memakai Chrome dan Edge yang juga sudah dukung. Firefox desktop dan Safari versi lama jadi blind spot yang perlu fallback.

Cek dukungan terbaru di MDN Web Share API sebelum memutuskan. Untuk audience B2B yang dominan desktop, pasang fallback salin URL agar tetap fungsional.

Implementasi di Next.js 15

Buat komponen client di components/atoms/ShareButton.tsx:

"use client";
import { useState } from "react";
import { Share2, Check } from "lucide-react";

type Props = { title: string; url: string };

export function ShareButton({ title, url }: Props) {
  const [copied, setCopied] = useState(false);

  async function handleShare() {
    if (typeof navigator.share === "function") {
      try {
        await navigator.share({ title, url });
      } catch {
        // user cancel, abaikan
      }
      return;
    }
    await navigator.clipboard.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  return (
    <button onClick={handleShare} aria-label="Bagikan halaman">
      {copied ? <Check size={18} /> : <Share2 size={18} />}
      <span>{copied ? "Tersalin" : "Bagikan"}</span>
    </button>
  );
}

Pakai di page:

import { ShareButton } from "@/components/atoms/ShareButton";

<ShareButton title={article.title} url={`https://vitoatmo.com/artikel/${article.slug}`} />

Studi Kasus: Bundle Yuanita Sekar Turun 18%

Saat audit performance website personal branding Yuanita Sekar, widget share lama menyumbang 112 KB JavaScript blocking. Kami ganti dengan komponen ShareButton di atas. Hasil pengukuran setelah deploy:

Klik bahkan naik, kemungkinan karena dialog native lebih familier untuk pengguna mobile dibanding dropdown widget vendor. Angka ini spesifik ke kasus Yuanita, bukan jaminan untuk semua website.

Pertanyaan Umum

Apakah Web Share API bisa share gambar atau file PDF?

Bisa, lewat properti files berisi objek File. Wajib cek navigator.canShare({files}) dulu sebelum panggil navigator.share() karena dukungan file lebih terbatas dibanding share link.

Bagaimana kalau pengguna pakai Firefox desktop?

Firefox desktop belum dukung. Fallback salin URL di kode di atas akan aktif otomatis, jadi tombolnya tetap fungsional, hanya dialognya berbeda.

Apakah Web Share API mempengaruhi SEO?

Tidak langsung. Tapi dengan menghapus widget vendor, bundle JS turun dan LCP membaik. LCP yang lebih cepat adalah faktor Core Web Vitals yang berpengaruh ke peringkat.

Apakah perlu meta tag tambahan?

Tidak. Web Share API membaca title dan url yang dilewatkan saat memanggil fungsi, bukan dari meta tag halaman.

Apa yang Sebaiknya Dilakukan Selanjutnya

Audit semua halaman yang masih pakai widget share vendor. Ganti satu per satu dengan komponen ShareButton. Pasang tracking sederhana (event share_click) untuk memantau apakah jumlah share menurun setelah migrasi. Jika menurun lebih dari 20%, periksa apakah desain tombolnya kurang mencolok atau letaknya tertutup elemen lain.