# Next.js · Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/tags/nextjs>)

React applications with Next.js: routing, server rendering, caching and deployment.

## [React hydration and SSR: prevent mismatches without hiding content](<https://sebastien.rigaux.be/en/tech-watch/links/react-hydration-and-ssr-prevent-mismatches-without-hiding-content>)

In Next.js, a `localStorage` value can make server-rendered HTML differ from the first client render. The article compares the trade-offs: waiting until mount avoids the error but leaves the real content out of the SSR HTML; using the same initial value for both renders preserves that content, though a later update can cause flicker.

To synchronize a sidebar without that flash, an inline script applies its saved state to the DOM before hydration and passes it to React, which uses the same classes. The article also distinguishes an isolated theme control from a mobile backdrop handled with CSS.

2026-11-07 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-hydration-and-ssr-prevent-mismatches-without-hiding-content.md>) · [Original resource](<https://www.gmoniava.com/blog/hydration-mismatch-errors-and-how-to-fix-them>)

## [Next.js: an AI skill analyzes imports to reduce shipped JavaScript](<https://sebastien.rigaux.be/en/tech-watch/links/nextjs-an-ai-skill-analyzes-imports-to-reduce-shipped-javascript>)

Next.js 16.4 includes an AI agent skill that analyzes Turbopack’s module and chunk graph to find imports that add to shipped JavaScript. It can, for example, spot when a static import elsewhere in the bundle prevents a component from staying deferred, then suggest changes for review before applying them.

The analyzer also compares snapshots and filters code loaded on the initial render. Vercel reports nearly two megabytes of compressed JavaScript saved across v0 and vercel.com; the fixes were checked on preview deployments. The tool requires Turbopack, the default bundler since Next.js 16.

2026-10-30 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/nextjs-an-ai-skill-analyzes-imports-to-reduce-shipped-javascript.md>) · [Original resource](<https://nextjs.org/blog/ship-less-javascript-with-ai>)

## [Vinext 1.4 cuts server work and speeds up hydration](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-14-cuts-server-work-and-speeds-up-hydration>)

Vinext 1.4 reduces work across several rendering stages: App Router layouts run once per request, prefetching dynamic routes no longer renders the entire page, and the chunks needed for hydration can compile in the background in recent Chrome. On the Hacker News benchmark, the author reports 31.1 ms of CPU per request, versus 54.4 ms in 1.3 and 33.7 ms for Next.js.

The release also keeps cached HTML and RSC payload generation in sync. Results still depend on the workload: on a content-site prototype, Next.js paints sooner and uses less CPU per request. A TanStack Redact test shows another trade-off: less JavaScript to download, but substantially more expensive hydration on content-heavy pages.

2026-10-30 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-14-cuts-server-work-and-speeds-up-hydration.md>) · [Original resource](<https://vinext.dev/blog/vinext-1-4>)

## [next-themes: handle themes without flashes or hydration pitfalls](<https://sebastien.rigaux.be/en/tech-watch/links/next-themes-handle-themes-without-flashes-or-hydration-pitfalls>)

next-themes applies the theme as the page loads, respects the system preference, and syncs the choice across tabs. Its `ThemeProvider` works with both the App Router and `pages/`, while a hook lets components switch themes or handle multiple variants.

One architectural detail matters: the browser-stored theme is unavailable during server rendering. UI that depends on `useTheme` should wait until the client component mounts to avoid hydration errors. The library also updates the `<html>` attribute—`suppressHydrationWarning` is recommended—and remains independent of the CSS solution in use.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-themes-handle-themes-without-flashes-or-hydration-pitfalls.md>) · [Original resource](<https://github.com/pacocoursey/next-themes#readme>)

## [Next.js 16.4: faster navigation without prefetching everything](<https://sebastien.rigaux.be/en/tech-watch/links/nextjs-164-faster-navigation-without-prefetching-everything>)

To reduce loading skeletons in v0, the team combines Next.js Partial Prefetching with cache rules suited to public and personalized data. Playwright `instant()` tests check that priority content is ready at click time, and remain in the codebase as CI regression checks.

Prefetching also responds to user intent: in large grids, details load on hover, focus, or touch rather than for every visible card. That adjustment followed a 2.9× increase in prefetch requests. The overall comparison reports lower daily costs, while cautioning that the change cannot be attributed to this refactor alone.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/nextjs-164-faster-navigation-without-prefetching-everything.md>) · [Original resource](<https://nextjs.org/blog/improving-navigation-experience-in-v0-with-nextjs-16-4>)

## [Vercel Shop speeds up a Shopify storefront with Next.js](<https://sebastien.rigaux.be/en/tech-watch/links/vercel-shop-speeds-up-a-shopify-storefront-with-nextjs>)

Vercel Shop pairs a Next.js storefront with Shopify, which remains responsible for the catalog, payments, and checkout. Cache Components serve product data quickly, then stream personalized content; meanwhile, the cart updates before the server responds through an optimistic UI.

The template adds agent-facing options: an opt-in shopping assistant, skills for extending the store, and Markdown served through the `Accept` header. It offers a concrete starting point for these flows while keeping Shopify as the commerce engine.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/vercel-shop-speeds-up-a-shopify-storefront-with-nextjs.md>) · [Original resource](<https://vercel.shop/>)

## [vinext 1.1.0: Next.js parity fixes and stale-while-revalidate cache](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-1-1-0-next-js-parity-fixes-and-stale-while-revalidate-cache>)

vinext 1.1.0, the Vite plugin reimplementing the Next.js API, brings many behaviors in line with Next.js, especially for the App Router (redirect handling, metadata, special errors) and cache management. This release introduces **stale-while-revalidate** for `use cache`, serving stale entries while regenerating them in the background, and fixes several cache and server-side rendering inconsistencies. A milestone for those seeking a deploy-anywhere alternative to Next.js.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-1-1-0-next-js-parity-fixes-and-stale-while-revalidate-cache.md>) · [Original resource](<https://github.com/cloudflare/vinext/releases/tag/vinext%401.1.0>)

## [Next.js 16.4: Cache Components now recommended and default](<https://sebastien.rigaux.be/en/tech-watch/links/next-js-16-4-cache-components-now-recommended-and-default>)

Next.js 16.4 makes Cache Components the recommended approach, now enabled by default for new projects created with `create-next-app`. This model lets you declare cache behavior at the component level, with APIs to control static or dynamic rendering and fine-tune prefetching. The release also brings agent tooling for migration, Turbopack optimizations (cache size, HMR, smaller bundles), support for React 19.3, and several experimental features for build and development.

2026-10-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-js-16-4-cache-components-now-recommended-and-default.md>) · [Original resource](<https://nextjs.org/blog/next-16-4>)

## [Vinext 1.0: Next.js on Vite with App and Pages Router support](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-1-0-next-js-on-vite-with-app-and-pages-router-support>)

Cloudflare releases Vinext 1.0, a Vite-based reimplementation of Next.js that claims over 99% compatibility with the official test suite (excluding Cache Components). Vinext supports both App and Pages Router, offers a two-command migration path, and introduces cache warming handled on the Cloudflare network to optimize page pre-generation. The project relies on extensive automation to track Next.js changes and maintain compatibility, while making distinct choices for ISR and cache management.

2026-10-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-1-0-next-js-on-vite-with-app-and-pages-router-support.md>) · [Original resource](<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>) · [Original resource](<https://nextjs.org/blog/september-2026-security-release>)

## [Next SEO: add structured data to Next.js](<https://sebastien.rigaux.be/en/tech-watch/links/next-seo-add-structured-data-to-next-js>)

Next SEO provides JSON-LD components for describing content to search engines. The repository documents usage and differences between package versions.

2025-11-06 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-seo-add-structured-data-to-next-js.md>) · [Original resource](<https://github.com/garmeeh/next-seo>)

## [Fumadocs: build documentation within your frontend framework](<https://sebastien.rigaux.be/en/tech-watch/links/fumadocs-build-documentation-within-your-frontend-framework>)

Fumadocs provides a documentation-site foundation for React frameworks and Astro. The repository identifies supported environments and its ESM-only package model.

2025-09-22 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/fumadocs-build-documentation-within-your-frontend-framework.md>) · [Original resource](<https://github.com/fuma-nama/fumadocs>)

## [The challenges of self-hosting Next.js across replicas](<https://sebastien.rigaux.be/en/tech-watch/links/the-challenges-of-self-hosting-next-js-across-replicas>)

This experience report examines the challenges of horizontally deployed Next.js. It highlights caching and coordination concerns when multiple instances serve the same application.

2025-09-07 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/the-challenges-of-self-hosting-next-js-across-replicas.md>) · [Original resource](<https://www.dlhck.com/essays/the-complete-guide-to-self-hosting-nextjs-at-scale>)

## [Next-forge: start a SaaS with a structured monorepo](<https://sebastien.rigaux.be/en/tech-watch/links/next-forge-start-a-saas-with-a-structured-monorepo>)

Next-forge provides a Turborepo template separating the application, API, emails, website and documentation. The structure lays foundations for a Next.js product with multiple surfaces.

2025-08-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-forge-start-a-saas-with-a-structured-monorepo.md>) · [Original resource](<https://www.next-forge.com/>)

## [A Next.js SaaS starter with authentication and multi-tenancy](<https://sebastien.rigaux.be/en/tech-watch/links/a-next-js-saas-starter-with-authentication-and-multi-tenancy>)

This boilerplate combines Next.js, Tailwind and shadcn/ui with authentication, roles and team support. Database, internationalization and testing foundations help bootstrap a SaaS application.

2025-07-19 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/a-next-js-saas-starter-with-authentication-and-multi-tenancy.md>) · [Original resource](<https://github.com/ixartz/SaaS-Boilerplate>)

## [FireGEO: a SaaS starter for brand visibility monitoring](<https://sebastien.rigaux.be/en/tech-watch/links/firegeo-a-saas-starter-for-brand-visibility-monitoring>)

FireGEO combines authentication, billing, AI chat and brand monitoring in a Next.js and PostgreSQL application. The repository documents prerequisites and setup.

2025-07-19 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/firegeo-a-saas-starter-for-brand-visibility-monitoring.md>) · [Original resource](<https://github.com/firecrawl/firegeo>)

## [Build a React chat with streaming responses](<https://sebastien.rigaux.be/en/tech-watch/links/build-a-react-chat-with-streaming-responses>)

Robin Wieruch builds a Next.js chat connected to the OpenAI API, from the server route to the interface. The tutorial adds streaming to display responses progressively.

2025-04-20 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/build-a-react-chat-with-streaming-responses.md>) · [Original resource](<https://www.robinwieruch.de/react-ai-chat/>)

## [Next Zod Route: type and validate Route Handlers](<https://sebastien.rigaux.be/en/tech-watch/links/next-zod-route-type-and-validate-route-handlers>)

Next Zod Route validates parameters, query strings and request bodies with Zod. Middleware and response handling help centralize conventions across Next.js API routes.

2025-02-13 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-zod-route-type-and-validate-route-handlers.md>) · [Original resource](<https://github.com/Melvynx/next-zod-route>)

## [Next Safe Action: validate Server Actions with middleware](<https://sebastien.rigaux.be/en/tech-watch/links/next-safe-action-validate-server-actions-with-middleware>)

The library adds typed validation and middleware to Next.js Server Actions. Its example combines an input schema with authentication context to structure server operations.

2025-02-12 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-safe-action-validate-server-actions-with-middleware.md>) · [Original resource](<https://next-safe-action.dev/>)

## [Onlook: visually edit a Next.js and Tailwind interface](<https://sebastien.rigaux.be/en/tech-watch/links/onlook-visually-edit-a-next-js-and-tailwind-interface>)

Onlook provides a visual editor that works against application code. The repository demonstrates browser-based page and style editing with AI assistance.

2025-01-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/onlook-visually-edit-a-next-js-and-tailwind-interface.md>) · [Original resource](<https://github.com/onlook-dev/onlook>)

Page 1 / 2

[Next](<https://sebastien.rigaux.be/en/tech-watch/tags/nextjs/page/2>)
