Connexion

Découvrez les Nouvelles Fonctionnalités de Next.js 15

par | 26 Oct 2024 | Next JS | 0 commentaires

Découvrez les Nouvelles Fonctionnalités de Next.js 15

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

  1. Turbopack pour le développement local
  2. APIs de requêtes asynchrones (Changement majeur)
  3. Sécurité renforcée pour les Server Actions
  4. Indicateur de route statique
  5. Nouveau composant <Form>
  6. Support pour next.config.ts
  7. Fichier instrumentation.js (Stable)
  8. Améliorations du développement et de la compilation
  9. Autres nouveautés : auto-hébergement, ESLint 9, et génération statique avancée
  10. 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 --turbo

Pourquoi 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.

Poster le commentaire

Newsletter

Vous souhaitez maîtriser les langages et outils du web ? Ne manquez aucune opportunité avec nos tutoriels, astuces et offres exclusives ! Inscrivez-vous dès maintenant pour recevoir des contenus de qualité, soigneusement sélectionnés pour vous, et boostez vos compétences. En vous inscrivant, vous recevrez une formation offerte ! 

Confirmez votre inscription via l'email qui vient de vous être envoyé. Vérifiez vos spams.

Veuillez prendre connaissance de notre politique de confidentialité