Forem: Erfan Ebrahimnia

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

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

🎧 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

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

𝕏 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

How React streams UI, React Compiler Rendering, dev3000 CLI, TSRX, Replay, Scroll-Driven Animations, Ship 26 tickets

Erfan Ebrahimnia — Fri, 01 May 2026 11:42:53 +0000

How React streams UI out of order and still manages to keep order

Instead of waiting for every component to be ready, React streams what it can and leaves markers for the rest. When slow components finish, they arrive as hidden divs and get swapped into place by small scripts. This post walks through the full mechanism step by step

Ship 26 tickets just dropped

Vercel's Ship conference is heading to London, Berlin, New York, Sydney, and San Francisco. Talks and workshops focused on shipping AI agents and apps to production

⚡️ 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

A Guide to React Compiler Rendering

Slides from Mark Erikson's React Miami 2026 talk covering how React rendering works and how the React Compiler automatically optimizes it

React Client and Server State

This guide shows how to split your state into two buckets: server state (API data) handled by TanStack Query, and client state (UI flags, themes) handled by Zustand or plain React hooks

Hacking in request body during render in Next.js

Robert Webb explored the Next.js codebase to answer the question of why you can't read the request body during render like you can with headers. He managed to hack it in by modifying how NodeNextRequest and workUnitStore work, and accidentally found a bug with cacheComponents and POST requests along the way

𝕏 Light and dark mode favicon in Next.js

A handy code snippet showing how to serve different favicons depending on whether a user is in light or dark mode

📦 Projects / Packages / Tools

d3k (dev3000)

A CLI tool that records your entire dev session: server logs, browser console messages, network requests, screenshots, and user interactions into a unified, timestamped feed that AI assistants can read and reason about

TSRX

A language extension that picks up where JSX left off. Control flow, scoped styles, and local variables sit right inside your templates

Preventing Flash Before Hydration

A demo repo showing how to avoid the flash of content that happens before React hydration kicks in. It covers patterns like using inline scripts for date formatting without hydration errors, persisting accordion state with localStorage, and a handy InlineScript helper that sidesteps React's script warning

Replay

Upload a conversation from Claude Code or Codex and get a clean, shareable link. Your session becomes a readable thread with inline diffs and tool calls

⚡️ Sponsor: Bluebag

Add Skills to your AI-SDK Agent in minutes

🌈 Related

The React Compiler at Eighteen Months: The Arc, the Debates, and What's Next

A retrospective on the React Compiler's journey since React 19. It handles memoization so you don't have to, but the migration story for existing apps is still messy. The piece also looks ahead at compiler-aware Server Components, useEvent, and better dev tooling

Scroll-Driven Animations

The CSS animation-timeline API maps keyframe animations to scroll progress, and this beginner-friendly guide covers everything from basic setup to advanced linked timelines

3 ways to store variables in React, and why you shouldn't sleep on useRef

Most devs know useRef for DOM access, but it's also great for storing data that should survive re-renders without touching the UI. This post walks through all three ways to store variables in React: plain variables, state, and refs with clear examples showing how each behaves

Backend for Frontend (BFF): What It Is and When to Use It

Instead of one generic API for all clients, a BFF gives each frontend its own small backend that fetches, combines, and shapes data from multiple services. This guide covers when it's worth it, when it's not, and common mistakes to avoid

React Email 6.0, Vercel got hacked, Prevent flash before hydration, Logging in Next.js, shader-lab, TypeScript 7.0, nextmap

Erfan Ebrahimnia — Fri, 24 Apr 2026 11:20:30 +0000

React Email 6.0

The highlight of this release is an open-source email editor that outputs inbox-ready HTML. It has a composable API for building custom blocks like image uploaders or social embeds. Also new: a unified single package for all components and a fresh set of templates for auth and e-commerce flows

Vercel April 2026 security incident

Vercel disclosed a security incident where an attacker compromised a third-party AI tool (Context.ai) used by an employee, gaining access to some internal systems and non-sensitive environment variables. No npm packages were affected. Vercel recommends rotating credentials, enabling 2FA, and reviewing activity logs

⚡️ Sponsor: Clerk

Clerk CLI: manage auth from your terminal

The new Clerk CLI detects your framework and gets auth ready to configure. Run clerk init to scaffold, clerk config to manage sign-in methods, redirects, and session policies in code, or clerk api to query users and orgs. Try it.

📙 Articles / Tutorials / News

New Docs: How to prevent flash before hydration

New docs explaining how to avoid the visible flicker when things like dates, themes, or localStorage values differ between server and client

If You Can't See the Boundary, You Can't Reason About the System

We featured the RSC Boundary package in a previous issue. This article from its creator explains the problem it solves: When working with React Server Components, you often have to guess where the server/client split is by reading 'use client' directives and tracing imports. RSC Boundary removes that guesswork. It's a dev-only overlay that highlights which parts of your page are server-rendered and which are client components, giving you a live visual map

Next.js 16 Migration Guide: Everything That Breaks (And How to Fix It)

A thorough, hands-on migration guide covering every breaking change in Next.js 16 and how to deal with it

Logging in Next.js with LogLayer

Next.js logs can get messy across different runtimes. This post shows how to fix that with one shared logger using LogLayer, console interception in instrumentation.ts, and structured output with Pino for production

📦 Projects / Packages / Tools

@basementstudio/shader-lab

A visual tool and React runtime for creating layered shader compositions. Render directly in your app, use them as Three.js textures, or apply built-in effects like ASCII, CRT, dithering, and pixel sorting as postprocessing over your own 3D scenes. Fully open source

nextmap

A CLI tool that scans your Next.js project and shows every route as an interactive graph in your browser. It picks up pages, API routes, middleware, and HTTP methods

Animata

Handcrafted interaction animations and visual effects built with Tailwind CSS and Framer Motion. Works like shadcn/ui

Announcing TypeScript 7.0 Beta

The first beta release of TypeScript 7.0 is here, and it's a big deal. The compiler has been completely rewritten in Go, making it around 10x faster than TypeScript 6.0. It now supports parallel type-checking and parallel project builds out of the box. Despite being a beta, the team says it's stable enough for everyday use

⚡️ Sponsor: Expo

How to go from Web to Native with React

Everything that web devs need to know about building their first mobile app - You already know React. With Expo, you can use that knowledge to build fully native apps for iOS and Android without starting over or learning new tools

🌈 Related

Building a UI Without Breakpoints

Modern interfaces are component-first, but most responsive CSS is still viewport-first. This article bridges that gap with four methods: intrinsic layouts using auto-fit and minmax(), fluid scaling with clamp(), container units for sizing relative to a component's actual space, and container queries for true structural changes

10 React tips I wish someone had told me before I mass-produced bugs

Lessons learned from production bugs and code reviews. Includes tips like replacing multiple useState calls with useReducer, keeping state close to where it's used, using key to reset components, and choosing Compound Components over prop-heavy APIs

A TypeScript Class-Based WebSocket Library for React

Explaining a different approach to WebSockets in React. Instead of putting everything in hooks, the heavy lifting lives in TypeScript classes

AI-Generated UI Is Inaccessible by Default

Breaks down exactly why LLMs produce inaccessible code and presents a practical five-layer fix: prompt constraints, static analysis with eslint-plugin-jsx-a11y, runtime testing with axe-core, CI enforcement via GitHub Actions, and using accessible component libraries like Headless UI, Radix, or React Aria

Instant Navigations, Bye Vendor Lock-in, Ultracite, Blocking Bots, Distributed 'use cache', varlock, Vertical Codebase

Erfan Ebrahimnia — Thu, 16 Apr 2026 18:55:43 +0000

🔥 Hot

Next.js Canary: Ensuring Instant Navigations

A new guide covering how to get instant client-side navigations by putting <Suspense> boundaries and use cache in the right spots. The new unstable_instant export checks your caching structure automatically, and new DevTools let you preview exactly what users see before dynamic content streams in. The feature set is currently only available in the canary branch

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

► Next.js Vendor Lock-in No More

The Syntax podcast sits down with Tim Neutkens and Jimmi Lai from the Next.js team to talk about the newly stable Adapters API, which lets you host Next.js on platforms like Cloudflare and Netlify without hacky workarounds. They also cover how Next.js caching works across layers, why they built Turbopack in Rust instead of using Vite, and what's new in Next.js 16.2

𝕏 Blocking WordPress Bot Scanners on Vercel to Save Costs

Random bots scan your site for WordPress files that don't exist in Next.js. They still trigger serverless functions and cost you money. A single regex rule in Vercel's Firewall stops them before they reach your app

Next.js use cache: remote: A Distributed Cache in One Line

Next.js 16 lets you add 'use cache: remote' to any async function to get a shared cache across all serverless instances. No Redis or extra setup needed. The article covers tag-based invalidation, time-based expiration, and smart cache key design.

Docs: Add Building guide

A new draft PR adds a "Building" guide to the Next.js docs. It explains what next build does, how to read build output symbols, pre-render dynamic routes, and fix common prerender errors

📦 Projects / Packages / Tools

varlock

Varlock is an open-source, schema-first approach to environment variable management. The latest update brings single-file ESM and TypeScript plugin support, a new varlock typegen command for environment-independent type generation, and handy new functions like ifs() for Excel-style conditionals. The Next.js integration also got a major update, adding full Turbopack support for both Next.js 15 and 16 alongside the existing webpack support

BetterAuth 1.6

This bridge release focuses less on flashy new features and more on making the project more solid. That said, there's plenty to note: the core package size was cut in half, password hashing is now non-blocking, OpenTelemetry tracing for auth API calls and database operations, plus passkey registration before a user even has a session

Ultracite

A production-ready preset that works with ESLint, Biome, and Oxlint so you don't have to worry about configuration. It comes with hundreds of preconfigured rules, supports monorepos, and can even generate linting rules for 40+ AI coding agents like Claude Code, Cursor, and GitHub Copilot

Base UI v1.4.0

There's a new OTP Field component, fixes for tricky edge cases in Combobox, Select, Toast, and Drawer, and general improvements to accessibility, scroll handling, and keyboard navigation

🌈 Related

The uphill climb of making diff lines performant

GitHub's engineering team explains how they made the pull request "Files changed" tab faster by simplifying their React code

React: Singletons aren't as evil as you think

Singletons have a bad reputation in React, but this post argues they can be clean and powerful

The Vertical Codebase

TkDodo makes a strong case against the common components/hooks/utils folder structure. Instead, group code by what it does, not what it is. He shares real examples from the Sentry codebase and tips on enforcing boundaries between modules

The Blueprint of a North Korean Attack on Open-Source

A technical walkthrough of a supply chain attack attempt on Better-Auth. Malicious code was disguised inside build configs like next.config.mjs, designed to silently steal credentials and open a backdoor. The payloads were hosted on blockchains, making them permanent and nearly impossible to remove

CVE-2026-23869, The Precompute Pattern, Boneyard, use cache migration, RSC Boundary

Erfan Ebrahimnia — Fri, 10 Apr 2026 11:04:51 +0000

🔥 Hot

The Precompute Pattern: Encoding Dynamic Data into URLs in Next.js

The Precompute pattern solves the problem of a single cookies() or headers() call forcing your entire app into dynamic rendering. Instead of reading dynamic data inside components, you resolve it once in middleware and encode it into a hidden URL segment. This lets Next.js treat each variant as a static page. The post walks through a full implementation, covers how the Vercel Flags SDK formalizes this approach, and explains why 'use cache' in Next.js 16 makes it unnecessary for most cases

React2DoS (CVE-2026-23869): When the Flight Protocol Crashes at Takeoff

Security researchers at Imperva found a way to crash React servers with tiny requests. The bug (CVE-2026-23869) lives in the Flight protocol, which RSC uses to pass data between client and server. Also check out the Vercel summary of this vulnerability and update to the latest Next.js version

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

React Rendering Strategies

A detailed guide that walks you through the full history of React rendering. It covers SPAs, SSR, SSG, and React Server Components with interactive diagrams and real-world examples

feat(next): add sitemap index support

A draft PR has been opened to add native sitemap-index.{ts|js|xml} file support to Next.js. This feature would let you dynamically generate a sitemap index following the Sitemap Index protocol, making it much easier to manage large sites with many sitemaps

Docs: add unstable_cache → use cache migration guide

The Next.js docs will soon include a guide that maps the old unstable_cache patterns to the new use cache API, showing how revalidate: 3600 becomes cacheLife('hours'), tags: ['x'] becomes cacheTag('x'), and explains that keyParts are no longer needed

‘use client’ in Next.js: What It Does, What It Costs, and When to Use It

Every use client you add comes with a price tag. This article breaks down exactly what that cost looks like: more JavaScript sent to the browser, extra hydration work blocking the main thread, and potential data-fetching waterfalls

⚛️ React Summit | June 12 & 16, 2026

The world’s biggest React conference in beautiful Amsterdam and online! Learn from top React experts & connect with the community.

Use code NEXT for 10% off tickets

📦 Projects / Packages / Tools

Boneyard

Boneyard snapshots your real UI and creates a flat list of positioned, sized rectangles that mirror your layout exactly. Just wrap your component in <Skeleton> and you get pixel-perfect skeleton screens that stay in sync with your actual design

RSC Boundary

A simple devtool that draws colored outlines around your components so you can instantly see which parts are server-rendered and which are client-side

use-form-guard

Since Next.js App Router dropped router.events, blocking navigation for unsaved forms has been a pain point. This lightweight hook (~0.8KB, no dependencies) solves it by intercepting tab close, SPA navigation, and browser back/forward

next-translate

A minimal translation library for Next.js that automatically loads only the namespaces each page needs in the current language

🌈 Related

What To Know in JavaScript (2026 Edition)

Chris Coyier's yearly roundup covering everything a JavaScript developer should have on their radar. From new ES2025 features like iterator helpers and set methods, to the Temporal API, to TypeScript v6 preparing for a massive v7 finally fixing dates

You really, really, really don't need an effect! I swear!

A practical guide to eliminating unnecessary useEffect calls in React. The post provides a clear decision tree: computed values should be derived inline, user actions belong in event handlers, state resets should use the key prop, and data fetching should use a library like TanStack Query

Test IDs are an a11y smell

If you're still reaching for data-testid in your tests, this post might change your mind. The author argues that role-based selectors (like getByRole('button', { name: 'Open Widget' })) are far better because they mirror how real users interact with your app and they double as basic accessibility checks

Why we rolled our own React Server Components framework

A team's journey of ditching Gatsby and building their own React Server Components framework in under 1,000 lines of code with React 19 and Vite's new RSC plugin

Turborepo 2.9, React Fiber explained, jal-co/ui, Next.js Mental Model, useOffline, Debug React with AI

Erfan Ebrahimnia — Fri, 03 Apr 2026 11:01:20 +0000

🔥 Hot

How Does React Fiber Render Your UI

A single setState call kicks off a surprisingly sophisticated process. This detailed explainer covers how React Fiber organizes your component tree as a linked list, schedules work based on priority lanes, skips unchanged subtrees for efficiency, and batches DOM updates in a single commit phase

Implementing Next.js 16 'use cache' with next-intl Internationalization

This post got featured before, and it's now been updated with the proper solution. The original post covered a workaround for the incompatibility between 'use cache' and next-intl. With Next.js 16.2's new next/root-params API, the workaround is no longer needed

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📦 Projects / Packages / Tools

Turborepo 2.9

A quality-focused release for the popular monorepo build tool, bringing big performance gains and smoother adoption for large codebases:

Up to 96% faster startup: Time before your first task runs has been drastically reduced
turbo query is stable: Query your monorepo's structure with GraphQL or simple shorthands
Circular dependencies no longer block you: Adopt Turborepo incrementally in repos with package cycles
OpenTelemetry (Experimental): Send build metrics to tools like Grafana or Datadog
Structured logging (Experimental): Get machine-readable JSON output for CI and tooling
Future Flags: Start preparing for 3.0 today with gradual migration paths

json-render

Let AI generate UIs from prompts using only the components you define. Output is always predictable and schema-safe. The new @json-render/next package can generate full Next.js apps with routes, layouts, and SSR from a single JSON spec

bippy

Bypasses React's closed internals by hooking into the same mechanism React DevTools uses. Lets you traverse the fiber tree, inspect component props, state, and contexts, and even override them

jal-co/ui

A collection of polished, ready-to-use components you can install via the shadcn registry or copy straight into your project. Zero dependencies where possible and server-first

🌈 Related

🦋 A Better Way to Debug React with AI

Dan Abramov shares a step-by-step workflow for using AI to fix tricky bugs: reproduce it, read the code, add logs, and only then ask the AI to find the issue

Axios Supply Chain Attack Pushes Cross-Platform RAT via Compromised npm Account

Axios, the popular HTTP client, fell victim to a supply chain attack. An attacker compromised the maintainer's npm account and published two rogue versions (1.14.1 and 0.30.4) containing a hidden dependency that installs a remote access trojan across Windows, macOS, and Linux

I finally understand React hydration and why it exists

In this Reddit post a developer shares the journey of how he finally understood why React needs hydration after years of confusion

Why Node.js needs a virtual file system

Matteo Collina introduces node:vfs, a new Node.js core module that lets you create in-memory filesystems that work with import, require(), and standard fs calls

Stable Next.js Adapters, WebSocket in App Router, AI Improvements, Error Handling, Sugar High, transitionType prop

Erfan Ebrahimnia — Sun, 29 Mar 2026 18:29:34 +0000

🔥 Hot

Next.js Across Platforms: Adapters, OpenNext, and Our Commitments

Next.js now has an official, stable way for hosting platforms to support the framework. The new Adapter API describes your app's build output in a typed, versioned format that any provider can target. Vercel uses the same public API as everyone else, and a shared test suite ensures consistent behavior across platforms

AI Improvements

This post was part of the Next.js 16.2 release. It focuses on making Next.js work better with AI coding agents. New projects now include an AGENTS.md file that points agents to bundled docs, browser errors get forwarded to the terminal, a lock file stops duplicate dev servers, and an experimental CLI lets agents inspect your running app through the terminal

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

Error Handling in Next.js with catchError

Aurora Scharff explains why react-error-boundary falls short with Server Components, and how unstable_catchError in Next.js 16.2 fixes it by handling framework errors correctly and re-fetching server data on retry

Making sense of 'key' prop in react

Walks through reconciliation, shows how missing or bad keys cause state bugs, and explains what makes a key actually useful

PR: add WebSocket support for App Router route handlers

A new PR adds native WebSocket support to route handlers via NextResponse.upgrade(). It follows the standard WebSocket interface, works with middleware for headers, rewrites, and redirects

𝕏 React didn’t invent RSC, SSR, or Hydration

Shu Ding shows how SSR, RSC, and Hydration map directly to older tools like Express, Pug, and jQuery

𝕏 transitionType prop for Links in Next.js 16.2

Demonstrates how to set the transition type (e.g. fade, slide-left, etc.) of the ViewTransition for a link

📦 Projects / Packages / Tools

TypeScript 6.0

The last version built on the JavaScript codebase. It's a transition release designed to prepare you for TypeScript 7.0, which is being rewritten in Go for much better performance. New features include Temporal API types, RegExp.escape, and Map.getOrInsert. There are also some breaking changes

Next.js Native App Template

A boilerplate for building native-feeling PWAs with Next.js 16. Ships as a workout tracker but is designed to be swapped with your own app. Handles all the tricky iOS PWA quirks like broken fixed navs and scroll issues so you don't have to

Apiser

Gives you a higher-level way to work with Drizzle by wrapping tables in models with chainable queries, relation loading, result shaping, and safe error handling

Sugar High

Super lightweight code syntax highlighter, around 1KB after minified and gzipped

🌈 Related

A React trick to improve exit animations

Components that update mid-exit-animation look janky. This trick wraps exiting components in Suspense to freeze their DOM, preventing any visual changes during the animation

How to Measure and Optimize React Performance

Learn to use React 19.2s Performance Tracks and DevTools Profiler to find problems, then apply runtime optimizations, concurrency features, and build-time tools to solve them

Start naming your useEffect functions, you will thank me later

The post argues that named useEffect functions make React code much easier to understand and can also reveal effects that are doing too much

Making React ProseMirror really, really fast

React ProseMirror was too slow for large documents. A single keypress in Moby Dick took 177ms. Through memoization and ref-based position tracking, they got it down to 16ms, even beating ProseMirror's native rendering on Firefox

Next.js 16.2, unstable_catchError, next-forge 6, React's Rust Compiler, AI Elements 1.9, Banning useEffect

Erfan Ebrahimnia — Fri, 20 Mar 2026 13:42:30 +0000

Next.js 16.2

This release is packed with performance improvements, better debugging tools, and AI-focused features:

~400% faster dev startup – localhost:3000 is ready much quicker during next dev
25-60% faster rendering – a smarter JSON parsing approach speeds up Server Components payload deserialization
Redesigned 500 error page – cleaner built-in fallback page for production errors
Server Function logging – dev terminal now shows function name, arguments, and execution time
Hydration diff indicator – error overlay clearly labels server vs. client content mismatches
--inspect for next start – attach a Node.js debugger to your production server
200+ Turbopack fixes – including SRI support, postcss.config.ts, and Server Fast Refresh
AI improvements – AGENTS.md in create-next-app, browser log forwarding, and experimental next-browser

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

`unstable_catchError()`

The Next.js team is working on a programmatic way to wrap any part of your UI in an error boundary. It's more flexible than the error.js convention, supporting custom props, retry logic, and server-rendered fallbacks

► Next.js Donut Pattern Explained in 5 Minutes

The video shows the donut pattern, where a client wrapper holds server-rendered content inside it

𝕏 React Compiler: Rust Edition is on the Way

The React team is porting the React Compiler to Rust, with most of the work done using AI. More details are expected soon

𝕏 Why we banned React's useEffect

One team's journey from useEffect-induced production bugs to a strict no-direct-useEffect rule. The post offers five concrete patterns that cover most use cases and argues the rule matters even more now that AI agents are writing code

⚛️ React Summit | June 12 & 16, 2026

The world’s biggest React conference in beautiful Amsterdam and online! Learn from top React experts & connect with the community.

Use code NEXT for 10% off tickets

📦 Projects / Packages / Tools

next-forge 6

next-forge is a production-ready template for Next.js that aims to be a full, opinionated starter for new apps. This big release adds better DX, a new "agent skill" you can install for structured next-forge knowledge, and new docs. Bun is now the default package manager (pnpm/npm/yarn still work)

AI Elements 1.9

The latest update adds a new skill to help agents build with the library, plus a <JSXPreview /> component for rendering streamed JSX and a screenshot action for <PromptInput />. The <Conversation /> component can also now download chats as markdown

Base UI v1.3.0

Version 1.3.0 brings lots of small fixes plus a few big wins: Drawer is now stable, plus a new SwipeArea for Drawer. Select, Combobox, and Slider get a new Label part, and Combobox + Autocomplete add an InputGroup part. Tooltip adds a closeOnClick prop, and Menu now supports content transitions via Viewport

Streamdown 2.5

Streamdown is a component designed to render Markdown streamed from AI models. In version 2.5 new staggered animations cascade content in sequentially, custom renderers can now read code fence metastrings, and line numbers are toggleable. There are also other performance related improvements

🌈 Related

The Best Frontend Framework Doesn't Exist, Only Trade-offs Do

An opinionated overview of modern frameworks arguing there’s no universal winner. Next.js, Astro, and TanStack Start all solve different problems depending on caching, scale, and team experience. The article was previously featured but was recently updated

Two React Design Choices Developers Don’t Like—But Can’t Avoid

SolidJS creator Ryan Carniato argues that two often‑criticized React patterns, deferred state commits and dependency arrays, exist for good reasons. When async data enters the system, every UI framework eventually runs into the same constraints if it wants to keep the UI consistent

What do coders do after AI?

Super interesting read! This article breaks down what AI means for developers today. It covers layoffs, changing job roles, and how coding is shifting from hands-on work to guiding AI tools

Seven Years to TypeScript: Migrating 11,000 Files at Patreon

Patreon shares how they moved their entire frontend from JavaScript to TypeScript over seven years. What started as voluntary adoption eventually needed AI-powered tools to finish the job across 11,000 files and 1 million lines of code

Next.js Weekly #122: Ship 26, shadcn/cli v4, Portless v0.6, Experimental Markdown Output, Akira, Dynamic Forms, Next.js on VPS

Erfan Ebrahimnia — Fri, 13 Mar 2026 12:30:39 +0000

Vercel Ship 26

Vercel Ship 26 has officially been announced. Early details are out, and tickets are currently at their lowest price, so it's a great time to save your spot

🎧 React, Next.js & Server Components at Scale with Aurora Scharff

A wide chat covering Aurora’s path from robotics to React, and what she does now at Vercel. She explains what React Server Components change, why the new async mental model confuses even senior devs, and how the Next.js App Router fits in

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

Building Dynamic Forms In React And Next.js

Explains when React Hook Form is the right tool, and when you might want a form 'engine' like SurveyJS that can handle conditions, calculations, and page flow for you

PR: add experimental markdown output

Next.js is testing a new way to return Markdown for a route, using the same App Router/Pages Router React tree that normally renders HTML. Routes can opt in, and when a request prefers text/markdown, Next will send Markdown instead of HTML

Scale Next.js Image Optimization with a Dedicated Platformatic Application

If you self-host Next.js, you should check this guide. Platformic wrote about how running Next.js image optimization as a dedicated app (routing /_next/image to its own service) using Watt and @platformatic/next can stop your frontend from slowing down during traffic spikes

Deploying Next.js on a VPS: A Practical Step-by-Step Guide Without Vercel Lock-In

Shows how to run a Next.js app on your own server using PM2 + NGINX + SSL. It also explains the trade-offs vs Vercel: you won’t get a built-in CDN for images, automatic edge runtime, persistent ISR cache across instances, or auto-scaling unless you set them up yourself

meet.js Summit 2026: 15 Years Strong

meet.js celebrated 15 years with a nationwide Summit in Poland, with talks on web dev today and the real impact of AI

📦 Projects / Packages / Tools

shadcn/cli v4

The new version is built for both you and your AI tools. Key features include AI "skills" to reduce coding mistakes, shareable UI presets, full project templates, and a new --dry-run flag to see changes before they happen

Portless v0.6

Portless replaces messy port numbers like localhost:3000 with nice, stable names like myapp.localhost. It was featured a couple of issues ago. v0.6 adds custom TLDs (use .test, .internal, etc.), a portless get command to print a service’s URL, and a --name flag to override the inferred app name while keeping worktree prefixes

Spell UI

A large collection of high-quality React components that you can use to build beautiful landingpages

Akira

A modern SaaS starter kit built with Next.js, Tailwind CSS, and shadcn/ui. Auth, payments, database, and email all come preconfigured so you can skip the setup and start building right away

🌈 Related

Scaling redirects to infinity on Vercel

Vercel shares why and how they rebuilt their redirects system to handle huge lists without slowing down requests. It walks through the problems with routing rules and middleware at scale, and the new "bulk redirects" system that uses sharding, Bloom filters, and binary search to keep lookups fast

Understanding Why React Fiber Exists

Explains why old React rendering could block the page and how Fiber breaks rendering into small pieces so React can pause, handle actions/clicks first, then continue

How we got hit by Shai-Hulud: A complete post-mortem

Trigger.dev shares how one compromised package during pnpm install led to stolen credentials and a short but destructive GitHub attack. The post walks through the timeline, how the malware worked, and how the team recovered their repositories

Micro Frontends: When They Make Sense and When They Don’t

Micro frontends can unblock many teams working on one app, but they often cost more effort than they save. The article explains common approaches and when to stay monolith

Next.js Weekly #120: Drizzle joins PlanetScale, Prisma Next, Better Auth 1.5, react-doctor, next-md-negotiate, Vercel Queues

Erfan Ebrahimnia — Fri, 06 Mar 2026 11:28:22 +0000

🔥 Hot

The Next Evolution of Prisma ORM

Prisma has shared an early look at Prisma Next, a complete rewrite built in TypeScript. It brings a cleaner query API, a type-safe SQL builder, streaming support, extensions, and a new migration system based on graphs. Prisma 7 remains the production recommendation for now but Prisma Next is being built in the open and will eventually become Prisma 8

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

React is changing the game for streaming apps with the Activity component

This post shows how the new <Activity> component in React 19.2 helps preserve component state when UI sections are hidden. Using a video player example, it demonstrates how to keep playback progress when switching tabs and how to pause the player properly using useLayoutEffect

Error rendering with RSC

This post explains how each of React's three environments (RSC, SSR, and the browser) responds to errors, how Suspense boundaries change the behavior, and why the browser is ultimately the best place to handle them

Cloudflare rewrites Next.js as AI rewrites commercial open source

In last week’s issue we covered how a Cloudflare engineer used AI agents to rebuild much of Next.js with Vite instead of Turbopack, creating an experimental project called vinext that makes it easier to deploy Next.js apps on Cloudflare. This post explores what it could mean for the Next.js ecosystem and how AI might disrupt commercial open source strategies

𝕏 Handle a blocking component in Next.js

A quick look at two ways to deal with components that slow down page rendering in Next.js

⚛️ React Summit | June 12 & 16, 2026

The world’s biggest React conference in beautiful Amsterdam and online! Learn from top React experts & connect with the community.

Use code NEXT for 10% off tickets

📦 Projects / Packages / Tools

Better Auth 1.5

A huge release with 70+ features and 200+ fixes. Adds a new npx auth CLI, a full OAuth 2.1 provider, Electron support, typed errors with i18n, Cloudflare D1 support, and a self-service SAML SSO dashboard. Some breaking changes, so review before upgrading

react-doctor

A CLI tool from the creator of Million.js. Run one command and get a full health report on your React project. It scans for issues across security, performance, architecture, and correctness, then gives you a 0–100 score with actionable diagnostics you can pass straight to a coding agent to fix

next-md-negotiate

This small tool lets your Next.js app return Markdown to LLMs and HTML to browsers using the HTTP Accept header

airbroke

The open source error catcher just shipped a big update. Version 1.1.92 introduces an MCP server, letting you explore and triage errors from an LLM conversation. Also includes Sentry support, a Next.js 16 upgrade, a UI redesign, and more hosting options

🌈 Related

Drizzle joins PlanetScale

The Drizzle team is becoming part of PlanetScale. Their shared focus on performance and developer experience makes the move a natural fit. Drizzle will continue as an independent open source project with PlanetScale’s support

► The Future of TypeScript

Theo explains how TypeScript grew beyond its original purpose and is now slowing down under massive codebases. To solve this, Microsoft is porting the compiler to Go

► Radix UI → Base UI (in 3min)

Radix UI is no longer actively maintained and the team is now working on Base UI. This video walks through how to migrate in four simple steps

Vercel Queues now in public beta

Vercel Queues lets you send messages from your Next.js routes and process them later with automatic retries. This is useful for handling slow or important tasks (like order processing) without blocking requests. It's now in public beta and starts at $0.60 per 1M operations

Next.js Weekly #119: Cloudflare Next.js Drama, Chat SDK, Sandcastle, New useActionState Docs, Query Abstractions

Erfan Ebrahimnia — Fri, 27 Feb 2026 12:28:19 +0000

How we rebuilt Next.js with AI in one week

Cloudflare spent one week and $1,100 on AI tokens to build vinext, a supposed drop-in replacement for Next.js that runs on Vite and deploys to Cloudflare Workers out of the box. It's experimental, but it has been tested against the Next.js test suite.

This sparked heated discussions on X / Twitter:

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

Building Design Components with Action Props using Async React

If you find yourself wiring up loading states and optimistic updates every time a user interaction triggers a Server Component re-render, this post shows a cleaner way by building reusable components that handle all of that internally

Set up your Next.js project for AI coding agents

Next.js has introduced a new guide on how to make AI coding agents smarter in your project

New useActionState docs

The React team has published a major rewrite of the useActionState documentation. The new version clearly explains how action queuing works, how to use it with forms, Server Functions, and useOptimistic, and how to handle errors and cancellation. It also adds detailed troubleshooting sections and practical examples

The Journey to a Safer Frontend: Why We Removed React.FC

Gusto’s frontend team removed React.FC after learning it could hide bugs and weaken type inference

📦 Projects / Packages / Tools

Chat SDK

Vercel released a new open source TypeScript library that helps you create chatbots for multiple platforms using a single codebase. It comes with type-safe events, JSX-based UI components, Redis state adapters, and built-in AI streaming support

styled-components@6.3.0

After going into maintenance mode last year, the library returns with React Server Components support. No use client directive is needed, and CSS is automatically injected and handled correctly in React 19. Existing SSR setups still work as before

next-bun-compile

A new build adapter for Next.js 16 that turns your app into a single executable file using Bun. It embeds your static assets, public files, and Next.js server into one binary

Sandcastle

An experimental project powered by Vercel and Vercel Sandbox. Each user gets isolated Linux workspaces accessible from any browser, with a window manager, terminal, file browser, code editor, and X11 app streaming

🌈 Related

We Ralph Wiggumed WebStreams to make them 10x faster

Vercel found that WebStreams were slowing down Next.js rendering due to excessive Promise and allocation overhead. They built fast-webstreams, a drop-in, spec-compliant replacement powered by Node.js streams internally, achieving up to 14x faster performance for the React Server Components streaming pattern

Private storage for Vercel Blob, now available in public beta

Vercel Blob now offers private storage for sensitive files. Unlike public storage, all reads and writes require authentication, so files aren’t exposed via public URLs

Creating Query Abstractions

This article looks at different ways to share query configuration in TanStack Query. It explains why custom hooks can be limiting and introduces queryOptions as a better abstraction that works across hooks, Suspense, and server usage

A New Home for React Hosted by the Linux Foundation

React is now officially owned by the newly launched React Foundation, hosted by the Linux Foundation. This means React, React Native, and JSX are no longer owned by Meta, but by an independent foundation instead. The goal is to support React’s long-term future with open governance and shared ownership across the ecosystem

Next.js Weekly #118: Agentic Future, Portless, Virtual Scrolling, Geist Pixel, React’s useTransition, next-mdx-remote-client

Erfan Ebrahimnia — Sat, 21 Feb 2026 11:10:16 +0000

🔥 Hot

Building Next.js for an agentic future

The Next.js team shares how they improved the framework to work better with AI coding agents. With MCP integration, improved logging, and tools like agents.md and next-devtools-mcp, agents can now see runtime errors, routes, and internal state more clearly

React’s useTransition: The hook you’re probably using wrong

If your UI freezes while typing, this guide shows how useTransition can help. It also compares useTransition with useDeferredValue, and shows when debouncing is still the better choice

If you wanna get these updates in your inbox every week, just subscribe to the newsletter

📙 Articles / Tutorials / News

Removing Next.js Taught Me Why Frameworks Are Still Essential Even for AI

After reading claims that tools like Claude Code make frameworks useless, the author rebuilt a Next.js app using only HTML, CSS, and vanilla JavaScript. At first, everything worked. But over time, the structure began to fall apart. The experiment showed that the real value of a framework isn’t just its features, but the clear and enforced structure that keeps both humans and AI aligned

Virtual Scrolling for Billions of Rows

The post breaks down five techniques that make it possible to browse billions of rows in React without freezing the browser

Building a Gantt Chart in Next.js with SVAR React Gantt

A step-by-step guide to using SVAR React Gantt in a Next.js app. It shows how to fix common SSR and hydration warnings, apply a theme, and enable task editing with a built-in Editor panel

How We Reduced INP by 100ms+

A look at how moving to Next.js 16 and enabling the React Compiler boosted responsiveness on a complex page. Together with improved telemetry and script analysis, this resulted in significant INP gains

📦 Projects / Packages / Tools

Introducing Geist Pixel

Vercel is expanding the Geist font family with Geist Pixel, a bitmap-style typeface built on a strict pixel grid. It comes with five variants, 480 glyphs, 7 stylistic sets, and supports 32 languages

Portless

This tool replaces messy port numbers like localhost:3000 with clean names like myapp.localhost. It runs a small proxy and routes each app to its own stable URL

next-mdx-remote-client

A maintained fork of next-mdx-remote with support for MDX v3, App Router, and Pages Router. It adds built-in error handling, frontmatter parsing, typed scope, and support for imports/exports in MDX

Prisma v7.4.0

A new caching layer stores compiled query plans so similar queries don’t need to be recompiled each time. This helps improve throughput in high‑concurrency apps