Cara Membaca Cookies di Server Component Next Js dengan Cookies()

Ditulis oleh Next.js

Cara membaca cookies di Server Component Next.js adalah memanggil cookies() dari next/headers di dalam async Server Component, lalu gunakan .get(nama) untuk mengambil nilainya. Banyak yang gagal karena lupa await pada Next.js versi baru, padahal API ini sekarang bersifat asynchronous.

import { cookies } from "next/headers";

export default async function Page() {
  const cookieStore = await cookies();
  const token = cookieStore.get("token")?.value;
  const theme = cookieStore.get("theme")?.value ?? "light";

  return <p>Token: {token ? "ada" : "tidak ada"} - Tema: {theme}</p>;
}

Jawaban Cepat: Fungsi cookies() untuk Server Component

Fungsi ini hanya berjalan di server, di dalam Server Component, Server Action, atau Route Handler. Ia membaca header Cookie dari request yang masuk.

  • Gunakan get(nama) untuk satu cookie, getAll() untuk semua cookie, dan has(nama) untuk cek keberadaan.
  • Nilai selalu berupa string atau undefined, akses lewat properti .value.
  • Cocok untuk token auth, preferensi tema, atau locale sebelum halaman dirender.

Langkah Membaca Cookies di Server Component

Ikuti urutan ini di file page.tsx atau layout.tsx:

  1. Import cookies dari next/headers di bagian atas file server.
  2. Panggil await cookies() lalu ambil nilai dengan .get(nama).
  3. Tangani nilai undefined dan validasi di server sebelum dipakai.
  4. Teruskan nilai sebagai props, jangan baca ulang di client.
import { cookies } from "next/headers";
import Profile from "./profile";

export default async function Page() {
  const cookieStore = await cookies();
  const session = cookieStore.get("session")?.value;

  if (!session) {
    return <p>Silakan login dulu.</p>;
  }

  return <Profile session={session} />;
}

BACA JUGA:

Perbandingan Tempat Membaca Cookies

Jangan pakai document.cookie di Server Component. API itu hanya ada di browser dan akan error saat render server.

Lokasi API yang dipakai Catatan
Server Component cookies() dari next/headers Hanya baca, tidak bisa set langsung
Route Handler cookies() atau request.cookies Bisa baca dan set via response
Middleware request.cookies / response.cookies Cocok untuk redirect berbasis auth
Client Component document.cookie Tidak bisa baca cookie httpOnly

Kesalahan Umum dan Dampak Rendering

Memakai cookies() membuat route jadi dinamis karena Next.js harus membaca request setiap kali. Halaman tersebut tidak bisa di-prerender statis penuh.

  • Lupa await pada Next.js 15: hasilnya Promise, .get() gagal. Perbaikannya selalu tulis await cookies().
  • Mengembalikan undefined: nama cookie salah besar kecil huruf atau cookie belum diset dengan path yang benar.
  • Membaca cookie httpOnly dari browser: tidak akan terlihat di document.cookie. Baca dari Server Component, lalu kirim hanya data non-sensitif ke client.
  • Mencoba mengubah cookie langsung: Server Component hanya read-only, gunakan Server Action atau Route Handler untuk set cookie.

FAQ

Bisakah mengubah cookies langsung dari Server Component?

Tidak. Gunakan Server Action atau Route Handler dengan cookies().set().

Mengapa cookies() mengembalikan undefined?

Nama cookie salah, path tidak cocok, atau cookie sudah kedaluwarsa dan tidak dikirim browser.

Apakah membaca cookies butuh use client?

Tidak. Justru harus tetap Server Component agar bisa akses cookie httpOnly dengan aman.

Artikel Terkait