proxy.ts, after() & Migrasi ke Next.js 16 — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

middleware.ts berganti nama menjadi proxy.ts di Next.js 16
after() menjalankan pekerjaan SETELAH respons dikirim ke pengguna
Turbopack menjadi bundler bawaan, termasuk untuk build produksi
Codemod resmi menangani sebagian besar perubahan otomatis

📌 Ringkasan Perubahan Besar

Perubahan	Dampak
`middleware.ts` → `proxy.ts`	Berkas harus diganti nama; penamaan baru mencerminkan perannya sebagai proxy tepi, bukan middleware aplikasi
Turbopack bawaan	Dipakai untuk `dev` maupun `build`; konfigurasi webpack kustom perlu ditinjau ulang
API dinamis asinkron	`cookies()`, `headers()`, `params`, `searchParams` wajib di-`await`
Caching eksplisit	`fetch` tidak lagi di-cache secara bawaan
React 19	Pustaka pihak ketiga yang belum mendukung React 19 bisa bermasalah
Node.js minimum naik	Versi Node lama tidak lagi didukung — periksa runtime di CI dan produksi

💡 Catatan kejujuran

Detail nama flag dan versi minimum bergerak cukup cepat antar rilis. Perlakukan tabel di atas sebagai peta arah, dan verifikasi angka pastinya lewat npx next info serta panduan upgrade resmi untuk versi yang Anda tuju.

🔀 Dari middleware.ts ke proxy.ts

proxy.ts (sebelumnya middleware.ts)

import { NextResponse, type NextRequest } from 'next/server'

export default function proxy(request: NextRequest) {
  const token = request.cookies.get('sesi')?.value

  if (!token && request.nextUrl.pathname.startsWith('/dasbor')) {
    const url = request.nextUrl.clone()
    url.pathname = '/masuk'
    url.searchParams.set('kembali', request.nextUrl.pathname)
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dasbor/:path*', '/pengaturan/:path*'],
}

🚫 Jangan jadikan proxy sebagai satu-satunya lapisan keamanan

Proxy berjalan di tepi (edge) dan tepat untuk pengalihan cepat serta pemeriksaan kasar. Ia bukan tempat menegakkan otorisasi. Kelemahan di lapisan ini pernah menjadi celah nyata pada aplikasi Next.js. Otorisasi yang sesungguhnya harus diperiksa ulang di Server Component, Server Action, dan Route Handler — sedekat mungkin dengan data yang dilindungi. Anggap proxy hanya sebagai pengarah lalu lintas.

⏭️ after(): Pekerjaan Setelah Respons Terkirim

app/aksi.ts

import { after } from 'next/server'

export async function POST(request: Request) {
  const data = await request.json()
  const pesanan = await db.pesanan.create({ data })

  // Dijalankan SETELAH respons dikirim ke pengguna.
  // Pengguna tidak perlu menunggu tugas ini selesai.
  after(async () => {
    await catatAnalitik('pesanan_dibuat', pesanan.id)
    await kirimWebhook(pesanan)
  })

  return Response.json({ id: pesanan.id })
}

💡 Kegunaan yang tepat

Pencatatan analitik, pengiriman event, pembaruan cache, dan log audit — semua pekerjaan yang tidak memengaruhi apa yang dilihat pengguna. Sebelum ada after(), hal-hal ini menambah latensi respons tanpa alasan.

⚠️ Bukan pengganti antrean tugas

after() berjalan di dalam lingkup permintaan yang sama. Bila prosesnya berakhir — instance serverless dihentikan, kontainer di-restart — pekerjaan yang belum selesai hilang tanpa jejak dan tanpa percobaan ulang. Untuk pekerjaan yang tidak boleh hilang seperti email verifikasi atau pemrosesan pembayaran, tetap gunakan antrean tugas yang durabel.

🛠️ Alur Migrasi yang Aman

# 1. Pastikan versi saat ini sehat dan tidak ada peringatan
npm run build

# 2. Jalankan codemod resmi — menangani sebagian besar perubahan
npx @next/codemod@latest upgrade latest

# 3. Codemod spesifik bila diperlukan
npx @next/codemod@latest next-async-request-api .

# 4. Ganti nama berkas middleware
git mv middleware.ts proxy.ts

# 5. Bangun ulang dan periksa tabel rute
npm run build

# 6. Jalankan uji E2E sebelum deploy
npm run test:e2e

📌 Naik satu versi mayor sekaligus

Melompat dari Next 13 langsung ke 16 menggabungkan beberapa gelombang perubahan sekaligus, dan ketika ada yang rusak Anda tidak tahu perubahan mana penyebabnya. Naik bertahap — 13 → 14 → 15 → 16 — dengan build dan uji di tiap langkah jauh lebih mudah ditelusuri, meski terasa lebih lambat.

🧪 Yang Sering Rusak Setelah Upgrade

Pustaka pihak ketiga yang belum mendukung React 19 — periksa peerDependencies sebelum upgrade, terutama pustaka UI dan animasi.
Konfigurasi webpack kustom — Turbopack tidak memakai loader dan plugin webpack yang sama.
Data yang tiba-tiba selalu segar — bukan bug, ini akibat caching yang tidak lagi otomatis. Tambahkan 'use cache' di tempat yang memang perlu.
Peringatan sinkron pada cookies/params — jalankan codemod async request API.
Tagihan hosting naik — rute yang sebelumnya statis bisa menjadi dinamis tanpa disadari. Periksa tabel rute pada keluaran build.