Ambil User-Agent dengan Cara Membaca Headers di Server Component Next Js

Ditulis oleh Next.js

Pakai headers() dari next/headers untuk membaca User-Agent di Server Component Next.js App Router. Fungsi ini hanya berjalan di server, jadi panggil di Server Component, Route Handler, atau Server Action, bukan di Client Component.

import { headers } from "next/headers";

export default async function Page() {
  const list = await headers();
  const ua = list.get("user-agent") ?? "unknown";
  const auth = list.get("authorization");

  return <p>{ua}</p>;
}

Sejak Next.js 15, headers() bersifat async. Kamu wajib await sebelum memanggil .get().

Langkah Membaca Headers yang Sering Dipakai

Lewatkan props dari client. Baca header langsung di server agar tidak bocor logika deteksi perangkat.

1. Import fungsi dari paket yang benar.

import { headers } from "next/headers";

2. Panggil await headers() lalu ambil nilainya dengan .get(nama-header).

const list = await headers();
const userAgent = list.get("user-agent");

3. Tangani nilai null dan samakan huruf. Nama header tidak case-sensitive, tapi biasakan huruf kecil.

const ua = (list.get("user-agent") ?? "").toLowerCase();
const isMobile = ua.includes("mobile");

Header yang paling sering dipakai:

  • user-agent untuk deteksi browser atau perangkat.
  • referer untuk mengetahui halaman asal.
  • authorization untuk token Bearer.
  • x-forwarded-for untuk perkiraan IP di balik proxy.

BACA JUGA:

Tabel Perilaku Headers dan Rendering

Memanggil headers() membuat rute memakai dynamic rendering. Next.js tidak bisa mengunci HTML-nya saat build karena nilainya berubah tiap request.

Kasus Perilaku Catatan
headers() di page Rute jadi dinamis Cocok untuk personalisasi UA
cookies() Rute jadi dinamis API mirip, sumber beda
searchParams di page Rute jadi dinamis Berasal dari URL, bukan header

Bedanya, params segmen dinamis seperti /blog/[slug] tidak selalu memaksa seluruh rute jadi dinamis. headers() dan cookies() membaca request aktif, sehingga cache statis tidak berlaku.

Kesalahan Umum dan Batasannya

Kesalahan paling sering adalah memanggil headers() di Client Component. Hasilnya error karena API tersebut server-only.

  • Butuh UA di client, kirim dari Server Component lewat props.
  • Objek hasil headers() read-only, tidak bisa .set() atau .delete().
  • Jangan percaya penuh x-forwarded-for atau header kustom untuk keputusan keamanan.

Untuk authorization, ambil token lalu verifikasi di server. Decode JWT saja tidak cukup, token harus diverifikasi dengan secret yang tersimpan di ENV server.

FAQ

Apakah headers() membuat rute jadi dinamis?

Ya, pemakaiannya memaksa dynamic rendering karena nilainya dibaca tiap request.

Bisakah membaca headers di Client Component?

Tidak, baca di Server Component lalu oper ke client lewat props bila perlu.

Bagaimana membaca authorization dengan aman?

Ambil nilainya di server, validasi format Bearer, lalu verifikasi token sebelum dipakai.

Artikel Terkait