Forum du club des d�veloppeurs et IT Pro - Biblioth�ques & Frameworks

Next.js 16.2 est lanc� avec un rendu et un d�marrage plus rapides, une page d'erreur repens�e

Jade Emy — Mon, 23 Mar 2026 08:10:56 GMT

Next.js 16.2 est lanc� avec un rendu et un d�marrage plus rapides, une page d'erreur repens�e, une mise � jour majeure garantissant un taux de r�ussite de 100 % pour les agents IA

Next.js 16.2 est d�sormais disponible, apportant des am�liorations majeures au flux de travail des d�veloppeurs et aux performances des sites. Le temps de d�marrage de localhost:3000 pendant le d�veloppement est d�sormais environ 87 % plus rapide que dans la version 16.1 lors de l'utilisation de l'application par d�faut, gr�ce � des am�liorations significatives du processus next dev. Par ailleurs, la d�s�rialisation de la charge utile des composants serveur est d�sormais jusqu�� 350 % plus rapide, ce qui se traduit par des gains de vitesse de rendu c�t� serveur compris entre 25 % et 60 % en conditions r�elles, selon la charge utile.

Next.js est un framework open source de d�veloppement web full-stack cr�� par la soci�t� priv�e Vercel, qui permet de d�velopper des applications web bas�es sur React avec rendu c�t� serveur et rendu statique. La documentation React mentionne Next.js parmi les � cha�nes d'outils recommand�es �, le conseillant aux d�veloppeurs lorsqu'ils � cr�ent un site web rendu c�t� serveur avec Node.js �. Alors que les applications React traditionnelles ne peuvent afficher leur contenu que dans le navigateur c�t� client, Next.js �tend cette fonctionnalit� pour inclure les applications rendues c�t� serveur.

Next.js 16.2 est d�sormais disponible, apportant des am�liorations majeures au flux de travail des d�veloppeurs et aux performances des sites. Le temps de d�marrage de localhost:3000 pendant le d�veloppement est d�sormais environ 87 % plus rapide que dans la version 16.1 lors de l'utilisation de l'application par d�faut, gr�ce � des am�liorations significatives du processus next dev.

Par ailleurs, la d�s�rialisation de la charge utile des composants serveur est d�sormais jusqu�� 350 % plus rapide, ce qui se traduit par des gains de vitesse de rendu c�t� serveur compris entre 25 % et 60 % en conditions r�elles, selon la charge utile. Si les performances sont au c�ur de cette mise � jour, celle-ci am�liore �galement la gestion des erreurs : les pages d'erreur en production b�n�ficient d'un nouveau design, les cha�nes Error.cause s'affichent dans la fen�tre contextuelle d'erreur, et les incoh�rences d'hydratation sont d�sormais clairement identifi�es afin de distinguer le contenu rendu par le serveur de celui rendu par le client.

Pour am�liorer le d�bogage et la transparence pendant le d�veloppement, Next.js consigne d�sormais dans le terminal le nom, les arguments, le temps d'ex�cution et le fichier source de chaque fonction serveur. S'appuyant sur les changements r�cents, la prise en charge du d�bogueur Node.js s'�tend au-del� du d�veloppement ; les d�veloppeurs peuvent d�sormais attacher le d�bogueur dans les environnements de production via next start --inspect.

Parmi les autres mises � jour, citons une nouvelle propri�t� transitionTypes pour le composant ``, une API Adapters stable pour la personnalisation de la compilation, des am�liorations notables apport�es � ImageResponse et la gestion automatique de plusieurs fichiers d'ic�nes ayant le m�me nom de base mais des extensions diff�rentes. Cette version apporte �galement diverses am�liorations suppl�mentaires et corrections de bogues.

Voici la pr�sentation de Next.js 16.2 :

Pr�sentation de Next.js 16.2

Next.js 16.2 apporte des am�liorations en termes de performances, un d�bogage optimis�, des am�liorations pour les agents, ainsi que plus de 200 corrections et am�liorations pour Turbopack.

Temps de mise � disposition de l'URL plus rapide en d�veloppement

Nous avons consid�rablement r�duit le temps n�cessaire avant que localhost:3000 ne soit pr�t pour next dev. Sur la m�me machine et pour le m�me projet, le d�marrage est environ 87 % plus rapide par rapport � Next.js 16.1 sur l'application par d�faut.

Rendu plus rapide

Nous avons apport� une modification � React qui acc�l�re la d�s�rialisation de la charge utile des composants serveur jusqu'� 350 %. L'impl�mentation pr�c�dente utilisait un callback reviver JSON.parse, qui franchissait la fronti�re C++/JavaScript dans V8 pour chaque paire cl�-valeur du JSON analys�. M�me un reviver trivial sans op�ration rend JSON.parse environ 4 fois plus lent que sans reviver.

La nouvelle approche utilise un processus en deux �tapes : un simple JSON.parse() suivi d'une exploration r�cursive en JavaScript pur. Cela �limine la surcharge li�e au franchissement de la fronti�re et ajoute des optimisations telles que le court-circuitage des cha�nes de caract�res simples qui ne n�cessitent pas de transformation.

Dans les applications Next.js r�elles, cela se traduit par un rendu HTML 25 % � 60 % plus rapide, en fonction de la taille de la charge utile RSC.

Nouvelle page d'erreur par d�faut

La page d'erreur par d�faut affich�e en production a �t� repens�e. Lorsque votre application rencontre une erreur et que vous n'avez pas d�fini de fichier global-error.tsx ou error.tsx personnalis�, Next.js affiche une page de secours int�gr�e. Cette page de secours a �t� mise � jour avec un design plus �pur� et plus moderne.

Journalisation des fonctions serveur

Next.js consigne d�sormais l'ex�cution des fonctions serveur dans le terminal pendant le d�veloppement. Chaque entr�e de journal indique le nom de la fonction, ses arguments, son temps d'ex�cution et le fichier dans lequel elle est d�finie.

Indicateur de diff�rence d'hydratation

Lorsqu'une divergence d'hydratation se produit, la fen�tre d'erreur superpos�e indique d�sormais clairement quel contenu provient du serveur et quel contenu provient du client. La diff�rence utilise une l�gende + Client / - Server, ce qui permet de voir imm�diatement ce qui diverge.

--inspect pour next start.

Next.js 16.1 a introduit next dev --inspect pour connecter le d�bogueur Node.js pendant le d�veloppement. Dans la version 16.2, cette fonctionnalit� s'�tend � next start, vous permettant de connecter un d�bogueur Node.js � votre serveur de production.

Code:

next start --inspect

Cela est utile pour d�boguer des probl�mes ou profiler l'utilisation du CPU et de la m�moire.

Propri�t� transitionTypes pour next/link/.

Le composant accepte d�sormais une propri�t� transitionTypes � un tableau de cha�nes de caract�res qui sp�cifie les transitions de vue � appliquer lors de la navigation. Chaque type est transmis � React.addTransitionType pendant la transition de navigation, ce qui vous permet de d�clencher diff�rentes animations en fonction de la direction ou du contexte de la navigation.

Code:

1
2
3
"/about" transitionTypes={['slide']}>
  About

Cette fonctionnalit� n'est prise en charge que dans l'App Router, car le Pages Router n'utilise pas les transitions React pour la navigation. La propri�t� transitionTypes sur les liens du Pages Router est ignor�e de mani�re silencieuse, ce qui permet aux composants de lien partag�s de fonctionner sur les deux routeurs.

ImageResponse plus rapide

ImageResponse a �t� mis � jour avec des am�liorations significatives :

- ImageResponse deux fois plus rapide pour les images basiques, jusqu'� 20 fois plus rapide pour les images complexes

- Couverture CSS et SVG am�lior�e, incluant la prise en charge des variables CSS en ligne, text-indent, text-decoration-skip-ink, box-sizing, display: contents, position: static, et les valeurs en pourcentage pour gap.

- Police par d�faut chang�e de Noto Sans � Geist Sans

Causes des erreurs dans la fen�tre contextuelle de d�veloppement

La fen�tre contextuelle d'erreur affiche d�sormais les cha�nes Error.cause, ce qui facilite le d�bogage des erreurs qui en contiennent d'autres. Les causes sont pr�sent�es sous forme de liste plate sous l'erreur de niveau sup�rieur, sur un maximum de 5 niveaux de profondeur.

Adaptateurs

Les adaptateurs sont d�sormais disponibles en version stable. Il s'agit d'une nouvelle API qui permet aux plateformes de personnaliser le processus de compilation.

Cela est utile pour les plateformes de d�ploiement ou les int�grations de compilation personnalis�es qui doivent modifier la configuration de Next.js ou traiter le r�sultat de la compilation.

Nous partagerons un aper�u plus d�taill� des adaptateurs la semaine prochaine.

Formats d'ic�nes multiples

Les fichiers d'ic�nes multiples portant le m�me nom de base mais des extensions diff�rentes sont d�sormais g�r�s automatiquement dans le r�pertoire de votre application (par exemple, icon.png et icon.svg). Cela est utile pour la prise en charge de la solution de secours dans les navigateurs. Les navigateurs modernes peuvent utiliser des ic�nes SVG tandis que les navigateurs plus anciens se rabattent sur le format PNG. Les deux formats sont rendus sous forme de balises distinctes.

Source : Annonce de Next.js 16.2

Et vous ?

:fleche: Pensez-vous que cette version est cr�dible ou pertinente ?
:fleche: Quel est votre avis sur le sujet ?

Voir aussi :

:fleche: Next.js 16.1, le framework open source de d�veloppement web full-stack, est d�sormais disponible avec la mise en cache du syst�me de fichiers Turbopack, un analyseur de bundle Next.js et bien plus encore

:fleche: Comment nous avons reconstruit Next.js avec l'IA en une semaine, l'interface API Next.js vinext permet de cr�er des applications de production jusqu'� 4 fois plus rapidement, par Steve Faulkner

:fleche: �tat de JavaScript 2022 : React reste le framework front-end dominant mais est en perte de vitesse c�t� satisfaction, JQuery est la troisi�me biblioth�que la plus utilis�e

Images attach�es

Introduction � libmodulor

CHAF007 — Sat, 06 Dec 2025 09:45:06 GMT

Bonjour � tous,

Je souhaiterais vous pr�senter libmodulor, une petite bibilioth�que sur laquelle je travaille sur mon temps libre.
Elle permet de cr�er des applications TypeScript "platform-agnostic". C'est-�-dire qu'elle permet de d�finir un socle applicatif commun, que l'on peut r�utiliser sur plusieurs plateformes.

�a fonctionne suivant quatre couches (non, attendez, ne fuyez pas tout de suite :mouarf:) :

- UseCase : c'est une fonctionnalit�. Exemples : SignIn, CreatePost, TransferAccount, InviteContacts...
- App : c'est une groupement logique de use cases, partageant un manifeste et des traductions communes. Exemples : Auth, Accounting, CMS...
- Product : c'est un grouepement logique d'apps, faisant un produit final. Exemples : GitHub, Facebook, LinkedIn, Airbnb...
- Target : c'est le plateforme "technique" qui expose le produit. Exemples : server-node-express, server-node-hono, server-nextjs, cli-node, spa-react, react-native...

Comme vous pouvez le voir, ce n'est pas un �ni�me framework JavaScript. libmodulor est full-stack et ne fait aucun choix sur les outils techniques.
Vous �tes libres de choisir express, hono, fastify... (c�t� server) et react, angular, vue... (c�t� client).
libmodulor offre juste des adaptateurs par d�faut, principalement parce que ce sont ceux que j'utilise r�guli�rement (express, hono, react, react-native).

La bibioth�que offre �galement du testing automatique ainsi que de la g�n�ration de doc automatique, entre autres.

Comme vous pouvez le voir, ce n'est pas "simple" et �a n'est donc pas destin� aux applications "simples".
Mais plus aux applications m�tier que l'on voudrait construire en TypeScript, n�cessitant un cadre tr�s bien d�fini.
D'autant que libmodulor est enti�rement bas�e sur l'injection de d�pendances afin d'assurer une architecture "platform-agnostic".

Voil� je suis preneur de vos retours constructifs, bug, am�liorations. Il y a encore �norm�ment � faire :).
Et bien s�r je me ferai un plaisir de vous aider si vous bloquez sur quelque chose.

Pour en savoir plus :

- Documentation : https://libmodulor.c100k.eu
- GitHub : https://github.com/c100k/libmodulor
- Playground : https://libmodulor.c100k.eu/docs/examples/Playground

hightchart conflit avec prototype.js

kevin254kl — Tue, 15 Jul 2025 14:37:06 GMT

Hello � tous,

Je suis sur un projet legacy avec jquery, prototype.js et highcharts
Le probl�me c'est que je suis une partie du projet ou d�s que j'initialise highcharts.
J'ai test� tous que j'ai pu trouver avec jquery des onload ...
J'ai d'autres pages ou c'est nickel.

Pourriez vous m'aider ou m'aiguiller pour trouver une solution svp ?

Code:

1
2
3
4
5
6
7
8
9
10
11
prototype.js:1 Uncaught TypeError: this.each is not a function
    at HTMLCollection.collect (prototype.js:1:10990)
    at a0.getContainerBox (highcharts.js:9:205387)
    at a0.getChartSize (highcharts.js:9:205718)
    at a0.getContainer (highcharts.js:9:206909)
    at a0.firstRender (highcharts.js:9:215377)
    at a0. (highcharts.js:9:199505)
    at U (highcharts.js:9:2580)
    at a0.init (highcharts.js:9:198727)
    at new a0 (highcharts.js:9:198437)
    at T.jQuery.T.jQuery.fn.highcharts (highcharts.js:9:2818)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
jQuery(function () {
 
    jQuery('#charts').highcharts({
 
        chart: {
            type: 'column',
            height: '400'
        },
 
        title: {
            text: ''
        },
 
        xAxis: {
            categories: [","',$xName)?>"]
        },
 
        yAxis: {
        	type: "logarithmic"
        },
 
        tooltip: {
            formatter: function () {
                return '' + this.x + '
' +
                    this.series.name + ': ' + this.y + '
' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: "black",
                    style: {
                        textShadow: '0px black'
                    }
                }
            }
        },
        series: [{
			type: 'column',
            name: 'Inscriptions',
            data: [implode(',',$inscriptions['normales'])?>],
            stack: 'Normale',
            color: "#4DB2FF"
        },
        {
			type: 'column',        	
            name: 'Inscriptions avec documents',
            data: [implode(',',$inscriptions['normalesMails'])?>],
            stack: 'Normale',
            color: "#48FF78"  
        },      
        {
			type: 'column',        	
            name: 'Inscriptions probatoire',
            data: [implode(',',$inscriptions['probatoires'])?>],
            stack: 'Probatoire',
            color: "#ACDBFF"
        },
        {
			type: 'column',        	
            name: 'Probatoires avec documents',
            data: [implode(',',$inscriptions['probatoiresMails'])?>],
            stack: 'Probatoire',
            color: "#B9FFCB"  
        }]
    });