Forum du club des d�veloppeurs et IT Pro - G�n�ral JavaScript

Un panier avec LocalStorage - S�curit�

BKaernel — Wed, 29 Apr 2026 10:43:30 GMT

Bonjour. Si un sp�cialiste JS a un avis sur la question ?

J'ai cr�e un site statique pour une petite boutique, avec une page PANIER. Le panier marche avec LocalStorage et des boutons addToCart en JS.
Un bouton SDK Paypal permet de finaliser le paiement. Je r�cup�re le total via JS et je l�int�gre dans le script PayPal.
La seule indication publique est l'ID client dans le chemin du script.

Selon vous, cela pose il un probl�me de s�curit� ? Je sais bien qu'il est possible de changer le prix du total via la console, mais je ne vois pas l'int�r�t de la man�uvre
car au final le total pay� via Paypal ne correspondra pas au produit et le vendeur le verras bien.

Pour l'instant, je suis assez serein sur la proc�dure car je ne transmet aucun code, token confidentiel mais peut-�tre que je suis dans le faux.
J'ai une certaine maitrise de JS mais je ne suis pas non plus un expert.

Si certain-e parmi ont des connaissances pouss�es en JS et peuvent confirmer ou infirmer ? Merci.

Remettre dragged element dans son parent d'origine

OUZFA — Sun, 26 Apr 2026 09:30:33 GMT

Bonjour � tous,
j'ai des images qui sont dans des divs qui eux sont dispos�s horizontalement dans un grand div. L'id�e est de glisser un div contenant une image et le d�poser sur Document.

Je souhaite pouvoir remettre chaque div contenant une image dans sa place d'origine en cliquant sur une croix rouge � c�t� de l'image (histoire de d�s�lectionner l'image).

PROBLEMATIQUE: Le div g�n�ral qui contient les divs des images est en position " sticky "(afin que je puisse scroller tout en l'ayant au milieu de l'�cran)
Lorsque j'ai utilis� la m�thode de r�cup�rer la position d'origine et l'affecter ensuite � l'�l�ment, cela marche partiellement car puisque le div g�n�ral est "sticky", il reste au milieu du view tandis que l'�l�ment remis suit le mouvement du scroll.

Auriez-vous une solution pour que les �l�ments reviennent � leur place d'origine relative au parent (qui est "sticky") svp ?

Merci

NexoPad : Comment j'ai r�solu l'injection DOM en Vanilla JS pour cr�er un espace de travail unifi�

richyzx7 — Wed, 22 Apr 2026 20:37:13 GMT

Bonjour � tous,

En tant que d�veloppeurs, nous passons notre vie dans le navigateur. Mais il y a quelques mois, j'en ai eu marre de devoir jongler entre 20 onglets juste pour retrouver une note en Markdown, copier une r�ponse pr�d�finie pour un ticket de support, ou utiliser un wrapper d'IA pour reformuler un texte. Le context switching (basculement de contexte) tuait ma productivit�.

Au lieu de chercher une �ni�me application, j'ai d�cid� de d�velopper NexoPad : une extension qui unifie ces outils directement dans les couches natives du navigateur. L'�quipe de Google vient d'ailleurs de l'�valuer manuellement et de lui attribuer le badge "S�lection" (Featured), ce qui est une belle validation technique.

La Stack Technique :
J'ai gard� le front-end aussi l�ger que possible en utilisant principalement du Vanilla JS et HTML5/CSS pour les �l�ments d'interface (popup, panneau lat�ral, content scripts). Pour le back-end (synchronisation et RBAC des plans Pro/Teams), je m'appuie sur Supabase.

Les d�fis techniques et fonctionnalit�s cl�s :

1. Injection DOM et Parseur dynamique (Snippets) :
C'est la partie qui m'a donn� le plus de fil � retordre. L'extension injecte des templates directement dans le DOM actif (fonctionne sur des SPA complexes comme Gmail ou Zendesk). J'ai cod� un parseur sur mesure pour g�rer des variables dynamiques ({{input}}), du Spintax, et un Inspecteur Visuel qui permet d'extraire le texte d'un �l�ment du DOM � la vol�e pour l'utiliser comme variable.

2. Architecture IA "Bring Your Own Key" (BYOK) :
Je suis oppos� au fait de payer des abonnements mensuels pour des wrappers IA qui stockent nos donn�es. NexoPad utilise un mod�le BYOK : les appels API (OpenAI, Anthropic, Gemini) partent directement du navigateur du client vers le fournisseur. Aucune donn�e ne transite par mes serveurs. L'interface flottante permet de s�lectionner du texte sur n'importe quelle page et de le remplacer par la r�ponse de l'IA via une injection directe.

3. Notes "Local-first" et Web Clipper :
Un �diteur Markdown complet int�gr� au navigateur. Les notes peuvent �tre d�tach�es sous forme de fen�tres flottantes en utilisant l'API Picture-in-Picture, id�al pour garder des bouts de code sous les yeux.

4. Gestion des onglets avanc�e :
L'extension s'int�gre directement avec l'API native des groupes d'onglets de Chrome pour lancer des environnements de projet en masse. J'y ai ajout� un script de renommage forc� des onglets pour identifier facilement les instances dupliqu�es (tr�s utile pour les CRM).

Si vous avez l'occasion de la tester, je serais ravi d'avoir vos retours techniques, des critiques sur l'UI/UX, ou d'�changer sur les d�fis li�s au d�veloppement sous Manifest V3.

Liens :

Site web : https://nexopad.app

Chrome Web Store: https://chromewebstore.google.com/de...alkfhnnnoignca

Firefox Add-ons: https://addons.mozilla.org/es-ES/fir...notas-y-links/

Merci de m'avoir lu !

Poser une question concernant JavaScript avec Edge ?

KlausGunther — Mon, 13 Apr 2026 08:46:31 GMT

Bonjour,
Je suis sous W11 avec WebView, WebView4Delphi et JavaScript install� et maintenues � jour.
Je rencontre un probl�me avec JavaScript dans Edge (via le WVBrowser object impl�ment� par WebView4Delphi).
Pour le moment, je ne re�ois aucune r�ponse sur le forum d�di� � WebView4Delphi, o� j'ai expos� mon probl�me.

Je d�cris bri�vement:
je pars d'une page "about:blank" charg� par la m�thode Navigate, j'ajoute un �l�ment HTML "Script" dans l'�l�ment "head" de la page.
Ce script contient la d�finition d'une fonction JavaScript cr�ant un �l�ment DIV avec un texte charg� dans l'attribut InnerText.
L'ajout de cet �l�ment script fonctionne bien et la fonction est appelable.

Mais - lorsque j'appelle cette fonction, elle cr�e bien mon �l�ment DIV ajout� au "body" de la page, mais le texte ne s'affiche pas.
J'ai v�rifi� par l'inspecteur:
l'attribut TextContent de monDIV attach� au body contient bien le texte que j'ai fourni mais rien n'est affich�.

Pourriez-vous m'indiquer dans quel forum ou sousforum je pourrais poster ma question avec tous les d�tails (code HTML, JavaScript, captures etc) ?
Merci !

Cr�er une expression javascript pour calculer un �l�ment de la page

Chipniz — Sun, 05 Apr 2026 11:22:07 GMT

Bonjour,

Je suis d�butant en Javascript et nouveau sur ce forum, merci pour votre accueil.
Sous Oracle Application Express, dans une "Expression Javascript", je cherche a r�cup�rer une valeur de deux �lements d'un formulaire : P7_ROLE et P7_RELATION et selon ces valeurs, affecter une valeur � l'�l�ment P7_PRIORITE_CONTACT.
Voici les conditions :
SI P7_ROLE = "D�cideur" ET P7_RELATION = "Chaud" Alors P7_PRIORITE_CONTACT = "Haute"
SI P7_ROLE = "D�cideur" ET P7_RELATION = "Ti�de"Alors P7_PRIORITE_CONTACT = "Haute"
SI P7_ROLE = "Prescripteur" ET P7_RELATION = "Chaud" Alors P7_PRIORITE_CONTACT = "Haute"
SI P7_ROLE = "Froid" = Basse Alors P7_RELATION = "Basse"
SINON P7_RELATION = "Moyenne".

Meric pour votre aide.

�viter que copie de "<" devienne "<" au coll�

erranali — Thu, 26 Mar 2026 10:49:47 GMT

Bonjour tout le monde,

J'ai une petite fonction que j'utilise sur mon site pour la copie de code html et css g�n�r� par l'appli php, les codes sont contenus dans 2 textarea "StriHtml" et "StriCss". Cot� css tout se passe bien, par contre cot� html les caract�res de balises < et > deviennent "<" et ">" au coll� dans un �diteur de texte.

Un exemple parmi d'autres (c'est mieux qu'un long discours : https://codepen.io/erdouane/pen/QwKGwLP

Code:

1
2
3
4
5
6
7
function CopierHtml() {
	var text_to_copy = document.getElementById("StriHtml").innerHTML;
	navigator.clipboard.writeText(text_to_copy).then(
	function(){
		alert("Code HTML copié");
	})
}

J'ai beau chercher, je ne trouve pas de r�ponse (je ne pose certainement pas bien la question).
Une �me charitable saurait-elle me trouver la bonne m�thode ?
Merci d'avance et bonne continuation � toutes et tous :D que vous ayez ou non la r�ponse.

[Canvas] Supprimer les pixels d'une zone Canvas

Elliot2.0 — Fri, 13 Mar 2026 19:46:13 GMT

Bonjour,

J'essaie de supprimer des pixels sur un canvas de HTML5 d'une forme semblable � roundRect avec les bords totalement arrondis pour cr�er un fond d'image transparent.

Existe-t-il un moyen simple pour faire cela ?

Petit point en plus : je ne cherche pas la rapidit� mais plut�t la pr�cision car c'est pour cr�er mon logo puis le t�l�charger en image.

Faire glisser les pages de mon site internet (Photos) en utilisant un t�l�phone Andro�d

Trente — Wed, 25 Feb 2026 09:49:38 GMT

Bonjour,

je suis peu exp�riment� mais comme mon site utilise quelques routines java je me demandais si c'�tait possible de compl�ter l'avance ou le recul des pages de mon site par glissement du doigt sur un t�l�phone Andro�d , sur un PC ce sont les fl�ches droite <=> gauche qui permettent l'avance ou le recul.
La s�quence actuelle est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 function handler(e) {
     if (document.all) e = window.event;
     var key;
     var msg = '';
     key = e.keyCode;
     if (document.layers) key = e.which;
     if (document.all)    key = e.keyCode;
     if (key==39) msg = '_00001.htm';
     if (key==76) msg = '_00016.htm';
     if (key==80||key==37) msg = '_00015.htm';
     if (msg!='') location = msg;
   }

pour key=39 fl�che gauche c'est un recul et pour key=76 fl�che droite du PC c'est une avance.

Si vous avez la solution � me proposer, je vous en remercie d'avance.

Tr�s bonne journ�e � vous.

Convertir un texte html en image png

Kojoh — Mon, 09 Feb 2026 02:09:59 GMT

Bonjour, j'ai une zone de texte input, dans laquelle le client �crit son texte, je voudrais que via un lien, il puisse t�l�charger le texte �crit sur une image au format PNG, est ce que je peux avoir votre aide s'ils vous plait ?

Erreur : Identificateur inconnu, sur la fonction [alert]

frunch — Tue, 13 Jan 2026 11:14:35 GMT

Bonjour,

Je suis le cours

Quand je saisis le code dans node, il me reporte une erreur sur alert

Merci de votre aide

Images attach�es

Ouvrir des onglets sur des fen�tres avec window.open et chrome

JeanParis — Tue, 06 Jan 2026 15:51:02 GMT

Bonjour et meilleurs voeux !

A partir d'un bouton sur mon site web, en utilisant le navigateur Chrome, je voudrais ouvrir une URL sur une NOUVELLE fen�tre (pop-up) avec window.open, puis ouvrir 2 autres URL dans de nouveaux ONGLETS, sur la m�me pop-up pr�c�demment cr��e.

Savez-vous si c'est possible ?

Je vous remercie

Pourquoi les navigateurs ralentissent-ils les minuteries JavaScript ? par Nolan Lawson

Nolan Lawson — Tue, 06 Jan 2026 13:32:28 GMT

Pourquoi les navigateurs ralentissent-ils les minuteries JavaScript ? par Nolan Lawson

M�me si vous utilisez JavaScript depuis un certain temps, vous serez peut-�tre surpris d'apprendre que setTimeout(0) n'est pas vraiment setTimeout(0). Au lieu de cela, il pourrait s'ex�cuter 4 millisecondes plus tard :

Code:

1
2
3
4
5
const start = performance.now()
setTimeout(() => {
  // Likely 4ms
  console.log(performance.now() - start)
}, 0)

Il y a pr�s de dix ans, lorsque je faisais partie de l'�quipe Microsoft Edge, on m'a expliqu� que les navigateurs faisaient cela pour �viter les � abus �. En d'autres termes, il existe de nombreux sites web qui spamment setTimeout. Pour �viter de vider la batterie de l'utilisateur ou de bloquer l'interactivit�, les navigateurs fixent un minimum sp�cial � brid� � de 4 ms.

Cela explique �galement pourquoi certains navigateurs augmentent l'�tranglement pour les appareils sur batterie (16 ms dans le cas de l'ancien Edge), ou l'�tranglent encore plus agressivement pour les onglets en arri�re-plan (1 seconde dans Chrome !).

Une question m'a toujours taraud� : si setTimeout �tait si mal utilis�, pourquoi les navigateurs ont-ils continu� � introduire de nouveaux temporisateurs comme setImmediate (RIP), Promises, ou m�me de nouvelles fantaisies comme scheduler.postTask() ? Si setTimeout devait �tre affaibli, ces temporisateurs ne subiraient-ils pas le m�me sort ?

J'ai �crit un long billet sur les timers JavaScript en 2018, mais jusqu'� r�cemment, je n'avais pas de bonne raison de revenir sur cette question. Puis j'ai travaill� sur fake-indexeddb, qui est une impl�mentation purement JavaScript de l'API IndexedDB, et cette question a refait surface. Il s'av�re qu'IndexedDB souhaite auto-commettre les transactions lorsqu'il n'y a pas de travail en cours dans la boucle d'�v�nements - en d'autres termes, une fois que toutes les micro-t�ches sont termin�es, mais avant qu'aucune t�che (puis-je dire effront�ment � macro-t�ches � ?) n'ait commenc�.

Pour ce faire, fake-indexeddb utilisait setImmediate dans Node.js (qui partage certaines similitudes avec la version h�rit�e du navigateur) et setTimeout dans le navigateur. Dans Node, setImmediate est en quelque sorte parfait, car il s'ex�cute apr�s les microt�ches mais imm�diatement avant toute autre t�che, et sans serrage. Dans le navigateur, cependant, setTimeout est plut�t sous-optimal : dans un benchmark, je voyais Chrome prendre 4,8 secondes pour quelque chose qui ne prenait que 300 millisecondes dans Node (un ralentissement de 16x !).

En regardant le paysage des timers en 2025, il n'�tait pas �vident de savoir quoi choisir. Voici quelques options possibles :

- setImmediate - uniquement support� par les anciens Edge et IE, donc pas de choix.
- MessageChannel.postMessage - c'est la technique utilis�e par afterframe.
- window.postMessage - une bonne id�e, mais un peu bancale car elle peut interf�rer avec d'autres scripts sur la page utilisant la m�me API. Cette approche est cependant utilis�e par la polyfill setImmediate.
- scheduler.postTask - si vous ne lisez pas plus loin, c'est le gagnant. Mais expliquons pourquoi !

Pour comparer ces options, j'ai �crit un rapide benchmark. Quelques points importants � propos de ce benchmark :

1. Vous devez ex�cuter plusieurs it�rations de setTimeout (et de ses amis) pour vraiment comprendre le bridage. Techniquement, selon la sp�cification HTML, la limitation � 4 ms n'est cens�e intervenir qu'apr�s qu'un setTimeout a �t� imbriqu� (c'est-�-dire qu'un setTimeout en appelle un autre) 5 fois.

2. Je n'ai pas test� toutes les combinaisons possibles entre 1) batterie et branchement, 2) taux de rafra�chissement du moniteur, 3) onglets d'arri�re-plan et d'avant-plan, etc. J'ai une vie, et bien qu'il soit amusant d'enfiler la blouse de laboratoire et de faire quelques exp�riences, je ne veux pas passer tout mon samedi � le faire.

Quoi qu'il en soit, voici les chiffres (en millisecondes, m�diane de 101 it�rations, sur un MacBook Pro 16 pouces de 2021) :

Note : ce benchmark a �t� difficile � �crire ! Lorsque je l'ai �crit pour la premi�re fois, j'ai utilis� Promise.all pour lancer tous les timers simultan�ment, mais cela semblait aller � l'encontre de l'heuristique d'imbrication de Safari, et faisait que le timer de Firefox se d�clenchait de mani�re incoh�rente. D�sormais, le benchmark ex�cute chaque minuterie de mani�re ind�pendante.

Ne vous souciez pas trop des chiffres pr�cis : l'essentiel est que Chrome et Firefox brident setTimeout � 4ms, et que les trois autres options sont � peu pr�s �quivalentes. Dans Safari, il est int�ressant de noter que setTimeout est encore plus fortement brid�, et que MessageChannel.postMessage est un peu plus lent que window.postMessage (bien que window.postMessage soit toujours bancal pour les raisons cit�es plus haut).

Cette exp�rience a r�pondu � ma question imm�diate : fake-indexeddb devrait utiliser scheduler.postTask (que je pr�f�re pour son ergonomie) et se rabattre sur MessageChannel.postMessage ou window.postMessage. (J'ai exp�riment� diff�rentes priorit�s pour postTask, mais elles ont toutes donn� des r�sultats presque identiques. Pour le cas d'utilisation de fake-indexeddb, la priorit� par d�faut de 'user-visible' semblait la plus appropri�e, et c'est ce que le benchmark utilise).

Mais rien de tout cela ne r�pond � ma question initiale : pourquoi les navigateurs s'embarrassent-ils de setTimeout si les d�veloppeurs web peuvent simplement utiliser scheduler.postTask ou MessageChannel � la place ? J'ai pos� la question � mon ami Todd Reifsteck, qui �tait co-pr�sident du groupe de travail sur les performances du web � l'�poque o� ces discussions sur les � interventions � �taient en cours.

Il m'a r�pondu qu'il y avait en fait deux camps : l'un estimait que les temporisateurs devaient �tre limit�s pour prot�ger les d�veloppeurs Web contre eux-m�mes, tandis que l'autre estimait que les d�veloppeurs devaient � mesurer leur propre folie � et que toute heuristique de limitation subtile ne ferait que semer la confusion. En bref, il s'agissait d'un compromis standard dans la conception d'API performantes : � certaines API sont rapides mais sont accompagn�es de fusils � pompe �.

Cela correspond � mes propres intuitions sur le sujet. Les interventions du navigateur sont g�n�ralement mises en place parce que les d�veloppeurs web ont soit utilis� trop d'une bonne chose (par exemple setTimeout), soit ignor� all�grement de meilleures options (la controverse sur le Touch Listener en est un bon exemple). En fin de compte, le navigateur est un � agent utilisateur � qui agit au nom de l'utilisateur, et la priorit� des groupes d'int�r�t du W3C indique clairement que les besoins de l'utilisateur final l'emportent toujours sur ceux du d�veloppeur web.

Cela dit, les d�veloppeurs web veulent souvent faire ce qu'il faut. (Nous n'avons simplement pas toujours les outils pour le faire, alors nous saisissons l'instrument contondant qui se trouve � proximit� et commen�ons � frapper. En nous donnant plus de contr�le sur les t�ches et la planification, nous pourrions �viter d'avoir � marteler setTimeout et de provoquer un d�sordre qui n�cessite une intervention.

Ma pr�diction est que postTask / postMessage resteront pour l'instant sans ralentissement. Parmi les deux � camps � de Todd, l'existence m�me de l'API Scheduler, qui offre toute une s�rie d'outils de planification des t�ches, semble indiquer que le camp � pro-contr�le � est celui qui dirige actuellement le navire. Todd consid�re l'API comme un compromis entre les deux groupes : oui, elle offre beaucoup de contr�le, mais elle s'aligne �galement sur le pipeline de rendu du navigateur plut�t que sur des d�lais al�atoires.

Le pessimiste en moi se demande cependant si l'API ne pourrait pas encore �tre utilis�e de mani�re abusive, par exemple en utilisant sans pr�caution la priorit� user-blocking partout. Peut-�tre qu'� l'avenir, un �diteur de navigateur entreprenant mettra plus fermement le pied sur l'acc�l�rateur (pour ainsi dire) et d�couvrira que cela rend les sites web plus rapides, plus r�actifs et moins gourmands en batterie. Dans ce cas, nous pourrions assister � une nouvelle s�rie d'interventions. (Peut-�tre aurons-nous besoin d'une API scheduler2 pour nous sortir de ce p�trin !)

Je ne suis plus tr�s impliqu� dans les normes du web et je ne peux que sp�culer. Pour l'instant, je me contenterai de faire ce que font la plupart des d�veloppeurs web : choisir l'API qui me permet d'atteindre mes objectifs aujourd'hui, et esp�rer que les navigateurs ne changeront pas trop � l'avenir. Tant que nous sommes prudents et que nous n'introduisons pas trop de � b�tises �, je ne pense pas que ce soit trop demander.

Merci � Todd Reifsteck pour ses commentaires sur une version pr�liminaire de cet article.

Note : tout ce que j'ai dit � propos de setTimeout pourrait �galement �tre dit � propos de setInterval. Du point de vue du navigateur, il s'agit pratiquement des m�mes API.

Note : pour ce que �a vaut, fake-indexeddb utilise toujours setTimeout plut�t que MessageChannel ou window.postMessage dans Safari. Malgr� mes benchmarks ci-dessus, je n'ai pu obtenir que window.postMessage surpasse les deux autres dans le propre benchmark de fake-indexeddb - Safari semble avoir un certain �tranglement suppl�mentaire pour MessageChannel que mon benchmark autonome n'a pas pu mettre en �vidence. Et window.postMessage me semble toujours sujet � des erreurs, je suis donc r�ticent � l'utiliser. Pour les curieux, voici mon benchmark.

Source : "Why do browsers throttle JavaScript timers?"

Et vous ?

:fleche: Pensez-vous que cet avis est cr�dible ou pertinent ?
:fleche: Quel est votre avis sur le sujet ?

Voir aussi :

:fleche: Pourquoi je suis sceptique quant � la r��criture des outils JavaScript dans des langages "plus rapides", par Nolan Lawson

:fleche: Tout partout en m�me temps : Les promesses JavaScript, par Mensur Durakovic

Images attach�es

Bug Index is not a function

frunch — Thu, 01 Jan 2026 14:16:18 GMT

Bonjour � tous,

Meilleurs voeux de code...
Je d�bute en Javascript et j'appr�cie de trouver ce forum, apr�s celui pour le vba.
Je me sers de Visual studio et d'une vid�o d'il y a 4 ans.

Voil� le bug de la console

Je comprends ce qui ne va pas dans la page de VS :

Merci pour votre aide

Images attach�es

Next.js 16.1, le framework open source de d�veloppement web full-stack, est d�sormais disponible

Anthony — Mon, 22 Dec 2025 20:02:42 GMT

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 bundles Next.js et bien plus encore

La version 16.1 de Next.js, le framework de d�veloppement web open source, est d�sormais disponible. Cette mise � jour stabilise et active par d�faut la mise en cache du syst�me de fichiers Turbopack pour le serveur de d�veloppement, ce qui permet de r�duire consid�rablement les temps de compilation dans les grands projets. Elle introduit �galement un nouvel outil exp�rimental, Bundle Analyzer, pour aider les d�veloppeurs � optimiser la taille des bundles serveur et client, ainsi que plusieurs autres am�liorations.

Next.js est un framework open source de d�veloppement web full-stack cr�� par la soci�t� priv�e Vercel, qui fournit 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 � et le conseille aux d�veloppeurs qui � cr�ent un site web rendu c�t� serveur avec Node.js �. Alors que les applications React traditionnelles ne peuvent rendre leur contenu que dans le navigateur c�t� client, Next.js �tend cette fonctionnalit� pour inclure les applications rendues c�t� serveur. Les droits d'auteur et les marques commerciales de Next.js sont d�tenus par Vercel, qui assure �galement la maintenance et dirige son d�veloppement open source.

Next.js 16.1 est la derni�re mise � jour du c�l�bre framework open source React, qui met l'accent sur des workflows de d�veloppement plus rapides et une plus grande stabilit�. Les d�veloppeurs b�n�ficieront d'am�liorations notables apport�es � Turbopack et aux outils de projet. La mise en cache du syst�me de fichiers Turbopack pour le serveur de d�veloppement est d�sormais stable et activ�e par d�faut. Elle stocke les artefacts du compilateur sur le disque pour des temps de compilation beaucoup plus rapides, en particulier lors du red�marrage des serveurs dans les grands projets.

S'appuyant sur ces am�liorations, la mise � jour introduit un nouvel outil exp�rimental, Bundle Analyzer, pour Turbopack. Cet outil facilite l'optimisation de la taille des bundles serveur et client, contribuant ainsi � am�liorer les Core Web Vitals, � r�duire les temps de d�marrage � froid lambda et � r�v�ler les d�pendances inutiles qui alourdissent le syst�me. Bundle Analyzer en est encore � un stade pr�coce de d�veloppement et sera encore perfectionn�.

Pour le d�bogage, les d�veloppeurs peuvent d�sormais activer le d�bogueur Node.js dans next dev en passant simplement le drapeau --inspect. Cette modification applique l'inspecteur uniquement au processus concern�, �liminant ainsi le besoin de solutions de contournement globales NODE_OPTIONS=--inspect.

En ce qui concerne la gestion des d�pendances, Turbopack r�sout et externalise d�sormais correctement les d�pendances transitives lors de l'utilisation de serverExternalPackages, ce qui r�duit les frictions li�es � la configuration et �vite les conflits de version.

Mise en cache du syst�me de fichiers Turbopack pour next dev

La mise en cache du syst�me de fichiers Turbopack pour next dev est d�sormais stable et activ�e par d�faut. Les artefacts du compilateur sont stock�s sur le disque, ce qui acc�l�re consid�rablement les temps de compilation lors du red�marrage du serveur de d�veloppement, en particulier dans les projets de grande envergure.

Les applications internes chez Vercel ont test� cette fonctionnalit� au cours de l'ann�e �coul�e.

L'�quipe de Next.js a indiqu� qu'elle stabilisera la mise en cache du syst�me de fichiers pour la prochaine version.

Analyseur de bundle Next.js (exp�rimental)

Next.js 16.1 inclut un nouvel outil exp�rimental, Bundle Analyzer, qui fonctionne avec Turbopack. Il facilite l'optimisation de la taille des bundles pour le code serveur et client, ce qui contribue � am�liorer les Core Web Vitals, � r�duire les temps de d�marrage � froid de lambda et � identifier les d�pendances trop lourdes.

Code:

next experimental-analyze

L'ex�cution de cette commande lance une interface utilisateur interactive permettant d'inspecter les paquets de production, d'identifier les modules volumineux et de voir pourquoi ils sont inclus.

Le Bundle Analyzer est profond�ment int�gr� � Next.js, ce qui permet de :

Filtrer les bundles par route
Afficher la cha�ne d'importation compl�te indiquant pourquoi un module est inclus
Tracer les importations entre les composants serveur-client et les importations dynamiques
Afficher la taille des fichiers CSS et autres ressources import�es
Basculer entre les vues client et serveur

Le Bundle Analyzer en est encore � ses d�buts et sera am�lior� dans les prochaines versions.

D�bogage simplifi� avec next dev --inspect

Les d�veloppeurs peuvent d�sormais activer le d�bogueur Node.js en passant --inspect � next dev. Auparavant, cela n�cessitait de passer NODE_OPTIONS=--inspect et attachait l'inspecteur � tous les processus g�n�r�s par Next.js au lieu de seulement au processus ex�cutant le code.

Am�lioration de la gestion de serverExternalPackages

Next.js permet aux utilisateurs de garder les d�pendances d�group�es � l'aide de serverExternalPackages. Auparavant, cela ne fonctionnait de mani�re fiable que pour les d�pendances directes. Si un d�veloppeur utilisait une biblioth�que qui d�pendait en interne de quelque chose comme sqlite et devait externaliser sqlite, il fallait l'ajouter � son propre package.json, m�me si ce n'�tait pas une d�pendance directe. Cette solution de contournement divulguait des d�tails d'impl�mentation internes, cr�ait une charge de maintenance et pouvait entra�ner des conflits de versions impossibles � r�soudre lorsque plusieurs paquets n�cessitaient diff�rentes versions de la m�me d�pendance.

Next.js 16.1 corrige ce probl�me pour Turbopack, qui r�sout et externalise d�sormais correctement les d�pendances transitives dans serverExternalPackages sans configuration suppl�mentaire.

Parmi les autres am�liorations, on peut citer une r�duction de 20 Mo de la taille des installations, une nouvelle commande de mise � niveau et d'autres am�liorations.

Ex�cutez les commandes ci-dessous pour mettre � jour votre installation vers la derni�re version de Next.js :

Code:

1
2
3
4
5
6
7
8
# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@latest

Source : Next.js

Et vous ?

:fleche: Quel est votre avis sur le sujet ?
:fleche: Que pensez-vous des nouveaut�s propos�es par cette version de Next.js ? Les trouvez-vous utiles et int�ressantes ?

Voir aussi :

:fleche: Une faille de s�curit� critique dans React Server Components, "React2Shell", affecte la biblioth�que JavaScript React et le framework Next.js et expose les serveurs � l'ex�cution de code � distance

:fleche: Next.js, le framework de d�veloppement web open-source, d�voile Next.js 14, la nouvelle version offre un compilateur am�lior� Next.js Turbopack et un aper�u de la fonctionnalit� Pr�-rendu partiel

:fleche: Next.js 13 est disponible, elle apporte Turbopack, le nouveau successeur de Webpack bas� sur Rust, sur une application comportant 3 000 modules, le d�marrage de Turbopack prend 1,8 seconde

Images attach�es

Affichage progression pendant calcul long

seroze — Tue, 09 Dec 2025 12:23:44 GMT

Je cherche � d�figer ma page.
Je veux r�aliser de long calculs et je veux pouvoir afficher la progression. Pour cela j'ai utilis� setTimeout qui me permet de voir le texte d'information renseign� par le code en cours d'ex�cution.
par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
  txtLoadingInfo.innerHTML= "Calcul 1";
  calcul1();
  txtLoadingInfo.innerHTML= "Calcul 2";
  calcul2();
  txtLoadingInfo.innerHTML= "Calcul 3";
  calcul3();
  txtLoadingInfo.innerHTML= "Calcul 4";
  calcul4();
  txtLoadingInfo.innerHTML= "Calcul 5";
  calcul5();
  txtLoadingInfo.innerHTML= "Calcul terminés"

Cela n'affiche rien tant que les calculs ne sont pas termin�s et affiche directement "Calcul termin�s" � la fin.
J'ai donc utilis� le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
imgage.src = "PhotoLoading.png";
setTimeout(init,0);
 
function  init(){
  txtLoadingInfo.innerHTML= "Calcul 1";setTimeout(()=>{
  calcul1();
  txtLoadingInfo.innerHTML= "Calcul 2";setTimeout(()=>{
  calcul2();
  txtLoadingInfo.innerHTML= "Calcul 3";setTimeout(()=>{
  calcul3();
  txtLoadingInfo.innerHTML= "Calcul 4";setTimeout(()=>{
  calcul4();
  txtLoadingInfo.innerHTML= "Calcul 5";setTimeout(()=>{
  calcul5();
  txtLoadingInfo.innerHTML= "Calcul terminés"
  },0);},0);},0);},0);},0);},0);
}

R�sultat: ca fonctionne mais le code n'est pas beau, de plus l'image dont src est renseign�e par "PhotoLoading.png" n'appara�t que apr�s le 2�me calcul sauf si je met le premier setTimeout � 100 ms.
Est-il possible de faire plus �l�gant en utilisant Async Await ?
J'ai un peu test� et je n'ai pas r�ussi.