Next.js 16: Turbopack Jadi Default, Caching Akhirnya Masuk Akal

Awalnya Skeptis, Sekarang Nggak Bisa Balik

Saya udah pakai Next.js dari versi 12. Tiap major release selalu ada yang bikin excited, tapi juga ada yang bikin frustrasi. Next.js 13 bawa App Router yang bagus tapi confusing. Next.js 14 dan 15 perbaiki banyak hal. Nah, Next.js 16 yang rilis Oktober 2025 ini—jujur—ini yang paling substantial.

Dua masalah terbesar selama ini: caching yang terlalu magic (susah diprediksi), sama build time yang bikin ngopi dulu tiap save file. Dua-duanya diselesaikan di versi ini. Mari kita breakdown satu-satu.

Turbopack Sekarang Default—Dan Ini Bukan Sekadar Gimmick

Di Next.js 15, Turbopack masih optional dan belum full stable. Sekarang di v16, Turbopack jadi default bundler untuk semua project baru. Angkanya menurut Vercel:

• Fast Refresh: hingga 10x lebih cepat
• Production build: 2–5x lebih cepat

Kalau sebelumnya Fast Refresh butuh 3–5 detik tiap save, sekarang bisa sub-500ms. Buat development itu perbedaan yang terasa banget, terutama kalau project udah gede.

Masih pakai webpack custom setup? Bisa tetap pakai:

next dev --webpack
next build --webpack

Jadi migrasinya tidak dipaksakan. Tapi kalau project baru, tinggal biarkan Turbopack jalan.

Turbopack File System Caching (Beta)

Ada fitur tambahan yang masih beta tapi worth dicoba: filesystem caching. Ini nyimpen build artifacts ke disk, jadi kalau restart next dev, compile pertama jauh lebih cepat. Enable-nya di next.config.ts:

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

Vercel bilang semua internal app mereka udah pakai ini. Worth coba di project besar.

Caching Akhirnya Bisa Dipahami Manusia

Ini yang paling signifikan. Di Next.js 13–15, caching App Router itu unpredictable. Kadang data ter-cache tanpa disengaja, kadang revalidation tidak jalan sesuai ekspektasi. Developer harus hafal behavior implisit yang ribet.

Next.js 16 membalik pendekatan ini: semua dynamic by default, dan caching harus eksplisit lewat directive "use cache".

Cache Components dengan "use cache"

Enable dulu di config:

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Lalu di komponen yang mau di-cache, tinggal tambah directive:

// app/products/page.tsx
"use cache";

async function fetchProducts() {
  const res = await fetch("https://api.example.com/products", {
    next: { tags: ["products"] },
  });
  return res.json();
}

export default async function ProductsPage() {
  const products = await fetchProducts();
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Hasilnya: hanya komponen yang eksplisit pakai "use cache" yang di-cache. Yang lain render dynamic. Jauh lebih predictable.

API Caching Baru: updateTag() dan refresh()

Dua API baru yang solve masalah nyata:

updateTag()—buat read-your-writes. User submit form, data langsung update tanpa nunggu revalidation background:

"use server";
import { updateTag } from "next/cache";

export async function updateUserProfile(userId, data) {
  await db.user.update(userId, data);
  updateTag(`user-${userId}`); // User lihat perubahan langsung
}

refresh()—refresh data yang tidak di-cache, tanpa menyentuh cache sama sekali:

"use server";
import { refresh } from "next/cache";

export async function markNotificationAsRead(id) {
  await db.notification.markAsRead(id);
  refresh();
}

Dan revalidateTag() sekarang butuh argumen kedua:

revalidateTag("blog-posts", "max");   // SWR, background revalidation
revalidateTag("news-feed", "hours");  // Expire setelah beberapa jam
revalidateTag("products", { expire: 3600 }); // Custom

React Compiler Stable: Bye-bye useMemo Manual

React Compiler versi 1.0 udah release, dan Next.js 16 langsung bundled support-nya sebagai stable. Compiler ini otomatis insert memoization ke komponen—tanpa kita perlu nulis useMemo, memo(), atau useCallback manual.

Enable-nya sederhana:

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

npm install babel-plugin-react-compiler@latest

Catatan: ini masih butuh Babel, jadi ada overhead compile time. Tapi untuk production app yang sering re-render, worth it. Enable dulu di satu section kecil, ukur, baru expand.

React 19.2: View Transitions dan useEffectEvent

Next.js 16 pakai React Canary yang include React 19.2. Dua fitur yang paling menarik:

View Transitions—smooth animation antar halaman native browser, tanpa library third-party. Potensinya besar untuk UX.

useEffectEvent—pisahkan logika non-reactive dari useEffect. Lebih clean dibanding workaround useRef yang biasa kita pakai.

<Activity />—semacam "background tab" untuk UI. Component tetap mounted dan state terjaga, tapi visually hidden. Bagus untuk tab switching atau offscreen content.

Routing Lebih Pintar, Link Lebih Efisien

Navigation engine di-rewrite. Dua perubahan kunci:

Layout deduplication: kalau ada 50 product links yang share layout yang sama, layout itu cuma di-download sekali—bukan 50 kali. Network transfer size turun drastis di halaman listing.

Incremental prefetching: Next.js cuma prefetch bagian yang belum ada di cache, bukan seluruh halaman. Plus, prefetch request dibatalin kalau link keluar viewport.

Semua ini automatic. Tidak perlu ubah kode apapun.

proxy.ts Gantikan middleware.ts

middleware.ts deprecated untuk Node.js runtime. Gantinya proxy.ts dengan naming yang lebih eksplisit:

// proxy.ts (ganti dari middleware.ts)
import { NextRequest, NextResponse } from "next/server";

export default function proxy(request) {
  return NextResponse.redirect(new URL("/home", request.url));
}

Logic-nya sama persis, tinggal rename file dan function name. middleware.ts masih bisa untuk Edge runtime, tapi akan dihapus di versi depan.

Breaking Changes yang Perlu Diperhatikan

Sebelum upgrade, cek ini dulu:

• Node.js 18 tidak lagi supported—minimal Node 20.9+
• TypeScript minimal 5.1+
• next lint dihapus—jalankan ESLint atau Biome langsung
• AMP support dihapus sepenuhnya
• experimental.ppr dihapus, ganti ke cacheComponents: true
• Parallel routes sekarang butuh explicit default.js di semua slot

Cara upgrade paling aman:

npx @next/codemod@canary upgrade latest

Worth Upgrade?

Kalau project baru: ya, langsung pakai Next.js 16. Turbopack default, caching explicit dari awal, tidak ada legacy behavior yang harus dihindari.

Kalau project existing di v14–15: upgrade worth it, tapi siapkan waktu untuk:

• Rename middleware.ts → proxy.ts
• Review semua revalidateTag() call (sekarang butuh argumen kedua)
• Cek Node.js version di server/CI (harus 20.9+)
• Tambah default.js di semua parallel route slots

Kalau masih di v13 dengan banyak webpack custom config: upgrade ke v15 dulu, stabilkan, baru ke v16. Jangan loncat langsung.

Secara keseluruhan, ini release yang paling terasa manfaatnya sejak App Router pertama diperkenalkan. Caching yang predictable + Turbopack default = development experience yang jauh lebih menyenangkan.