Introduction
La version 15 de Next.js marque une avancée significative pour les développeurs web, avec une série d'améliorations et de nouvelles fonctionnalités conçues pour améliorer la performance et l'expérience de développement.
Next.js 15, la nouvelle version du framework React
18/11/2024
Pierre Gouedar
Qu'est-ce que Next.js ?
Next.js est un framework open-source destiné au développement web moderne construit sur la bibliothèque React. Il permet de créer des applications web très performantes avec la possibilité d'exécuter le rendu des pages côté serveur (SSR) pour améliorer la vitesse de chargement de l'application que ce soit pour les utilisateurs ou pour les robots de Google en charge du référencement (SEO). De plus, Next.js inclut une mécanique de routage simplifiée, une optimisation du chargement des images ou encore une meilleure segmentation du code.
Les nouveautés et améliorations de la version 15 de Next.js
Avec la version 15, Next.js ne se contente pas d'évoluer : il intègre en profondeur les dernières avancées de l'écosystème React 19. Cette mise à jour se concentre sur deux axes majeurs : enrichir l'expérience des développeurs et pousser les performances des applications à un niveau supérieur.
L'ajout du support de React version 19
La nouveauté majeure de Next.js 15 est son intégration complète et optimisée de React 19. Cette mise à jour de la bibliothèque donne accès à un ensemble de nouvelles fonctionnalités qui améliorent la manière de construire les applications.
Au premier plan, la stabilisation des Server Actions change drastiquement la gestion des données. Cette fonctionnalité permet d'exécuter du code serveur directement depuis les composants, ce qui simplifie la soumission de formulaires et autres mutations de données. Pour accompagner les Actions, de nouveaux hooks font leur apparition, comme useActionState, useFormStatus et useOptimistic, qui permettent de créer des interfaces utilisateur très réactives pouvant se mettre à jour avant même que la réponse du serveur ne soit arrivée.
En parallèle, l'expérience de développement a été soignée. Les erreurs d'hydratation, souvent peu explicites, affichent désormais des diagnostics précis et des suggestions claires, facilitant leur résolution.
Exemple d'une nouvelle erreur d'hydration
Nouvelle fonction after
La fonction after est une nouvelle fonction expérimentale dans Next.js 15. Elle permet d'exécuter une tâche secondaire après l'envoi d'une réponse de manière non-bloquante. Cette fonctionnalité peut être utilisée pour du logging ou pour des exécutions de requêtes annexes à la réponse initiale.
Pour activer cette fonctionnalité, il faut l'ajouter dans la configuration de Next.js (next.config.js) :
const nextConfig = {
experimental: {
after: true,
},
};
module.exports = nextConfig;Le cas d'usage idéal
La puissance de after() se révèle quand on l'utilise pour des tâches déclenchées par une action spécifique de l'utilisateur, comme soumettre un formulaire ou appeler une API.
Voici un exemple d'utilisation de after() dans une Server Action :
'use server';
import { unstable_after as after } from 'next/server';
import { db } from './database';
export async function updateUserProfile(userId: string, formData: FormData) {
// 1. Tâche principale : mettre à jour le profil
const newName = formData.get('name') as string;
await db.user.update({
where: { id: userId },
data: { name: newName },
});
// 2. Tâche secondaire : logger l'activité SANS bloquer la réponse
after(() => {
// Cette partie s'exécute après que la réponse a été envoyée
console.log(`Profil de l'utilisateur ${userId} mis à jour.`);
// On pourrait aussi envoyer un email ou une notification ici
// sendUpdateNotification(userId);
});
// 3. La réponse est envoyée ici, avant que le code dans after() ne s'exécute
return { success: true };
}Mise à jour des stratégies de gestion du cache
La gestion du cache dans Next.js est puissante mais peut parfois s'avérer complexe. En réponse aux nombreux retours de la communauté, Next.js 15 introduit une nouvelle option expérimentale pour changer la stratégie de mise en cache par défaut.
Par défaut, Next.js met en cache les requêtes fetch, les Route Handlers (GET) et les rendus de composants. Cependant, vous pouvez maintenant inverser ce comportement. En activant l'option noStoreByDefault, toutes ces opérations deviendront dynamiques par défaut, garantissant ainsi que les données affichées sont toujours les plus récentes.
Même avec cette option activée, il reste possible de forcer la mise en cache pour une requête fetch en utilisant l'option { cache: 'force-cache' } ou de définir une durée de revalidation avec { next: { revalidate: 3600 } }. Cette nouvelle approche offre plus de flexibilité, permettant aux développeurs de choisir entre performance maximale ou la véracité des données.
Pour activer cette nouvelle stratégie, il faut ajouter la ligne suivante dans le fichier
const nextConfig = {
experimental: {
noStoreByDefault: true,
},
};
export default nextConfig;Pré-rendu partiel des pages
Introduit avec Next.js 14, le Pré-rendu Partiel (PPR) continue d'être amélioré dans Next.js 15. Cette fonctionnalité révolutionne la manière dont les pages sont rendues en combinant le meilleur du statique et du dynamique.
Auparavant, l'utilisation d'une fonction dynamique (comme l'utilisation de cookies() ou headers()) sur une page forçait son rendu à être fait côté serveur (SSR). Avec le PPR, ce n'est plus le cas. Le principe est de servir immédiatement une de page statique, pré-rendue et rapide, tout en réservant le rendu dynamique pour les composants qui ont besoin de données spécifiques au client.
Pour cela, il suffit d'envelopper les composants dynamiques dans le composant <Suspense> de React. Next.js servira alors la page statique instantanément, avec un état de chargement pour la partie dynamique, qui sera ensuite envoyée au client une fois son rendu terminé.
Pour activer cette fonctionnalité expérimentale, il est nécessaire d'ajouter une configuration dans votre fichier next.config.js ainsi que dans le composant qui sera concerné par le pré-rendu partiel :
const nextConfig = {
experimental: {
ppr: 'incremental',
},
};
module.exports = nextConfig;import { Suspense } from "react"
export const experimental_ppr = true; // Configuration nécessaire
const Page = () => {
return (
<div>
<Static />
<Suspense fallback={...}>
<Dynamic />
</Suspense>
</div>
);
};
export default Page;Mise à jour de create-next-app
Le script create-next-app, utilisé pour générer une nouvelle application Next.js, bénéficie désormais d'une amélioration au niveau de l'interface. De plus, une nouvelle option permet de choisir d'activer ou non Turbopack en mode développement.
Turbopack est un bundler JavaScript haute performance conçu pour remplacer Webpack, offrant des temps de compilation plus rapides.
Il est possible de l'activer en modifiant les script dans package.json :
"scripts": {
"dev": "next dev --turbo",
"build": "next build",
"start": "next start",
"lint": "next lint"
}Bundling des paquets externes
Pour améliorer les performances au démarrage et offrir un meilleur contrôle aux développeurs, Next.js 15 a stabilisé la manière dont les dépendances externes sont gérées.
Par défaut, l'App Router regroupe désormais tous les paquets externes utilisés dans vos composants serveur et vos Route Handlers directement dans le build de l'application. Cette approche élimine le besoin de résoudre les dépendances depuis le dossier node_modules lors de l'exécution, ce qui accélère les temps de réponse.
Pour les projets utilisant encore le Pages Router, il est maintenant possible d'activer ce même comportement grâce à la nouvelle optionbundlePagesRouterDependencies dans votre fichier de configuration :
const nextConfig = {
bundlePagesRouterDependencies: true,
};
export default nextConfig;Récapitulatif des différences entre Next.js 15 et 14
| Fonctionnalité | Next.js 14 | Next.js 15 |
| React | Support partiel de la version 19 (Canary) | Intégration complète de React 19 (stable) |
| Pré-rendu Partiel (PPR) | Introduit (expérimental) | Stabilisé et amélioré |
| Server Actions | Introduites (expérimentales) | Stabilisées et intégrées |
| Stratégie de Cache | Mis en cache par défaut | Mis en cache par défaut + option noStoreByDefault |
| Bundling des Dépendances | Comportement différent (App/Pages) | Comportement unifié + option bundlePagesRouterDependencies |
Fonction after() |
Inexistante | Nouvelle API expérimentale pour les tâches post-réponse |
| Expérience Développeur | create-next-app standard |
create-next-app amélioré avec l'option Turbopack |
Conclusion
Next.js 15 s'est imposée comme une version fondamentale, marquant un véritable tournant dans l'écosystème React. Les fonctionnalités qui étaient alors des nouveautés, comme l'intégration profonde de React 19, sont aujourd'hui le standard sur lequel reposent les applications web modernes et performantes.
L'adoption des Actions a redéfini la gestion des données côté serveur, la stabilisation du Pré-rendu Partiel (PPR) a offert une flexibilité entre statique et dynamique, et les optimisations continues du compilateur ont solidifié la réputation de Next.js comme un framework très performant.
Aujourd'hui, maîtriser les capacités de Next.js 15 n'est plus une simple option, mais une nécessité pour quiconque souhaite construire des applications web robustes et modernes. En restant à l'avant-garde de ces technologies, les développeurs peuvent continuer à construire des expériences web de qualité et très performantes.
Ressources et Documentation
Documentation officielle de Next.Js : https://nextjs.org/docs
Si vous avez une application web ou un projet web sur mesure, nous développons les logiciels qui répondent à vos besoins ! Contactez nous
Pierre Gouedar
Partager l'article