Next.js 16: Fitur Baru yang Wajib Diketahui Developer Indonesia

Next.js 16: Apa yang Berubah?

Vercel baru-baru ini merilis Next.js 16, dan ini bukan update kecil. Ada beberapa perubahan fundamental yang perlu kamu ketahui sebelum upgrade — atau mulai project baru.

1. Turbopack Sekarang Default & Stabil

Turbopack, bundler pengganti Webpack yang ditulis dalam Rust, sekarang sudah stable dan jadi default. Ini artinya:

• next dev sekarang pakai Turbopack secara otomatis
• Build time development 5-10x lebih cepat dibanding Webpack
• Hot Module Replacement (HMR) hampir instan

# Tidak perlu flag tambahan lagi
npx next dev
# Otomatis pakai Turbopack

2. React Compiler Terintegrasi

React Compiler yang sebelumnya eksperimental sekarang bisa diaktifkan langsung dari next.config.js:

// next.config.js
const nextConfig = {
  reactCompiler: true,  // Aktifkan React Compiler
  cacheComponents: true // Aktifkan Cache Components
}

export default nextConfig

Apa manfaatnya? React Compiler otomatis memoize komponen dan fungsi — tidak perlu useMemo, useCallback, atau memo() manual lagi. Ini eliminasi salah satu source of bug terbesar di React.

3. Sistem Caching Baru: "use cache"

Ini perubahan yang paling signifikan. Next.js 16 punya directive baru untuk caching:

// Cache seluruh halaman
'use cache'

export default async function BlogPage() {
  const posts = await getPosts()
  return <PostList posts={posts} />
}

// Cache komponen individual
async function PopularPosts() {
  'use cache'
  const posts = await getPopularPosts()
  return <div>{/* ... */}</div>
}

// Cache fungsi
async function getExpensiveData() {
  'use cache'
  // Data ini di-cache otomatis
  return await db.query('...')
}

Jauh lebih intuitif dibanding sistem revalidate di Next.js 13-15.

4. params dan searchParams Harus di-await

Breaking change yang penting: di Next.js 16, params dan searchParams di Server Components tidak lagi synchronous. Wajib di-await:

// SEBELUM (Next.js 14/15)
export default function Page({ params }: { params: { slug: string } }) {
  const { slug } = params // Langsung bisa pakai
}

// SESUDAH (Next.js 16) - WAJIB di-await
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params // Harus await
}

5. middleware.ts Berubah Jadi proxy.js

Middleware sekarang lebih powerful dan namanya berubah jadi proxy.js. middleware.ts masih backward compatible tapi disarankan migrasi.

Panduan Migrasi dari Next.js 14/15

# Update Next.js
npm install next@latest react@latest react-dom@latest

# Jalankan codemod untuk fix breaking changes
npx @next/codemod@canary upgrade latest

Cek semua tempat yang pakai params atau searchParams dan tambahkan await. Sisanya sebagian besar backward compatible.

Haruskah Upgrade Sekarang?

• Project baru? Langsung pakai Next.js 16 dari awal.
• Project existing yang aktif development? Upgrade sekarang, terutama untuk dapat Turbopack.
• Project production yang stabil? Tunggu beberapa bulan sampai ekosistem lebih mature.

Di Digital Uptime, semua project baru sudah kami jalankan di Next.js 16 sejak rilis.