Next.js 16 Preview - What's Coming in 2026

// app/api/chat/route.ts
import { streamText } from 'next/ai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  return streamText({
    model: 'gpt-4-turbo',
    messages,
    // Built-in streaming, error handling, and rate limiting
  });
}

// Components can now define their own error/loading boundaries
export default async function ProductPage({ id }) {
  'use boundary'; // New directive

  const product = await fetchProduct(id);
  return <ProductDetails product={product} />;
}

export default async function Analytics() {
  'use cache'; // Cache this component's output
  'use revalidate 3600'; // Revalidate every hour

  const data = await fetchAnalytics();
  return <Dashboard data={data} />;
}

'use client';
'use zero-bundle'; // Component code stays on server, only interactivity ships

export function InteractiveChart({ data }) {
  const [zoom, setZoom] = useState(1);
  // Heavy charting logic stays server-side
  return <canvas onClick={() => setZoom(zoom + 0.1)} />;
}

import { db } from 'next/edge-db';

export default async function Page() {
  // SQLite at the edge, globally distributed
  const users = await db.query('SELECT * FROM users LIMIT 10');
  return <UserList users={users} />;
}

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  fill
  priority
  placeholder="shimmer" // New shimmer placeholder
  fetchPriority="high" // Native priority hints
/>;