Amankan Kode Backend dengan Cara Membuat Server Only Module Next Js

Ditulis oleh Next.js

Paket server-only membuat build Next.js gagal kalau modul backend tidak sengaja diimpor dari Client Component. Kamu tetap perlu memisahkan kode sendiri, paket ini hanya berfungsi sebagai pagar pembatas. Pola ini wajib untuk file yang membaca secret, query database, atau memanggil API internal berbayar.

Jawaban Cepat dan Fungsi server-only di App Router

Tambahkan import 'server-only' di bagian paling atas modul server. Next.js lalu melempar error saat file itu masuk ke bundle client.

Server Component berjalan di server dan boleh membaca ENV tanpa prefix NEXT_PUBLIC_. Client Component berjalan di browser setelah hydration dan tidak boleh menerima secret lewat props atau import langsung.

  • Gunakan untuk helper database, client CMS privat, dan pembaca token.
  • Gunakan untuk fungsi format harga, validasi Zod murni, dan tipe bersama yang aman di client.
  • Jangan gunakan sebagai pengganti validasi input di Server Action dan Route Handler.

Langkah Membuat Server Only Module Next Js

1. Install paket server-only ke project App Router kamu.

2. Buat file khusus server, misalnya lib/get-user-server.ts, lalu tambah penanda di baris pertama.

3. Impor modul tersebut hanya dari Server Component, Server Action, atau Route Handler. Jangan pernah mengimpornya dari file berlabel use client.

import 'server-only';

export async function getPrivateUser(id: string) {
  const apiKey = process.env.INTERNAL_API_KEY;
  // panggil database atau API internal di sini
  return { id, apiKey: Boolean(apiKey) };
}
  • Boleh mengimpor: Server Component, Server Action, Route Handler, Middleware sisi server.
  • Tidak boleh mengimpor: Client Component, event handler browser, file yang memakai window atau localStorage.
  • Tidak boleh mengimpor: util shared yang dipakai dua sisi kecuali util itu dipisah dulu.

BACA JUGA:

Tabel Verifikasi Error Import yang Salah

Baca pesan error build sampai selesai sebelum mengubah kode. Lokasi import yang salah biasanya tertulis di stack trace.

Kondisi Hasil Perbaikan
Diimpor Client Component Build gagal karena modul server masuk client Pindah pemanggilan ke Server Component lalu kirim hasilnya sebagai props
Diimpor util shared Semua pemakai util ikut dianggap client Pecah util menjadi versi server dan versi shared
Dipakai Server Action Berjalan normal di server Tetap validasi input dan cek sesi pengguna

FAQ

Apakah server-only membuat kode otomatis aman?

Tidak. Paket ini hanya mencegah import salah, keamanan tetap bergantung pada validasi server dan manajemen secret.

Bolehkah modul server-only diimpor file shared?

Tidak, kalau file shared itu juga diimpor Client Component. Pisahkan logika server ke file tersendiri.

Apa pengganti server-only untuk validasi ENV secret?

Tidak ada pengganti langsung. Periksa process.env hanya di server dan jangan beri prefix NEXT_PUBLIC_ pada secret.

Artikel Terkait