Next Build Error Terus? Cara Mengatasi Next Build Error dari Log Asli

Ditulis oleh Next.js

Salin pesan merah dari npm run build, bukan tebakan penyebabnya. cara mengatasi next build error selalu mulai dari baris ./app/...:12:5 karena Next.js gagal di file dan baris itu. Perbaiki sumbernya, lalu jalankan npm run build ulang di lokal sebelum deploy ke Vercel.

Penyebab Next Build Error Paling Sering

Build membaca semua route App Router sebagai production. Kode yang lolos npm run dev bisa gagal di sini karena prerender mengeksekusi Server Component sampai selesai.

  • Compile: sintaks salah, import tidak ada, JSX tidak valid.
  • TypeScript: tipe params, searchParams, atau hasil fetch tidak cocok.
  • Dependency: versi React/Next bentrok atau paket hanya untuk Node dipakai di Edge.
  • ENV: variabel server belum diisi saat build, atau NEXT_PUBLIC_ dipakai untuk secret.
  • Runtime saat prerender: window, document, localStorage dipanggil dari Server Component.

Tandai error production-only bila log menyebut prerendering, useSearchParams, atau halaman statis tertentu.

Tabel Cepat Baca Pesan Error Build

Pakai tabel ini untuk triase. Jangan ubah config sebelum masalahnya masuk salah satu baris.

Masalah Penyebab Solusi
Failed to Compile Import atau sintaks salah Perbaiki path dan kurung di baris log
Type error Tipe props atau data salah Perbaiki tipe, hindari any
Module Not Found Nama file case-sensitive Samakan nama import dan file
ENV missing ENV belum diset di server build Isi ENV lalu build ulang
window is not defined Browser API di server Pindah ke Client Component atau guard

BACA JUGA:

Langkah Memperbaiki Build Error Tanpa Skip Check

Jangan aktifkan ignoreBuildErrors untuk build production. Error yang disembunyikan berubah jadi halaman rusak atau data salah.

  1. Reproduksi dengan npm run build di lokal, bukan hanya npm run dev.
  2. Baca 10 baris pertama error, catat nama file dan nomor barisnya.
  3. Perbaiki sumbernya: tipe data, ENV, import, atau pemisahan Server dan Client Component.
  4. Validasi input ulang di server bila error berasal dari fetch atau Server Action.
  5. Jalankan npm run build lagi sampai bersih, baru push atau deploy.
// Client Component hanya untuk browser API
"use client";
import { useEffect, useState } from "react";

export default function ThemeButton() {
  const [theme, setTheme] = useState("light");
  useEffect(() => {
    setTheme(localStorage.getItem("theme") ?? "light");
  }, []);
  return <button onClick={() => setTheme("dark")}>{theme}</button>;
}
// Baca ENV server di Server Component
const apiKey = process.env.PAYMENT_API_KEY;
if (!apiKey) {
  throw new Error("PAYMENT_API_KEY belum diisi");
}

FAQ

Apakah boleh pakai ignoreBuildErrors saat build gagal?

Boleh sementara untuk debug lokal, tetapi matikan lagi untuk production karena menyembunyikan bug tipe dan runtime.

Kenapa build lolos lokal tapi gagal di Vercel?

ENV Vercel belum diisi atau Node version berbeda, samakan ENV dan versi runtime lalu build ulang.

Artikel Terkait