Nouveautés Next.js 16

Quatre versions en un an

Clique sur une version pour voir ce qu'elle apporte.

Les changements qui piègent

Beaucoup d'exemples sur Internet datent de Next.js 13 à 15. Si un code ne compile pas, vérifie d'abord ces points. Bascule pour comparer.

middleware.ts devient proxy.ts

// middleware.ts (Next.js 15)
import { NextResponse, type NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/fr', request.url));
}

// proxy.ts (Next.js 16): same logic, Node.js runtime
import { NextResponse, type NextRequest } from 'next/server';

export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/fr', request.url));
}

params et cookies sont asynchrones

// Next.js 14: params were a plain object
export default function Page({ params }: { params: { id: string } }) {
  const invoice = getInvoice(params.id);
  const theme = cookies().get('theme');
}

// Next.js 16: params, searchParams, cookies(), headers() are async
export default async function Page({ params }: PageProps<'/[locale]/invoices/[id]'>) {
  const { id } = await params;
  const theme = (await cookies()).get('theme');
}

revalidateTag prend un profil

revalidateTag('invoices');

revalidateTag('invoices', 'max'); // stale-while-revalidate
updateTag('invoices');            // Server Actions: read your own writes

• Node.js 20.9 minimum et TypeScript 5.1 minimum.
• next lint est supprimé : on lance eslint directement, et next build ne lint plus.
• Les routes parallèles exigent un fichier default.tsx pour chaque slot.
• next/image : les images locales avec query string demandent images.localPatterns, et images.domains est déprécié au profit de remotePatterns.

Frontières d'erreur locales

Depuis la 16.3, catchError crée une frontière d'erreur autour d'un seul bloc. Son retry() recharge aussi les Server Components, et elle laisse passer notFound() et redirect().

'use client';

import { catchError, type ErrorInfo } from 'next/error';
import { useTranslations } from 'next-intl';

function InvoicesError(_props: object, { retry }: ErrorInfo) {
  const t = useTranslations('common.errors');
  return (
    <div role="alert">
      <p>{t('loadFailed')}</p>
      <button type="button" onClick={() => retry()}>{t('retry')}</button>
    </div>
  );
}

export default catchError(InvoicesError);

Outils du quotidien

Pour déboguer côté serveur, analyser le poids du bundle et mettre à jour un projet.

next dev --inspect            # attach the Node.js debugger (16.1)
next start --inspect          # same in production (16.2)
next experimental-analyze     # bundle analyzer for Turbopack (16.1)

npx next upgrade                              # Next.js 16.1+
npx @next/codemod@canary upgrade latest       # from 15: async APIs, proxy, lint...
npx @next/codemod@canary next-lint-to-eslint-cli .  # next lint was removed

Sources : blog officiel Next.js (articles 16, 16.1, 16.2 et 16.3), vérifiés en septembre 2026.