Next.js 16 újdonságok

14. Next.js 16 újdonságok

Turbopack – stable default bundler

A Turbopack Rust-ban írt, teljesen új bundler, amely Next.js 16-ban vált az alapértelmezett build eszközzé.

Előnyök:

• 2–5× gyorsabb production build
• 5–10× gyorsabb Fast Refresh fejlesztés közben
• Fájlrendszer cache (16.1-től stable) – szerver újraindítás után is azonnali

Migráció:

# Régi konfiguráció
next dev --turbopack  # nem kell többé a flag

# Új konfiguráció
next dev  # automatikusan Turbopack

Cache Components és explicit cache modell

Ahogy a 9. fejezetben részletesen tárgyaltuk, a Next.js 16 teljesen új caching architektúrát vezet be:

• "use cache" direktíva
• cacheLife, cacheTag API-k
• updateTag, revalidateTag, refresh funkciók

React Compiler támogatás (stable)

A React Compiler a React 1.0-val vált stable-lé, a Next.js 16 teljes körűen támogatja:

// next.config.ts
const nextConfig = {
  reactCompiler: true, // stable, opt-in
}

Mit csinál a React Compiler?

• Automatikusan memoizálja a komponenseket
• Csökkenti a felesleges újrarendereléseket
• Nincs szükség kézi useMemo, useCallback hívásokra
• Nulla runtime overhead

proxy.ts – új hálózati határjelzés

// proxy.ts (helyettesíti a middleware.ts-t)
export function proxy(request) {
  // Csak Node.js runtime – nincs Edge limitáció
  // Direktebb hozzáférés Node.js API-khoz
}

React 19.2 integráció

A Next.js 16 App Router React 19.2-t használ:

• View Transitions – animált oldal-átmenetek natívan
• useEffectEvent – nem reaktív logika Effectekből
• Activity – rejtett UI, megőrzött állapottal

'use client'

import { startTransition } from 'react'
import { useRouter } from 'next/navigation'

// View Transitions – animált navigáció
function NavigationWithAnimation() {
  const router = useRouter()

  const handleNavigate = (href: string) => {
    startTransition(() => {
      router.push(href)
    })
  }

  return (
    <button onClick={() => handleNavigate('/about')}>
      Navigálás animációval
    </button>
  )
}

Routing fejlesztések

• Layout deduplication – shared layout-ok csak egyszer töltődnek le prefetch során
• Incremental prefetch – csak a szükséges részek prefetch-elése, nem az egész oldal
• Eredmény: akár 50%-kal kevesebb hálózati forgalom navigáció során

Next.js DevTools MCP

# AI-asszisztált debugging MCP integráción keresztül
# Cursor, VS Code és más MCP-kompatibilis szerkesztőkkel működik

A DevTools MCP lehetővé teszi, hogy AI aszisztensek (pl. Claude, Copilot) kontextuális betekintést kapjanak az alkalmazásba:

• Oldal renderelési fa vizualizálása
• Cache állapot ellenőrzése
• Routing hibák diagnosztizálása
• Server/Client Component határok megjelenítése

Breaking changes összefoglalója

📝 Összefoglaló – 14. fejezet

• Turbopack stable és alapértelmezett – 2-10× gyorsabb build
• Cache Components: explicit "use cache" modell, PPR teljesítve
• React Compiler stable – automatikus memoizáció, nincs kézi useMemo
• React 19.2: View Transitions, Activity, useEffectEvent
• proxy.ts felváltja a middleware.ts-t (Node.js only)