DEV Community: Erfan Ebrahimnia

Instant Navigation in Multi Page Apps

Erfan Ebrahimnia — Sun, 30 Aug 2026 18:10:26 +0000

Next.js Instant Navigation in Multi Page Apps

Not every Next.js app can "just be an SPA". This post explores which instant navigation features still work in a multi-page app, and where browser-native options can replace them, such as cross-document view transitions, BFCache, and the Speculation Rules API

⚡️ Sponsor: Tigris Data

Get the universal API for storage

Snapshot = tag. Fork = branch. Announcing StorageSDK, bringing this Git-like model to storage, making it easier to build reproducible AI-agent workflows in TypeScript.

📙 Articles / Tutorials / News

Next.js: August 2026 Security Release

Next.js shipped urgent fixes for two critical security bugs, including one in AVIF image handling and another affecting some Windows-hosted apps. If you use Next.js 15.5 or 16.3, update quickly

Avoiding Server Component Waterfall Fetching with React 19 cache()

We shared this before, but it now also covers Cache Components and "use cache: private" for request-specific data like the current user.

How to Build an Event Calendar with Next.js and SVAR React Calendar

Walks through building a full event calendar in Next.js using SVAR’s React Calendar and a simple backend

PR: Add experimental Variants

A new early idea for handling things like themes, locales, and feature flags. It lets Next.js prerender selected variants without changing your route structure

📦 Projects / Packages / Tools

Zod 4.5: Schema Compilation

The big new feature here is z.compile() which lets you pre-compile schemas for much faster parsing. The release also cuts memory use a lot, adds helpers like z.creditCard(), z.properties(), and z.deepPartial()

nuqs v2.10

nuqs lets you keep state in the URL query string instead of only in React state

Heyo Docs

Create a standalone documentation site with MDX content, navigation, search, OpenAPI reference pages, and built-in SEO.

tailwind-stylex

Use Tailwind’s default design tokens directly in StyleX. Get typed, autocomplete-friendly constants with no package-specific config, scanning, or generation

Sponsor the newsletter

If you’re building something for the Next.js community, consider sponsoring this newsletter and putting it in front of 7,100+ Next.js developers.

🌈 Related

A deep dive into StyleX

A good intro to the main ideas and tradeoffs of StyleX. Flavio explains how it works, why it uses small reusable CSS classes, and how to use it with React and Astro

AI Coding will Prevent Expertise

The author argues that AI should be used more like a tutor than a tool that writes everything for you. Especially for new developers, doing the work still matters

Making React Testing Library Tests 43% Faster

A practical performance story about making React tests faster without changing how they are written. Most of the gains came from jsdom fixes around labels, selectors, and events

App-like UX in Next.js 16.3

Erfan Ebrahimnia — Sun, 23 Aug 2026 15:38:17 +0000

Building App-like Experiences with Next.js 16.3

A hands-on look at how Next.js 16.3 helps apps feel fast and smooth, more like a single-page app, without losing the benefits of server rendering. Using four demo apps, it shows how features like Instant Navigations, Cache Components, Partial Prefetching, optimistic updates, Suspense streaming, offline retry, and View Transitions work together in real apps

⚡️ Sponsor: Arcjet

AI compliance controls

Protect your AI applications from prompt injection, PII leaks, and unauthorized tool calls.

📙 Articles / Tutorials / News

Next.js team AMA

The Next.js team opened the floor to community questions and covered a lot of ground. The AMA focused on Next.js 16.3, performance, caching, App Router, React Server Components, and upgrading apps, along with some insight into how the team works on the framework

Coordinating Optimistic Updates in Next.js

This guide shows how useActionState and useOptimistic can work together to keep the UI updated right away, save changes in the right order, and roll back cleanly if something fails

Using next/root-params in Next.js 16.3

The new next/root-params API lets Server Components read top-level params like [locale] from deep in the tree, which makes next-intl much easier to use

Docs for React's new `browser()` API

The docs for React's new browser() API are now available in Canary. You can pass it to use(), where it suspends to the nearest Suspense boundary on the server, then renders normally in the browser

📦 Projects / Packages / Tools

Better Auth 1.7

A big release for Better Auth, especially around OAuth, OpenID Connect, SCIM, SSO, MCP, and device login flows. The main theme here is stronger auth, better enterprise identity support, and more standards-based ways for apps and devices to sign in and get access

Next 16 Calendar "Flow"

A calendar and booking demo exploring Async React, Cache Components, Partial Prefetching, and View Transitions with Next.js 16.3, React 19, Tailwind CSS v4, and Prisma.

Formisch v1 is here

Formisch, a schema-based form library, has reached a stable v1 release and is now ready for production use. It works across eight frameworks and lets you keep the same form logic even if you change UI or framework later

scroll-mask

A collection of Tailwind CSS utilities for fading edges of scroll containers based on scroll position.

Sponsor the newsletter

If you’re building something for the Next.js community, consider sponsoring this newsletter and putting it in front of 7,100+ Next.js developers.

🌈 Related

AI is removing the middle class of software engineering

The author makes the case that AI is changing what makes an engineer valuable. If anyone can generate lots of code, then the real skill is making good decisions, spotting bad ideas early, and understanding the system well enough to explain and improve it

𝕏 Why Cursor Left Solid for React

Cursor has mostly finished moving from Solid to React, saying React was the safer and more predictable choice for performance and maintenance. It also found React easier for AI agents to work with in practice

Making Referential Stability a Type

This article explores using a branded Stable<T> type to mark values that should not change reference unless something real changes

Next.js 16.3 with Instant Navigations

Erfan Ebrahimnia — Sun, 16 Aug 2026 15:01:25 +0000

Next.js 16.3

This update focuses on speed and a better developer experience. It improves how apps build, render, prefetch, and recover from errors, with some useful new tools too

Uses much less RAM in dev (up to 90% less)
Builds are much faster thanks to caching
Server-side rendering is faster and can handle more traffic
New “Instant Navigations” features help pages feel more like an SPA

𝕏 Instant Navigations in Next.js 16.3

Aurora Scharff has put together a series on building apps that feel fast and smooth like SPAs, while still keeping server rendering and server-side data fetching

⚡️ Sponsor: Tigris Data

Your agent’s sandbox is disposable. Its work shouldn’t be.

What happens to your agent’s work when its sandbox disappears? Keep files, artifacts, and state durable between runs— without making the compute permanent.

Learn More →

📙 Articles / Tutorials / News

Making Navigations Instant in v0

Vercel explains how they made v0 much faster with Next.js 16.3. The new instant() helper is especially interesting, since it lets teams test if a navigation feels instant

Fixing Optimistic UI Race Conditions

This post shows how fast repeated clicks can trigger overlapping requests, and why a simple per-item lock can stop race conditions before they happen

Client-side data fetching

Next.js has published a guide on choosing the right client fetching pattern. It covers simple one-time reads, loading states, Suspense, shared cache, and mutations

Your useMemo Probably Isn't Doing Anything

Many React apps don’t need as much memoization as people think. This article shows that moving state lower in the tree often helps more

📦 Projects / Packages / Tools

React Bits – New Components

A big update has landed on React Bits, with 27 new free components added across multiple categories. That brings the library to 165+ components in total, including new backgrounds, text animations, and other UI components

Announcing TanStack Table V9

After two years of work, TanStack Table V9 is now stable. It brings faster performance, better type safety, smaller bundles through tree shaking, and new table features

Sugar High v2

With v2, Sugar High grows into a broader code highlighting toolkit with React components, a Remark plugin, and theme support that works well with Tailwind. The main focus remains the same: small size, simple setup, and easy extension

shadcn/ui chatbot-template

A minimal chatbot template built with Next.js, AI SDK, shadcn/ui, shadcn/react, shadcn/typeset. It runs on the Vercel AI Gateway.

Sponsor the newsletter

If you’re building something for the Next.js community, consider sponsoring this newsletter and putting it in front of 7,100+ Next.js developers.

🌈 Related

The state of zero-runtime CSS-in-JS, mid-2026

As React has changed, CSS-in-JS has changed with it. This article looks at why runtime styling has lost ground and which compile-time tools are now leading the space

The secure way to release an npm package in 2026

Covers the main steps teams can take to secure npm publishing, including 2FA, CI hardening, dependency cooldowns, and manual approval flows

Visual Regression Testing: The Most Important Test You're Not Running

Your tests can pass even when your UI looks wrong. This post shows how visual regression testing catches those bugs by comparing screenshots, with examples using Percy, Chromatic, and Vitest Browser Mode

Can RSCs Make Next.js Feel Faster?

Erfan Ebrahimnia — Sat, 01 Aug 2026 20:55:54 +0000

Experimenting with RSCs for Performance and UX in Next.js

The post shows how moving more work to the server can reduce client-side JavaScript and improve loading speed. It uses real examples like search, "load more", and previews to show how this can work in practice

⚡️ Sponsor: Tigris Data

Bucket sharing. Without the IAM guessing game.

One button. One teammate. Exactly the access you intended. Stop writing bucket policies and get back to shipping.

Learn more →

📙 Articles / Tutorials / News

PR: Add ReactDOM browser() API

A new react-dom API called browser() lets components intentionally pause during SSR, then continue rendering in the browser. It’s designed for client-only UI that you don’t want rendered on the server

Next.js offline-support

Next.js is testing a new feature to make apps work better when the internet drops. Instead of showing errors right away, things like navigation, data loading, and Server Actions can wait and try again once the connection is back.

How to find a Next.js memory leak in production

The post points to three open framework leaks in recent Next.js versions, explains how each one shows a different memory growth pattern, and shows how heap snapshots can help you tell whether the problem is in Next.js or in your own code

📦 Projects / Packages / Tools

Lifeline

A polished timeline component for showing a life, company, or journey over time. It uses a horizontal, scroll-driven layout on desktop and a vertical one on mobile, and supports events, photos, people, badges, and even small effects. It ships as a shadcn registry item

shadscan – Deterministic UI audits for shadcn apps

A handy tool that scans a shadcn-based React app and gives its UI a score out of 100, along with clear evidence for every issue it finds.

next-nuke

At first glance this sounds like a simple delete command, but it does more than that: safer checks, dry runs, confirmation prompts, monorepo support, cache-only cleaning, Turbo cache clearing, and optional reinstalling

mobx@7.0.0

MobX is a popular state management library for React apps. Version 7 is a cleanup-focused major release that also makes the library smaller, with the production ESM bundle dropping from 17.02 KiB gzip to 13.96 KiB gzip. It removes a lot of old, long-deprecated features, including ES5 fallbacks, legacy decorators, and several older React helper APIs

Sponsor the newsletter

If you’re building something for the Next.js community, consider sponsoring this newsletter and putting it in front of 7,100+ Next.js developers.

🌈 Related

React’s programming model, compiled

Octane is a new framework that keeps the React style many of us already know, but compiles things ahead of time for speed. Its main ideas are no virtual DOM, no rules of hooks, and no manual dependency arrays, since the compiler figures that out for you.

The Absolute State of Management

The author argues that libraries like Redux, Zustand, and Jotai do not truly manage state. Instead, real state management needs better support for syncing changes over time

Props, Composers, and Providers: the composition pattern we're converging on

A practical look at how to structure React components: start with plain props, move to compound components when prop lists get too long, use composers and providers when the same UI needs different data sources, and only lift state when it truly needs to cross component boundaries

Weaponizing And Defending The React Flight Protocol: Deserialization Sinks In RSCs

The article walks through the Flight wire format, the meaning of its special prefixes, how the React2Shell exploit worked, and why some risks may be structural rather than one-off bugs

Next.js Is Getting Much Better at SPA-like UX

Erfan Ebrahimnia — Sun, 26 Jul 2026 19:36:11 +0000

Building SPA-like experiences with Next.js

Aurora Scharff’s post series looks at how to make Next.js apps feel fast and smooth like a single-page app, while still using server rendering. She shows how new Next.js features like Cache Components and Partial Prefetching can make pages load instantly, keep data around between visits, and reduce loading states.

⚡️ Sponsor: Arcjet

AI compliance controls

Protect your AI applications from prompt injection, PII leaks, and unauthorized tool calls.

📙 Articles / Tutorials / News

Advanced React State Boundaries in a Real Next.js App

A practical article on the tricky parts of building a modern Next.js app where server data, client state, URL state, browser APIs, RSC, and TanStack Query all meet

Cache Components in Next.js

Next.js has changed its caching story, and this post explains why. The big change is that data is now dynamic by default, and you choose what to cache with "use cache". The post walks through how to cache parts of a page, stream other parts with Suspense, set cache time with cacheLife, and clear cached data with cacheTag.

Next.js moves to scheduled security releases

Vercel is moving Next.js to a monthly security release schedule instead of shipping fixes at random times. The goal is to make updates easier to plan for, especially as AI tools are helping researchers find more bugs faster. Check out July 2026's security update

𝕏 TypeScript 7 Support in Next.js

Next.js 16.3 Preview adds early support for TypeScript 7 with the new experimental.useTypeScriptCli option. Since TypeScript 7 currently does not include its JavaScript API, Next.js now has to call the installed tsc command directly during next build instead

📦 Projects / Packages / Tools

Canvas UI

From the creator of React Bits, Canvas UI is a OSS library of creative, framework-agnostic components built with canvas. It includes effects like fluid simulations, shaders, and 3D scenes that can run on top of a live, interactive interface

stylextras

A collection of libraries and utilities that pair well with StyleX. It's still a work in progress, but you can already copy the component code from the repository

RSC Boundary

See server and client component boundaries directly on the page while developing.

Sugar High

A tiny JavaScript and JSX syntax highlighter built for the browser or any JS runtime that can set HTML strings

⚡️ Sponsor: RepoClip

Turn your GitHub repo into a demo video in 60 seconds

RepoClip's AI reads your code and generates a professional promo video — script, visuals, narration, and music — with zero editing.

Just paste a URL, and your first video is free (no credit card).

Built with Next.js.

🌈 Related

React Forms Done Right

Forms look simple, but they quickly become tricky once validation, async checks, server requests, and error handling are involved. This guide breaks forms down into simple ideas, then shows how to build them with plain HTML, React 19 server actions, and TanStack Form

What's one React pattern you stopped using after working on larger projects?

On Reddit, developers are discussing which ideas seemed useful early on but became harder to manage in larger React apps

ReactBench v1

A new benchmark made to check how well coding agents handle real React work. Instead of only checking if code passes tests, it also looks for problems that affect real users, like performance issues and accessibility mistakes

𝕏 Vercel Hires Pete Hunt and Nick Schrock

Vercel has brought in two big names in developer tools. Pete Hunt, an early React pioneer at Meta who helped push React at Instagram Web, will lead Frameworks and Next.js. Nick Schrock, a co-creator of GraphQL, will work on agentic developer experience and future tooling for AI-driven software

What Actually Triggers Suspense in React?

Erfan Ebrahimnia — Sat, 18 Jul 2026 13:55:19 +0000

React Suspense Docs Update

Aurora Scharff has been working on the React Suspense docs, which now include a full list of what can activate a Suspense boundary, along with live demos for each case. She also shared a thread showing the demos on X

⚡️ Sponsor: Tigris Data

Get the universal API for storage

Snapshot = tag. Fork = branch. Announcing StorageSDK, bringing this Git-like model to storage, making it easier to build reproducible AI-agent workflows in TypeScript.

📙 Articles / Tutorials / News

I let React Compiler handle memoization: Here’s what actually broke

What happens when you let React Compiler take over memoization in a Next.js app? The article shows that you can remove many manual memo hooks, but not always all of them, especially when third-party tools depend on stable function references.

Hidden Cost of Hydration Mismatches

If you’ve ever ignored a hydration mismatch warning, this article is worth reading. It explains in simple terms how mismatches can force React to recreate DOM and make Largest Contentful Paint much worse than it should be

► Async React with Vercel's Aurora Scharff

Aurora Scharff returns to PodRocket to discuss Async React and the React 19 features built around it. She looks at why these patterns matter for real users, how Next.js is improving caching with cache components and the App Router, and why fast-feeling apps matter as much as stable layouts

📦 Projects / Packages / Tools

env.style

If you often work across different Next.js environments, this package makes them easier to recognize at a glance. You can assign colors, add custom icons, and adjust settings so important colors stay untouched

Vinext 1.0 (Beta)

vinext, the project that lets you run Next.js apps on Vite, has reached its first beta release. This update adds a new create-vinext-app starter, improves Cloudflare support with cache warming and prerendered route caching, and now requires Vite 8. There are also several fixes for App Router behavior, config handling, and build performance

shadcn/ui July 2026 - Base UI as the Default

New shadcn/ui projects now use Base UI by default, while Radix remains fully supported. The change comes after strong adoption, with Base UI now stable, widely used, and the default choice in newer shadcn/create projects

shadcn/typeset

A CSS tool for making markdown look good with less work. Instead of styling each element one by one, it styles everything inside a typeset wrapper and lets you adjust the look with three simple variables

⚡️ Sponsor: Expo

How is your app performing in production?

Most teams learn about performance regressions from user complaints. Observe surfaces them within hours of the release that caused it.

🌈 Related

Can't Maintain: A React Component API Game

A collection of learning apps where you compare two options and pick the better one. It covers topics like React, TypeScript, SEO for Next.js, testing, Git, and more, with each app adding its own tools like playgrounds, inspectors, and visual viewer

Reverse Engineering ChatGPT Web: How OpenAI Built for a Billion Users

Yes, it's partly a story about moving away from Next.js, but it's still a very interesting read. It breaks down how ChatGPT's web app is built, from fast server rendering and streaming responses to feature flags, bot checks, and a strong focus on getting users typing as quickly as possible

Vercel and Shopify are rebuilding Hydrogen

Hydrogen is Shopify's framework for creating headless storefronts. Vercel and Shopify have announced a full rebuild to make it more open and easier to use across different frameworks, including Next.js

When React Hooks Stop Scaling: Moving Complex State to Zustand

This is a nice example of an architecture problem showing up as a bug. Oren Farhi explains how a speech recognition hook worked well at first, but became hard to reason about once transcript updates needed to come from outside the component tree

Better Auth Joins Vercel

Erfan Ebrahimnia — Fri, 10 Jul 2026 10:20:54 +0000

📣 A quick note before we get started: I'm moving this newsletter from Kit to a new platform soon. You don't need to do anything, if you want to keep receiving Next.js Weekly. During the switch, I'll also tidy up the mailing list. Anyone who hasn't interacted with the newsletter in the last 3 months will be unsubscribed automatically

Better Auth is joining Vercel

Better Auth, the open source auth framework, is joining Vercel. The goal is to give the team more support to keep building auth in the open while staying framework-agnostic. The post also shares the story behind Better Auth, from solving multi-tenant auth problems in Next.js to later taking over Auth.js / NextAuth.js. Looking ahead, the team wants to invest more in auth for AI agents, where apps need secure and revocable access on behalf of users

From Vercel Ship:

⚡️ Sponsor: Blazity

Next.js migration toolkit that eliminates guesswork and protects production and stability

Most Next.js migrations from Pages Router to App Router follow the same pattern: a developer reads the docs, starts converting files, breaks something in production, then spends weeks firefighting.

The real problem with migrations are the edge cases nobody warns you about, and the lack of systematic approach. We’ve done enough migrations to confidently say - we’ve been there and done that.

So we built Skills.md — an agent-oriented migration toolkit that gives AI coding agents (and developers) a structured, production-safe path from Pages Router to App Router.

Instead of guesswork and broken deploys you get a repeatable process built from real migration experience.
It's open source and built for Skills.sh.

📙 Articles / Tutorials / News

Different hydration and rendering strategies

Covers CSR, SSR, streaming, islands, React Server Components, and more, with the pros and cons of each

RFC: WebSocket Upgrades in Route Handlers

A new draft proposal from the Next.js team wants to bring built-in WebSocket support to App Router Route Handlers

reactperf

40 steps across 11 sections covering the main parts of React performance. This guide explains common slowdowns like extra re-renders, effect problems, large lists, bundle size issues, and layout work, all in a simple order that builds from one topic to the next

📦 Projects / Packages / Tools

AI SDK 7

New features include better reasoning controls, tool and runtime context, file and skill uploads, MCP Apps, a terminal UI, tool approvals, durable workflows, and timeout support

Astryx

Meta has open sourced the design system. It includes 150+ accessible React components, brand-level theming, dark mode, ready-to-ship templates, and a CLI, all without forcing you into a styling setup. It uses StyleX under the hood

react-stinky

If your React components are getting messy, this tool aims to help. It checks for common code smells across a whole component or file, including bad state flow, weak accessibility, hook mistakes, and TypeScript issues

Unlayer Elements

A new open source React component library that lets teams create transactional emails, landing pages, and documents from the same component model

⚡️ Sponsor: Expo

How is your app performing in production?

Most teams learn about performance regressions from user complaints. Observe surfaces them within hours of the release that caused it.

🌈 Related

React Compiler Is A Retrofit

This article argues that React Compiler is useful, but it is still a workaround for React’s long-standing identity and memoization issues

Writing Custom Renderers for React

With React Test Renderer now deprecated, Maciej Jastrzębski explains how and why he built a new test renderer for React Native Testing Library. It’s a useful look at what React renderers actually do, how the reconciler works, and how React turns components into platform-specific UI

Why Drizzle ORM couldn't publish new releases on NPM for a month

Drizzle ORM recently hit a little-known npm limit that blocks publishing once a package’s full metadata file grows beyond 100 MB. The article explains why this happens, how older versions add up over time, and why publishing lots of dev or snapshot builds is usually a bad idea

Next.js 16.3, WebSocket on Vercel, cnfast, Instant Navigations, React Libraries for 2026, What RSCs Can Do

Erfan Ebrahimnia — Thu, 25 Jun 2026 20:59:57 +0000

Next.js 16.3: Instant Navigations

Next.js 16.3 preview introduces "Instant Navigations", a new way to make app navigations feel much faster. There are also new dev tools like Instant Insights, a Navigation Inspector, and a Playwright helper for testing instant page changes

► What RSCs Can Do in Next.js Today

Aurora Scharff shows how Next.js helps you build app-like experiences without needing to fully rely on the usual SPA model. It highlights how React Server Components, streaming, caching, fresh data, and coordinated updates can work together to make apps feel fast while keeping the component model simple as projects grow

⚡️ Sponsor: Arcjet

AI compliance controls

Protect your AI applications from prompt injection, PII leaks, and unauthorized tool calls.

📙 Articles / Tutorials / News

► Next.js 16.3 got good (if you care)

A positive look at where Next.js is heading, based on demos shown at Next.js Night in Amsterdam and London. The big theme is better, more declarative caching, plus new “instant insights” in dev mode that help spot slow parts of your app and suggest fixes

How We Cut Slow Responses by 80% Migrating to Next.js App Router

The team at Subito shares their journey migrating from Pages Router to App Router on a high-traffic site. The trickiest part wasn't Next.js itself, but getting HTML streaming to work through their entire stack (Nginx, CDN). They rolled out category by category, monitored SEO closely, and saw slow responses drop by roughly 80%

React Libraries for 2026

Robin Wieruch updated his popular article on the essential libraries and tools for building React applications in 2026. It covers everything from project setup and state management to databases, hosting, and beyond

Component Communication Patterns in React Applications

How should two React components share data? It depends on their distance and what's being shared. This guide covers every pattern from props and callbacks to Zustand, TanStack Query, URL state, and pub-sub, with clear advice on when to reach for each

📦 Projects / Packages / Tools

cnfast

If you use tailwind-merge with shadcn/ui, this one's worth a look. cnfast is a drop-in replacement that produces byte-identical output but runs 3.8x faster on average (up to 7x in component-heavy code)

Next.js SaaS Boilerplate

This starter kit helps you quickly build SaaS apps with built-in auth, teams, roles, database tools, testing, and deployment support. Recently updated for Next.js 16

eve Chat Template

A persisted Next.js chat template for eve (Vercel's latest framework for building agents), built with shadcn/ui, Tailwind CSS, Streamdown, Better Auth, Drizzle, Neon, and Upstash Redis

stylex/atoms

Added in the latest StyleX release, @stylexjs/atoms makes it easier to write inline atomic styles, similar to Tailwind. It supports both static atoms like x.display.flex and dynamic ones like x.color(color)

Sponsoring the newsletter

A quick note from me: if you’re building something for the Next.js community, consider sponsoring this newsletter and putting it in front of 7,000+ Next.js developers.

🌈 Related

Vercel: WebSocket support is now in Public Beta

Vercel Functions can now handle WebSocket connections, making it easier to build realtime features like chat, AI streaming, and collaborative apps on Vercel. It works with standard Node.js WebSocket libraries like ws, and higher-level tools like Socket.IO are supported too. Pricing follows normal Function usage, and with Active CPU pricing, idle connection time is not billed.

You're Using React Compound Components Wrong

Compound components are a group of components that work together and share state. This post shows why they work best for layout with mostly static, different kinds of children like tabs or cards, and why data-driven lists like <Select> and <Option> are often the wrong use for them

Turbopack: add experimental React compiler support

We recently mentioned the Rust port of the React Compiler, and things have moved fast since then. The Pull Request has now been merged, and support was quickly added to Turbopack too. That means you can now try it in Next.js by enabling experimental.rustReactCompiler

Moving Linear from styled‑components to StyleX

Linear shares how they're moving from runtime CSS-in-JS to StyleX for build-time style extraction and stronger encapsulation

Security in React, React Compiler Rust Port, Server Functions in parallel, Auth book, Vercel Sandbox Docker Support

Erfan Ebrahimnia — Fri, 05 Jun 2026 11:22:16 +0000

Security in React Applications

A thorough guide to securing React apps beyond the built-in protections. Covers how to prevent XSS, sanitize HTML with DOMPurify, store auth tokens safely, validate server-side inputs using Zod with Server Functions, and set up Content Security Policy with nonces for inline scripts

PR: Port React Compiler to Rust

The React team shared an early Rust port of React Compiler not long ago, and it’s already come a long way. It now works across nearly all of Meta’s codebase with the same output as the TS version, while also running faster

⚡️ Sponsor: Tigris Data

Get the universal API for storage

Snapshot = tag. Fork = branch. Announcing StorageSDK, bringing this Git-like model to storage, making it easier to build reproducible AI-agent workflows in TypeScript.

📙 Articles / Tutorials / News

PR: Run Server Functions in parallel

The Next.js team is working on letting Server Functions run in parallel, hidden behind a parallelServerFunctions feature flag. The PR is still a draft, but let's hope this lands soon

► A Guide to React Compiler Rendering

Explains how React rendering actually works and what the new React Compiler is doing under the hood to make your app faster

React Performance: From Sluggish to Lightning

A simple visual guide to what actually makes React apps slow today. Covers state colocation, the React Compiler, useTransition, lazy loading, and a few easy-to-miss performance bugs

𝕏 The problem with React's useEffect

A quick explainer on how useEffect can cause infinite re-render loops and crash your app. The video also teases React Doctor, a tool that automatically detects these kinds of issues and helps you fix them

📦 Projects / Packages / Tools

Auth book

Pilcrow, the creator of Lucia Auth, wrote a free book covering everything you need to know about implementing authentication in web applications

Run Docker containers inside Vercel Sandbox

You can now install and run Docker containers inside Vercel Sandbox. Useful for spinning up services like Redis or Postgres for testing, validating images, or previewing containerized apps

shadcn/ui June 2026 - GitHub Registries

shadcn now lets you turn any public GitHub repository into a registry. Just add a registry.json file to the root of your repo, define your items, and anyone can install them with the shadcn CLI using shadcn add <username>/<repo>/<item>.

Legend List 3.0

A drop-in replacement for FlatList/FlashList that now works on the web too. It handles dynamic sizes automatically, supports chat and AI chat apps out of the box, and uses less CPU and memory than alternatives

⚡️ Sponsor: Expo

How is your app performing in production?

Most teams learn about performance regressions from user complaints. Observe surfaces them within hours of the release that caused it.

🌈 Related

DOM Manipulation That Kills Your 60fps

This study tested common DOM anti-patterns in Chromium and scanned 275 repos to see how often they appear. The clearest result: innerHTML += in a loop is extremely slow and can freeze the UI, while forced layout reads after writes also cause noticeable slowdowns

My Frontend Stack In 2026

A developer walks through the 15 tools they actually use in production. Next.js for content sites, Vite 8 for SPAs, Tailwind + shadcn/ui for styling, TanStack Query for data fetching, Zustand for state, Zod for validation, and more

Migrating from Radix UI to Base UI: Step-by-Step Guide

Covers why Base UI matters, key API differences like the shift from asChild to the render prop, component-specific changes for Accordion, Select, Tooltip and more, plus common pitfalls to watch out for

A Technical Deep Dive Into the New Raycast

Raycast rebuilt their app from scratch to run on both macOS and Windows. They went with a hybrid approach: React and TypeScript for UI in system WebViews, native shells in Swift and C#, Node.js for backend logic, and Rust for performance-critical parts like file indexing

RSC Component Architecture, Next.js Dev MCP, Interactive Apps Guide, React Doctor, Bklit UI, Chat SDK Community Agent, Prefetch App Shells

Erfan Ebrahimnia — Fri, 29 May 2026 06:12:34 +0000

Component Architecture for React Server Components

Traces the evolution from useEffect to React Query to route-level loaders to RSCs, using a social feed app as an example. The main takeaway: let each component fetch its own data on the server and use Suspense boundaries to design the loading experience instead of fetching all data at the top of a route and drilling it down through props

► I Tested Next.js Dev MCP (So You Don't Have To)

The video looks at Next.js DevTools MCP, a tool that helps AI editors understand your Next.js app better. It can read the latest docs, see routes and errors, and give more accurate help when building with newer Next.js features

⚡️ Sponsor: Blazity

Next.js migration toolkit that eliminates guesswork and protects production and stability

Most Next.js migrations from Pages Router to App Router follow the same pattern: a developer reads the docs, starts converting files, breaks something in production, then spends weeks firefighting.

The real problem with migrations are the edge cases nobody warns you about, and the lack of systematic approach. We’ve done enough migrations to confidently say - we’ve been there and done that.

So we built Skills.md — an agent-oriented migration toolkit that gives AI coding agents (and developers) a structured, production-safe path from Pages Router to App Router.

Instead of guesswork and broken deploys you get a repeatable process built from real migration experience.
It's open source and built for Skills.sh.

📙 Articles / Tutorials / News

Docs: add Interactive Apps guide

A new draft PR to the Next.js docs walks you through building snappy, responsive UIs. It covers eight patterns including optimistic updates, streaming with Suspense, drag-and-drop, form handling, and caching for instant navigation

PR: Prefetch App Shells on the client

A new experimental feature that ensures every navigation in a Next.js app shows something instantly even if a per-link prefetch hasn't finished yet

The Flight Protocol Made Your DoS My Problem

This post looks at a React Flight bug that could let a single request slow down or freeze a Node server. It also shows how Server Components quietly turned the component tree into a network protocol, while most teams never updated their threat model to match

Migrating from Express to Next.js with AI agents

Shows how to turn a legacy Express app into a modern Next.js app using Google Antigravity and AI agents. Covers patterns, testing, and how agents fix their own mistakes

📦 Projects / Packages / Tools

React Doctor

React Doctor deterministically scans your codebase and finds issues across state & effects, performance, architecture, security, and accessibility.

sekisho

A library that uses React's error boundary mechanism to handle login redirects and access control in a clean, declarative way. Call needLogin() during render to trigger a redirect, or accessRestricted() to hide UI from unauthorized users. It's like <Suspense> but for auth

Bklit UI

A collection of Open Source charts and utility components that you can customize and extend

Chat SDK Community Agent

Open source AI-powered Slack community management bot with a built-in Next.js admin panel. Uses Chat SDK, AI SDK, and Vercel Workflow.

⚡️ Sponsor: Bluebag

Add Skills to your AI-SDK Agent in minutes

Execute Skills in runtime VMs without building infrastructure. Run complex scripts, read Skills on-demand, install dependencies, mint download links, and build predictable, specialised agents in minutes.

🌈 Related

How's Linear so fast? A technical breakdown

A deep dive into the engineering and design decisions that make Linear feel almost instant

My Thoughts on AI: Agent Setup, Workflow, and Tools

Redux maintainer Mark Erikson shares a detailed look at how he actually uses AI for day-to-day development

React Testing Library Tutorial (with Jest & Vitest)

Robin Wieruch updated his guide to React Testing Library, covering how to test components the way users interact with them

Prisma Next Early Access: Write Your Contract, Prompt Your Agent, Ship Your App

Prisma Next is a new ORM that lets you define your database in one contract file, while it handles migrations, type-safe queries, and errors for you. It is also built to work closely with AI agents, so they can help you build apps faster. Early Access is open now for Postgres and MongoDB, but it is not ready for production yet

Files SDK, React2Shell Story, Next.js Security Release, Fate, Tailwind CSS v4.3, RSC Server Functions

Erfan Ebrahimnia — Fri, 22 May 2026 12:59:51 +0000

Next.js May 2026 security release

A big security update for Next.js fixing 13 issues across auth bypass, denial of service, SSRF, cache poisoning, and XSS. One of the fixes also covers an upstream React Server Components bug. If you use affected Next.js or react-server-dom-* versions, update right away, as patching is the only full fix. Next.js 15.5.18 and 16.2.6 include the fixes

Docs Update: Data Security & Mutations

The Next.js team extended the guides for implementing data security and mutations in your apps, with a big focus on Server Actions and Server Functions. The docs now make it clearer that these functions can be called by direct POST requests, so you should always check authentication and authorization inside each one, not just at the page level

⚡️ Sponsor

Your AI shouldn't grade its own homework

Claude Code writes beautiful code. So does Codex. But here's the thing, they also think they write beautiful code. And when you ask an AI to review code it just wrote, you get the intellectual equivalent of a student grading their own exam. Shockingly, they always pass.

CodeRabbit CLI plugs into Claude Code and Codex as an external reviewer, different AI Agent, different architecture, 40+ static analyzers and zero emotional attachment to the code it's looking at. The agent writes, CodeRabbit reviews, and the agent fixes. Loop until clean.

You show up when there's actually something worth approving.

One command. Autonomous generate-review-iterate cycles. The AI still does the work. It just doesn't get to decide if the work is good anymore.

Free tier available. Try CodeRabbit's CLI.

📙 Articles / Tutorials / News

The React2Shell Story

A security researcher shares how a close look at React Flight led to finding a critical remote code execution bug in React, later fixed as CVE-2025-55182. It’s a great read if you want to learn how React Server Components and Server Functions work under the hood

Next.js Link as a Button

A simple guide to turning a library button into a real Next.js link. It keeps client-side navigation and renders a proper <a> element

RSC Server Functions Are Not An API Boundary

An interesting post on the hidden API-like risks of server functions. The main point: if something needs to stay stable across deploys, it may need a real API instead.

📦 Projects / Packages / Tools

Files SDK

A new SDK that gives you a single way to work with object and blob storage across 18 providers, including S3, R2, Vercel Blob, and Google Drive. You can upload, download, list, delete, copy, and more without changing your app code when you switch providers

fate

This new data-fetching library takes some of Relay’s best ideas, like view composition and strict data selection, and brings them to regular TypeScript apps. It also supports Suspense, optimistic updates, and live views

Tailwind CSS v4.3

Highlights include new scrollbar utilities, four new color palettes, and a first-party webpack plugin with a big speed boost for Next.js apps

Base UI v1.5.0

This release is mainly about speed and bug fixes. Popups now mount and unmount much faster, and many components got fixes for forms, focus, RTL, and browser behavior

⚡️ Sponsor: Bluebag

Add Skills to your AI-SDK Agent in minutes

🌈 Related

React Folder Structure Best Practices

Robin Wieruch has updated his long-running guide for 2026 with a step-by-step look at how to organize React apps as they grow

Accessibility in React: Common Mistakes and How to Fix Them

Covers common React accessibility mistakes such as bad semantics, broken focus, and hidden updates, with clear tips on how to improve them

Five Models, One React Stack: Why Every LLM Builds the Same App

An interesting post on how AI models have started to favor the same tools for building React apps

From latency to instant: Modernizing GitHub Issues navigation performance

A behind-the-scenes look at how GitHub sped up Issues navigation through a combination of client-side caching, prefetching, and a service worker

deepsec, vercel-openclaw, Next.js Security Releases, Adapters API, portless, shadcn/ui, Vercel Weekly

Erfan Ebrahimnia — Fri, 08 May 2026 06:51:50 +0000

Introducing deepsec: The security harness for finding vulnerabilities in your codebase

A new open source tool from Vercel that uses AI coding agents to find security vulnerabilities in your codebase. It runs locally on your laptop or on your own infrastructure using your existing AI subscriptions. The workflow involves static analysis to find security-sensitive files, agent investigation of each candidate, and includes a revalidation step to reduce false positives

𝕏 Next.js 16.2.6 & 15.5.18 Security Releases

Important security updates have landed for both Next.js 16 and 15. These patches fix multiple vulnerabilities ranging from low to high severity

⚡️ Sponsor

Your AI shouldn't grade its own homework

You show up when there's actually something worth approving.

One command. Autonomous generate-review-iterate cycles. The AI still does the work. It just doesn't get to decide if the work is good anymore.

Free tier available. Try CodeRabbit's CLI.

📙 Articles / Tutorials / News

🎧 Next.js works everywhere now

Jimmy Lai, who leads the Next.js team at Vercel, hops on the PodRocket podcast to explain the adapters API: what it is, why it exists, and how it fixes the pain of self-hosting Next.js on platforms like Cloudflare, AWS Amplify, and Netlify

Async React: Building Non-Blocking UIs with useTransition and useActionState

A practical guide to two React 19 hooks that make async work easier. useTransition keeps your UI responsive without manual loading states, while useActionState bundles state, errors, and pending status into one hook

► Stop Writing Blind Server Components

We've shared this tool before, and now Tobi Mey walks through it on video. RSC Boundary shows you exactly where server components end and client components begin in your Next.js app

📦 Projects / Packages / Tools

vercel-openclaw

A serverless approach to running OpenClaw. It comes with CLI deployment, sandbox snapshots that preserve state between messages, webhooks routed through Vercel Functions, a Redis-based control plane, and an egress firewall for domain blocking

portless v0.12.0

Portless got some awesome improvements since the last time it was featured. The big one: zero-arg mode auto-discovers your dev script so there's nothing to configure. It also now handles monorepos, giving each workspace package its own subdomain. v0.12 adds --tailscale and --funnel flags to share your local apps over Tailscale

The Agent Harness Framework

A framework that lets you build powerful AI agents (think Claude Code or Codex) in just a few lines of TypeScript. It gives you sandboxed shell access, sessions, reusable skills, and structured outputs

shadcn/ui: May 2026 updates

The shadcn CLI now lets you use package.json#imports (e.g. #components/*) instead of relying on tsconfig.json paths. It also adds target aliases so registry items can specify exactly where files get installed

⚡️ Sponsor: Bluebag

Add Skills to your AI-SDK Agent in minutes

🌈 Related

𝕏 Vercel Weekly - May 4, 2026

Vercel's AI Accelerator cohort finished with a Demo Day in SF. Meanwhile, Grok 4.3 landed on the AI Gateway, Stripe Projects now handle Pro plan upgrades, hobby deployments are kept for 30 days by default, and Deployment Checks are now built in

New to the web platform in April

A look at what landed in browsers last month. Highlights include contrast-color() reaching Baseline (picks black or white for best text contrast), ariaNotify() for screen reader announcements in Firefox, element-scoped view transitions in Chrome, and Math.sumPrecise

Why TSRX isn't just your Favorite Templating Language

Ryan Carniato digs into TSRX, a potential JSX successor, and explains why it matters: it uses plain JS control flow, allows state inside conditionals and loops (no hook rules), and offers cut-and-paste composability that JSX can't match

Server-Driven UI in 22 lines of TypeScript

A practical guide to letting your backend control page layouts through JSON. The article covers the JSON contract, a component registry, a tiny recursive renderer, and handling actions like navigation and tracking