Découvrez les Nouvelles Fonctionnalités de Next.js 15. Next.js 15 marque une avancée significative dans l’écosystème du développement web moderne. Optimisé pour la performance et la sécurité, ce framework introduit des fonctionnalités puissantes comme Turbopack pour le développement local, des API de requêtes asynchrones, et des améliorations pour le composant <Form>. Cet article explore ces nouveautés en détail avec des exemples de code adaptés pour les développeurs.
Sommaire
- Turbopack pour le développement local
- APIs de requêtes asynchrones (Changement majeur)
- Sécurité renforcée pour les Server Actions
- Indicateur de route statique
- Nouveau composant
<Form> - Support pour
next.config.ts - Fichier
instrumentation.js(Stable) - Améliorations du développement et de la compilation
- Autres nouveautés : auto-hébergement, ESLint 9, et génération statique avancée
- Conclusion
1. Turbopack pour le développement local
Avec cette mise à jour, Turbopack pour le développement local devient stable (en version opt-in), offrant des performances de compilation bien améliorées.
Pour l’utiliser, il suffit de lancer :
npx next dev --turboPourquoi est-ce important ? Grâce à Turbopack, Next.js réduit la mémoire de 25-35% et accélère la compilation jusqu’à 50% pour les pages volumineuses. En effet, les développeurs bénéficient ainsi d’un environnement plus fluide, même avec des pages qui contiennent des milliers de modules. Autrefois, l’attente en développement était un obstacle ; désormais, elle devient presque imperceptible, surtout pour les projets de grande envergure.
2. API de Requête Asynchrone : Le Nouveau Standard
Parmi les changements majeurs, Next.js 15 introduit l’asynchronie pour certaines API, ce qui optimise le rendu en permettant au serveur de préparer certaines données en amont. À noter, cela inclut les cookies, les headers, et les params dans les fichiers critiques tels que layout.js, page.js, ou route.js.
Exemple :
import { cookies } from 'next/headers';
export async function AdminPanel() {
const cookieStore = await cookies();
const token = cookieStore.get('token');
// ...
}3. Sécurité Avancée pour les Server Actions
Les Server Actions de Next.js 15 renforcent la sécurité avec des fonctionnalités telles que l’élimination de code mort et la création d’IDs sécurisés pour limiter l’exposition des actions non utilisées. Cela signifie que les actions inutilisées ne sont pas accessibles publiquement, réduisant la surface d’attaque potentielle.
Exemple :
// app/actions.js
'use server';
export async function updateUserAction(formData) {
// Fonction utilisée, ID sécurisé généré
}
export async function deleteUserAction(formData) {
// Fonction non utilisée, sera exclue lors du build
}Ces nouvelles pratiques en matière de sécurité garantissent une protection renforcée des points d’entrée HTTP côté serveur, avec une approche proactive contre les failles potentielles.
4. Indicateur de Routes Statiques : Un Gain de Clarté
Afin de faciliter la distinction entre routes statiques et dynamiques, Next.js 15 introduit un indicateur visuel pendant le développement. Cela aide les développeurs à comprendre rapidement la nature de chaque page, facilitant l’optimisation des performances.
Ce que cela change ? Plus de clarté et de contrôle pour déterminer quelles pages tirer parti de la génération statique ou dynamique en fonction des besoins.
5. Nouveau Composant <Form> : Simplification des Formulaires
Next.js 15 introduit un composant <Form> qui s’étend du <form> HTML classique, mais avec des fonctionnalités de préfetche, navigation côté client, et amélioration progressive. Par exemple :
import Form from 'next/form';
export default function Page() {
return (
<Form action="/search">
<input name="query" />
<button type="submit">Submit</button>
</Form>
);
}Ce composant réduit la configuration manuelle, tout en optimisant la navigation. En clair, moins de code pour un formulaire plus performant !
6. Configuration en TypeScript : next.config.ts
Next.js 15 facilite la gestion de la configuration en TypeScript avec le fichier next.config.ts et le type NextConfig. Grâce à cela, les développeurs bénéficient d’une auto-complétion et d’une vérification de type :
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
// Options de configuration ici
};
export default nextConfig;Cette approche améliore la productivité et la lisibilité du code, avec une aide immédiate sur les paramètres disponibles.
7. Instrumentation.js : Une Surveillance de Performance Optimisée
Avec l’instrumentation.js, Next.js 15 offre un moyen stable de suivre la performance des applications en production, de capturer les erreurs, et d’intégrer des solutions d’observabilité comme OpenTelemetry.
L’exemple suivant capture le contexte d’une requête :
export async function onRequestError(err, request, context) {
await fetch('https://...', {
method: 'POST',
body: JSON.stringify({ message: err.message, request, context }),
headers: { 'Content-Type': 'application/json' },
});
}8. Améliorations de Développement et de Build
Dans cette nouvelle version, l’actualisation des modules (HMR) pour les composants serveurs est optimisée. Les requêtes fetch sont réutilisées pour accélérer le développement et réduire les coûts liés aux appels API facturés. Cela permet de réduire le temps de génération statique, notamment pour les pages nécessitant des requêtes réseau lentes.
Par exemple :
const nextConfig = {
experimental: {
staticGenerationRetryCount: 1,
staticGenerationMaxConcurrency: 8,
staticGenerationMinPagesPerWorker: 25
},
};
export default nextConfig;9. Support d’ESLint 9 : Une Transition en Douceur
Finalement, Next.js 15 prend en charge ESLint 9 tout en restant compatible avec ESLint 8. Cela signifie que la migration vers la nouvelle version est simplifiée avec des fonctionnalités de configuration intégrée. L’exécution de next lint adopte désormais des règles pour eslint-plugin-react-hooks v5.0.0 pour assurer la conformité aux bonnes pratiques de React.
10. En Conclusion
Avec ses nombreuses améliorations, Next.js 15 ouvre la voie à un développement encore plus rapide, sécurisé et optimisé. Que ce soit par le biais de Turbopack, des améliorations de l’asynchronie, de la sécurité, ou des nouvelles fonctionnalités comme le composant <Form>, cette version répond aux besoins croissants des développeurs modernes.
Pour approfondir vos connaissances avec Next JS et maîtriser ces nouvelles fonctionnalités, n’hésitez pas à rejoindre ma formation dédiée à Next JS, où vous apprendrez à créer des applications performantes et réactives.
je pense que la partie redux manque de TP
Merci beaucoup pour la formation c'est top
Bonjour certaines sections sont en cours d'écriture bien à vous Jonathan
Hello Gregory, Merci pour ton retour et ton soutien, Pour répondre à t'as question, non tu peut utiliser Yup sans…
Excellent Article mais est-on "obligé" d'utiliser React Hook Form ? Yup est une solution vraiment excellente et la mise en…