# Next.js · Veille technologique

[Source canonique](<https://sebastien.rigaux.be/veille/tags/nextjs>)

Applications React avec Next.js : routage, rendu serveur, cache et déploiement.

## [Hydratation React et SSR : éviter les écarts sans masquer le contenu](<https://sebastien.rigaux.be/veille/liens/hydratation-react-et-ssr-eviter-les-ecarts-sans-masquer-le-contenu>)

Dans Next.js, une valeur de `localStorage` peut faire diverger le HTML rendu côté serveur du premier rendu client. L’article compare les compromis : attendre le montage évite l’erreur, mais retire le contenu réel du HTML SSR ; initialiser les deux rendus avec la même valeur préserve ce contenu, au prix d’une mise à jour ultérieure pouvant provoquer un flicker.

Pour synchroniser une sidebar sans ce clignotement, un script inline applique son état au DOM avant l’hydratation et le transmet à React, qui reprend les mêmes classes. L’article distingue aussi le cas d’un contrôle de thème isolé et celui d’un backdrop mobile géré par CSS.

2026-11-07 · [Markdown](<https://sebastien.rigaux.be/veille/liens/hydratation-react-et-ssr-eviter-les-ecarts-sans-masquer-le-contenu.md>) · [Ressource originale](<https://www.gmoniava.com/blog/hydration-mismatch-errors-and-how-to-fix-them>)

## [Next.js : une skill IA analyse et réduit les imports JavaScript](<https://sebastien.rigaux.be/veille/liens/nextjs-une-skill-ia-analyse-et-reduit-les-imports-javascript>)

Next.js 16.4 fournit une skill d’agent IA qui analyse le graphe des modules et des chunks Turbopack pour repérer les imports qui alourdissent le JavaScript livré. Elle peut notamment détecter qu’un import statique ailleurs dans le bundle annule le chargement différé d’un composant, puis proposer des changements à examiner avant de les appliquer.

L’analyseur compare aussi des snapshots et filtre le code chargé au rendu initial. Vercel rapporte près de deux mégaoctets de JavaScript compressé économisés sur v0 et vercel.com ; les corrections ont été vérifiées sur des déploiements preview. L’outil requiert Turbopack, le bundler par défaut depuis Next.js 16.

2026-10-30 · [Markdown](<https://sebastien.rigaux.be/veille/liens/nextjs-une-skill-ia-analyse-et-reduit-les-imports-javascript.md>) · [Ressource originale](<https://nextjs.org/blog/ship-less-javascript-with-ai>)

## [Vinext 1.4 : moins de travail serveur et une hydratation plus rapide](<https://sebastien.rigaux.be/veille/liens/vinext-14-moins-de-travail-serveur-et-une-hydratation-plus-rapide>)

Vinext 1.4 réduit le travail à plusieurs étapes du rendu : les layouts App Router s’exécutent une seule fois par requête, le prefetch des routes dynamiques ne génère plus la page entière et les chunks nécessaires à l’hydratation se compilent en arrière-plan dans Chrome récent. Sur le benchmark Hacker News, l’éditeur mesure 31,1 ms de CPU par requête, contre 54,4 ms en 1.3 et 33,7 ms pour Next.js.

La version synchronise aussi la génération du HTML et du payload RSC en cache. Les résultats restent toutefois dépendants du scénario : sur un prototype de site éditorial, Next.js peint plus vite et consomme moins de CPU par requête. Le test de TanStack Redact révèle un autre compromis : moins de JavaScript téléchargé, mais une hydratation nettement plus coûteuse sur les pages chargées.

2026-10-30 · [Markdown](<https://sebastien.rigaux.be/veille/liens/vinext-14-moins-de-travail-serveur-et-une-hydratation-plus-rapide.md>) · [Ressource originale](<https://vinext.dev/blog/vinext-1-4>)

## [next-themes : gérer les thèmes sans flash ni piège d’hydratation](<https://sebastien.rigaux.be/veille/liens/next-themes-gerer-les-themes-sans-flash-ni-piege-dhydratation>)

next-themes applique le thème dès le chargement, prend en compte la préférence système et synchronise le choix entre les onglets. Son `ThemeProvider` fonctionne avec l’App Router comme avec `pages/`, et expose un hook pour changer de thème ou gérer plusieurs variantes.

Le point à intégrer dans l’architecture : le thème stocké dans le navigateur est inconnu au rendu serveur. L’interface qui dépend de `useTheme` doit donc attendre le montage côté client pour éviter les erreurs d’hydratation. La bibliothèque met aussi à jour l’attribut de `<html>` — avec `suppressHydrationWarning` recommandé — et reste indépendante de la solution CSS utilisée.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/veille/liens/next-themes-gerer-les-themes-sans-flash-ni-piege-dhydratation.md>) · [Ressource originale](<https://github.com/pacocoursey/next-themes#readme>)

## [Next.js 16.4 : accélérer les navigations sans tout précharger](<https://sebastien.rigaux.be/veille/liens/nextjs-164-accelerer-les-navigations-sans-tout-precharger>)

Pour réduire les skeletons dans v0, l’équipe combine le Partial Prefetching de Next.js avec des règles de cache adaptées aux données publiques ou personnalisées. Les tests Playwright `instant()` vérifient que le contenu prioritaire est déjà disponible au clic, et restent comme garde-fous en CI.

Le préchargement dépend aussi de l’intention : dans les grandes grilles, les détails ne sont chargés qu’au survol, au focus ou au toucher. Ce réglage répond à une hausse de 2,9× des requêtes de préchargement ; le bilan global rapporte des coûts quotidiens en baisse, sans attribuer cette évolution au seul refactoring.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/veille/liens/nextjs-164-accelerer-les-navigations-sans-tout-precharger.md>) · [Ressource originale](<https://nextjs.org/blog/improving-navigation-experience-in-v0-with-nextjs-16-4>)

## [Vercel Shop : accélérer un storefront Shopify avec Next.js](<https://sebastien.rigaux.be/veille/liens/vercel-shop-accelerer-un-storefront-shopify-avec-nextjs>)

Vercel Shop associe un storefront Next.js à Shopify, qui garde en charge le catalogue, les paiements et le checkout. Les Cache Components affichent rapidement les données produits puis diffusent le contenu personnalisé en streaming ; le panier, lui, se met à jour avant la réponse du serveur grâce à une UI optimiste.

Le template ajoute des options pour les agents : un assistant d’achat activable au choix, des skills pour étendre la boutique et du Markdown servi via l’en-tête `Accept`. Une base concrète pour explorer ces parcours, tout en conservant Shopify comme moteur de commerce.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/veille/liens/vercel-shop-accelerer-un-storefront-shopify-avec-nextjs.md>) · [Ressource originale](<https://vercel.shop/>)

## [vinext 1.1.0 : corrections de parité Next.js et cache stale-while-revalidate](<https://sebastien.rigaux.be/veille/liens/vinext-1-1-0-corrections-de-parite-next-js-et-cache-stale-while-revalidate>)

La version 1.1.0 de vinext, le plugin Vite qui réimplémente l’API Next.js, aligne de nombreux comportements sur Next.js, notamment pour l’App Router (gestion des redirections, métadonnées, erreurs spéciales) et la gestion du cache. Cette release introduit la stratégie **stale-while-revalidate** pour `use cache`, permettant de servir des entrées périmées tout en les régénérant en arrière-plan, et corrige plusieurs incohérences de cache et de rendu côté serveur. Un jalon pour ceux qui cherchent une alternative déployable à Next.js.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/veille/liens/vinext-1-1-0-corrections-de-parite-next-js-et-cache-stale-while-revalidate.md>) · [Ressource originale](<https://github.com/cloudflare/vinext/releases/tag/vinext%401.1.0>)

## [Next.js 16.4 : Cache Components activé par défaut et nouveautés](<https://sebastien.rigaux.be/veille/liens/next-js-16-4-cache-components-active-par-defaut-et-nouveautes>)

Next.js 16.4 recommande désormais l’utilisation des Cache Components, activés par défaut sur les nouveaux projets via `create-next-app`. Ce modèle permet de déclarer précisément le cache au niveau des composants, avec des API pour contrôler le comportement statique ou dynamique des pages et affiner le préchargement. La version apporte aussi des outils d’agent pour faciliter la migration, des optimisations sur Turbopack (taille du cache, HMR, bundles plus petits), la prise en charge de React 19.3 et plusieurs fonctionnalités expérimentales pour le build et le développement.

2026-10-15 · [Markdown](<https://sebastien.rigaux.be/veille/liens/next-js-16-4-cache-components-active-par-defaut-et-nouveautes.md>) · [Ressource originale](<https://nextjs.org/blog/next-16-4>)

## [Vinext 1.0 : Next.js sur Vite, compatible App et Pages Router](<https://sebastien.rigaux.be/veille/liens/vinext-1-0-next-js-sur-vite-compatible-app-et-pages-router>)

Cloudflare lance Vinext 1.0, une réimplémentation de Next.js basée sur Vite, qui promet plus de 99 % de compatibilité avec la suite de tests officielle (hors Cache Components). Vinext prend en charge App Router et Pages Router, propose une migration en deux commandes et introduit un mécanisme de cache warming déporté sur le réseau Cloudflare pour optimiser la pré-génération des pages. Le projet s’appuie sur une automatisation poussée pour suivre l’évolution rapide de Next.js et maintenir la compatibilité, tout en assumant des choix différents sur l’ISR et la gestion du cache.

2026-10-15 · [Markdown](<https://sebastien.rigaux.be/veille/liens/vinext-1-0-next-js-sur-vite-compatible-app-et-pages-router.md>) · [Ressource originale](<https://blog.cloudflare.com/vinext-nextjs-on-vite/?ck_subscriber_id=2550494205>)

## [Next.js September 2026 security fixes in 16.3.8 and 15.5.27](<https://sebastien.rigaux.be/en/tech-watch/links/link-64ebab624a7f5858-en>)

Next.js releases 16.3.8 and 15.5.27 to address several vulnerabilities, including image optimization SSRF and cache poisoning issues. The advisory identifies affected configurations to help teams prioritize the update.

2026-10-13 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/link-64ebab624a7f5858-en.md>) · [Ressource originale](<https://nextjs.org/blog/september-2026-security-release>)

## [Next SEO : ajouter des données structurées à Next.js](<https://sebastien.rigaux.be/veille/liens/next-seo-ajouter-des-donnees-structurees-a-next-js>)

Next SEO fournit des composants JSON-LD pour décrire le contenu aux moteurs de recherche. Le dépôt documente leur utilisation et les différences entre les versions du package.

2025-11-06 · [Markdown](<https://sebastien.rigaux.be/veille/liens/next-seo-ajouter-des-donnees-structurees-a-next-js.md>) · [Ressource originale](<https://github.com/garmeeh/next-seo>)

## [Fumadocs : construire une documentation dans son framework frontend](<https://sebastien.rigaux.be/veille/liens/fumadocs-construire-une-documentation-dans-son-framework-frontend>)

Fumadocs fournit une base de site documentaire pour plusieurs frameworks React et Astro. Le dépôt précise les environnements supportés et le fonctionnement en modules ESM.

2025-09-22 · [Markdown](<https://sebastien.rigaux.be/veille/liens/fumadocs-construire-une-documentation-dans-son-framework-frontend.md>) · [Ressource originale](<https://github.com/fuma-nama/fumadocs>)

## [Les contraintes de Next.js auto-hébergé avec plusieurs réplicas](<https://sebastien.rigaux.be/veille/liens/les-contraintes-de-next-js-auto-heberge-avec-plusieurs-replicas>)

Ce retour d’expérience examine les difficultés d’un déploiement Next.js horizontal. Il met en avant les aspects de cache et de coordination à considérer lorsque plusieurs instances servent la même application.

2025-09-07 · [Markdown](<https://sebastien.rigaux.be/veille/liens/les-contraintes-de-next-js-auto-heberge-avec-plusieurs-replicas.md>) · [Ressource originale](<https://www.dlhck.com/essays/the-complete-guide-to-self-hosting-nextjs-at-scale>)

## [Next-forge : démarrer un SaaS avec un monorepo structuré](<https://sebastien.rigaux.be/veille/liens/next-forge-demarrer-un-saas-avec-un-monorepo-structure>)

Next-forge fournit un template Turborepo séparant application, API, emails, site et documentation. Cette organisation pose les bases d’un produit Next.js comportant plusieurs surfaces.

2025-08-16 · [Markdown](<https://sebastien.rigaux.be/veille/liens/next-forge-demarrer-un-saas-avec-un-monorepo-structure.md>) · [Ressource originale](<https://www.next-forge.com/>)

## [Un starter SaaS Next.js avec authentification et multitenancy](<https://sebastien.rigaux.be/veille/liens/un-starter-saas-next-js-avec-authentification-et-multitenancy>)

Ce boilerplate assemble Next.js, Tailwind et shadcn/ui avec authentification, rôles et support des équipes. Il inclut aussi des briques de base de données, i18n et tests pour démarrer un SaaS.

2025-07-19 · [Markdown](<https://sebastien.rigaux.be/veille/liens/un-starter-saas-next-js-avec-authentification-et-multitenancy.md>) · [Ressource originale](<https://github.com/ixartz/SaaS-Boilerplate>)

## [FireGEO : un starter SaaS pour le suivi de visibilité de marque](<https://sebastien.rigaux.be/veille/liens/firegeo-un-starter-saas-pour-le-suivi-de-visibilite-de-marque>)

FireGEO combine authentification, facturation, chat IA et suivi de marque dans une base Next.js et PostgreSQL. Le dépôt documente les prérequis et la configuration de l’application.

2025-07-19 · [Markdown](<https://sebastien.rigaux.be/veille/liens/firegeo-un-starter-saas-pour-le-suivi-de-visibilite-de-marque.md>) · [Ressource originale](<https://github.com/firecrawl/firegeo>)

## [Construire un chat React avec réponses en streaming](<https://sebastien.rigaux.be/veille/liens/construire-un-chat-react-avec-reponses-en-streaming>)

Robin Wieruch construit un chat Next.js connecté à l’API OpenAI, depuis la route serveur jusqu’à l’interface. Le tutoriel ajoute le streaming pour afficher progressivement les réponses.

2025-04-20 · [Markdown](<https://sebastien.rigaux.be/veille/liens/construire-un-chat-react-avec-reponses-en-streaming.md>) · [Ressource originale](<https://www.robinwieruch.de/react-ai-chat/>)

## [Next Zod Route : typer et valider les Route Handlers](<https://sebastien.rigaux.be/veille/liens/next-zod-route-typer-et-valider-les-route-handlers>)

Next Zod Route valide paramètres, query strings et corps de requête avec Zod. Les middlewares et la gestion des réponses permettent de centraliser les conventions des routes API Next.js.

2025-02-13 · [Markdown](<https://sebastien.rigaux.be/veille/liens/next-zod-route-typer-et-valider-les-route-handlers.md>) · [Ressource originale](<https://github.com/Melvynx/next-zod-route>)

## [Next Safe Action : valider les Server Actions avec des middlewares](<https://sebastien.rigaux.be/veille/liens/next-safe-action-valider-les-server-actions-avec-des-middlewares>)

La bibliothèque ajoute validation typée et middlewares aux Server Actions Next.js. L’exemple combine schéma d’entrée et contexte d’authentification pour structurer les opérations serveur.

2025-02-12 · [Markdown](<https://sebastien.rigaux.be/veille/liens/next-safe-action-valider-les-server-actions-avec-des-middlewares.md>) · [Ressource originale](<https://next-safe-action.dev/>)

## [Onlook : modifier visuellement une interface Next.js et Tailwind](<https://sebastien.rigaux.be/veille/liens/onlook-modifier-visuellement-une-interface-next-js-et-tailwind>)

Onlook propose un éditeur visuel qui travaille sur le code de l’application. Le dépôt présente l’édition de pages et de styles directement depuis le navigateur, avec assistance IA.

2025-01-29 · [Markdown](<https://sebastien.rigaux.be/veille/liens/onlook-modifier-visuellement-une-interface-next-js-et-tailwind.md>) · [Ressource originale](<https://github.com/onlook-dev/onlook>)

Page 1 / 2

[Suivant](<https://sebastien.rigaux.be/veille/tags/nextjs/page/2>)
