Cara Memperbaiki Error Upgrade Next.js 16

Error paling umum setelah upgrade ke Next.js 16 mencakup build gagal karena konfigurasi webpack terdeteksi Turbopack, akses sinkron ke params/searchParams/cookies()/headers() yang kini benar-benar dilarang (bukan sekadar warning), parallel routes tanpa default.js, dan revalidateTag() dengan satu argumen yang jadi error TypeScript.

Kenapa Next.js 16 Sering Error Setelah Upgrade?#

Next.js 15 memperkenalkan banyak perubahan sebagai peringatan (warning) dengan periode transisi sinkron-asinkron yang masih dibolehkan sementara. Menurut panduan resmi upgrade ke versi 16, periode transisi itu berakhir total di versi 16: kode yang di Next.js 15 cuma menampilkan warning di console sekarang benar-benar gagal build atau error di runtime. Turbopack juga berubah dari opsional (--turbopack) menjadi default penuh untuk next dev maupun next build.

Cara Cepat Melihat Semua Error Sekaligus#

Jalankan npx @next/codemod@canary upgrade latest dulu sebelum debugging manual — codemod ini otomatis menangani migrasi konfigurasi Turbopack, migrasi middleware ke proxy, dan penghapusan prefix unstable_. Baru setelah itu jalankan npm run build untuk melihat error yang tersisa satu per satu.

Error Apa Saja yang Paling Sering Muncul Setelah Upgrade Next.js 16?#

Bagaimana Cara Memperbaiki Error "Webpack Config Found" Saat Build?#

Turbopack sekarang jadi bundler default untuk next build, jadi kalau next.config.ts masih punya opsi webpack kustom, build akan gagal untuk mencegah konfigurasi yang salah terpakai secara diam-diam. Ada tiga jalan keluar sesuai dokumentasi resmi:

# 1. Tetap pakai Turbopack, abaikan konfigurasi webpack
next build --turbopack
 
# 2. Tetap pakai webpack sepenuhnya
next build --webpack

Kalau memilih migrasi penuh ke Turbopack, pindahkan opsi ke properti turbopack top-level di next.config.ts (bukan lagi di dalam experimental.turbopack seperti Next.js 15). Kalau errornya muncul padahal project sendiri tidak pernah menulis opsi webpack, cek dependency pihak ketiga (Sentry, plugin PWA, dll.) yang kemungkinan menambahkannya otomatis ke config.

Bagaimana Cara Memperbaiki Error Akses Params dan SearchParams Sinkron?#

Di Next.js 16, params, searchParams, cookies(), headers(), dan draftMode() hanya bisa diakses secara asinkron — akses sinkron yang di Next.js 15 masih sekadar warning sekarang benar-benar tidak berfungsi. Jalankan codemod resmi untuk migrasi otomatis ke sebagian besar file:

npx @next/codemod@canary next-async-request-api .

Untuk kasus yang tidak tertangkap codemod, ubah manual dengan await:

// Sebelum (Next.js 15, sinkron)
export default function Page({ params }: { params: { slug: string } }) {
  const { slug } = params;
  return <h1>{slug}</h1>;
}
 
// Sesudah (Next.js 16, wajib async)
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Jalankan npx next typegen setelah migrasi untuk menghasilkan ulang tipe bantuan PageProps/LayoutProps/RouteContext secara otomatis, supaya IDE langsung mendeteksi kalau ada akses sinkron yang terlewat.

Kenapa Build Gagal Karena Parallel Routes Tanpa default.js?#

Semua slot parallel routes (folder dengan awalan @, misalnya @modal atau @sidebar) sekarang wajib punya file default.js — tanpa itu, build langsung gagal. Sebelumnya Next.js diam-diam mengizinkan slot kosong tanpa fallback eksplisit.

// app/@modal/default.tsx
import { notFound } from "next/navigation";
 
export default function Default() {
  notFound();
}

Atau cukup return null kalau slot tersebut memang boleh kosong tanpa memicu halaman 404.

Bagaimana Cara Memperbaiki Error revalidateTag Setelah Upgrade?#

revalidateTag() dengan satu argumen sekarang menghasilkan error TypeScript karena wajib argumen kedua berupa profil cacheLife:

// Sebelum — error TypeScript di Next.js 16
revalidateTag("posts");
 
// Sesudah — wajib sertakan profil cacheLife
revalidateTag("posts", "max");

Kalau butuh efek "read-your-writes" (perubahan langsung terlihat di request yang sama, bukan stale-while-revalidate), pakai updateTag() di dalam Server Action sebagai gantinya — fungsi baru yang memang dirancang untuk kasus itu, berbeda dari pola caching yang sudah dibahas di artikel Cache Components Next.js 16.

Ringkasan#

• Jalankan npx @next/codemod@canary upgrade latest lebih dulu sebelum debugging manual — sebagian besar migrasi mekanis (konfigurasi Turbopack, rename middleware ke proxy, penghapusan prefix unstable_) sudah otomatis.
• Error paling sering: konfigurasi webpack yang terdeteksi Turbopack, akses sinkron ke params/searchParams/cookies()/headers() yang kini benar-benar dilarang, parallel routes tanpa default.js, dan revalidateTag() tanpa argumen kedua.
• Kalau upgrade-nya sendiri belum dijalankan, baca dulu langkah lengkapnya di cara upgrade Next.js 15 ke Next.js 16 sebelum masuk ke troubleshooting di artikel ini.
• Butuh bantuan mengaudit atau memperbaiki error upgrade Next.js di proyek sendiri? Lihat layanan web development yang ditawarkan.