Next.js 15 : Tour d'horizon des nouveautés

Next.js 15 vient de sortir avec son lot de nouveautés passionnantes ! En tant que développeur qui utilise Next.js quotidiennement pour mes projets SaaS, j'ai testé les principales fonctionnalités. Voici mon analyse détaillée.

Les highlights de cette version

React 19 en support complet

Next.js 15 intègre officiellement React 19 avec toutes ses nouveautés :

• React Compiler : Optimisations automatiques sans useMemo/useCallback
• Actions Server améliorées : Meilleure intégration avec les formulaires
• Suspense affiné : Gestion plus fine du loading

// Avant React 19
const memoizedValue = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);

// Avec React 19 + Compiler
const value = expensiveCalculation(data); // Automatiquement optimisé !

App Router par défaut

L'App Router devient la recommandation officielle :

• Pages Router : Toujours supporté mais legacy
• Migrations facilitées : Outils pour migrer progressivement
• Performance améliorée : Optimisations spécifiques à l'App Router

Nouveautés côté performance

Turbopack en stable

Le bundler révolutionnaire de Vercel sort enfin en version stable :

• 10x plus rapide que Webpack en développement
• Hot Reload quasi-instantané sur les gros projets
• Tree-shaking amélioré pour des bundles plus légers

# Activation de Turbopack
next dev --turbo

Optimisations d'images

Le composant Image s'améliore encore :

• Nouveaux formats : Support natif AVIF et WebP
• Lazy loading intelligent : Prédiction basée sur le viewport
• Optimisations automatiques : Compression adaptative selon l'appareil

import Image from 'next/image';

// Nouvelles props pour un contrôle fin
<Image
  src="/hero.jpg"
  alt="Hero image"
  priority={true}
  quality={95}
  format="avif" // Nouveau !
  loading="eager"
/>

Améliorations developer experience

TypeScript 5.0+ requis

Next.js 15 nécessite TypeScript 5.0 minimum :

• Type safety renforcée sur les routes API
• Inférence améliorée pour les métadonnées
• Erreurs plus claires en cas de problème de typage

Hot Module Replacement ultra-rapide

Les mises à jour en développement sont maintenant quasi-instantanées :

• Préservation d'état : Plus de perte de données de formulaires
• Erreurs en overlay : Debugging facilité
• Support CSS-in-JS : Hot reload pour styled-components et emotion

Nouvelles API et fonctionnalités

Metadata API évoluée

Gestion plus fine des métadonnées :

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        }
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Server Actions simplifiées

Les Server Actions deviennent plus intuitives :

// actions/blog.ts
'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  // Validation automatique
  if (!title || !content) {
    throw new Error('Title and content are required');
  }

  // Sauvegarde en base
  await db.post.create({
    data: { title, content }
  });

  revalidatePath('/blog');
  redirect('/blog');
}

Migration depuis Next.js 14

Étapes recommandées

1. Mise à jour des dépendances

npm install next@15 react@19 react-dom@19
npm install -D @types/react@19 @types/react-dom@19

2. Configuration Turbopack

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      loaders: {
        // Configuration custom loaders
      }
    }
  }
}

3. Migration progressive App Router

• Commencer par les nouvelles pages
• Migrer route par route
• Tester les Server Components

Breaking changes à surveiller

• Node.js 18.17 minimum requis
• Certaines API dépréciées dans Pages Router
• Changements subtils dans le comportement de fetch

Mon retour d'expérience

Ce qui m'impressionne le plus

1. Vitesse de développement : Turbopack change vraiment la donne
2. DX améliorée : Moins de configuration, plus de productivité
3. Performance runtime : Applications plus rapides en production

Points d'attention

• Courbe d'apprentissage : App Router demande un changement de mindset
• Écosystème : Tous les packages ne sont pas encore compatibles React 19
• Debugging : Nouveaux outils à maîtriser

Dois-je migrer maintenant ?

✅ Oui si :

• Vous commencez un nouveau projet
• Votre équipe maîtrise déjà l'App Router
• Vous voulez les dernières optimisations

⏳ Attendez si :

• Votre projet utilise beaucoup de dépendances legacy
• Vous n'avez pas le temps pour une migration complète
• Votre équipe n'est pas familière avec les Server Components

Conclusion

Next.js 15 marque une étape importante dans l'évolution du framework. Avec React 19, Turbopack stable et les améliorations DX, c'est une version qui mérite le détour.

Pour mes futurs projets clients, je vais définitivement partir sur Next.js 15. La productivité gagnée compense largement le temps d'adaptation.

Et vous, avez-vous déjà testé Next.js 15 ? Quelles sont vos premières impressions ?