DEV Community: Erfan Ebrahimnia

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

🌈 Related

AGENTS.md outperforms skills in our agent evals

The team expected agents to use skills to read Next.js docs. But in many cases, the agents didn’t trigger the skill at all. This post explores why tool usage can be unreliable and why embedding guidance directly in AGENTS.md led to much better

The challenges of soft delete

A practical look at how to handle deleted data the right way. The author compares soft delete with trigger-based archives, and explains the trade-offs of each approach

Tips on how to pick the right icons for your website

This post is about avoiding common icon mistakes. It shows why mixing different styles, sizes, and colors can make your design look messy, and how to keep everything consistent

► React Components for both the Client & the Server

A React Summit talk on how to build “hybrid” components that keep most of the UI on the server while adding interactivity with small client wrappers

Next.js Weekly #117: vS3, TypeScript 6.0 Beta, Bulletproof Component, AI Debugging, Enterprise Next.js, State of React 2025

Erfan Ebrahimnia — Fri, 13 Feb 2026 12:35:35 +0000

Building Bulletproof React Components

Most components only work in the happy path but real apps have SSR, hydration, multiple instances, concurrent rendering, portals, transitions, and more. This guide shows how to make components survive in all those cases

Debugging with AI: Can It Replace an Experienced Developer?

Nadia compares AI-driven debugging with traditional debugging across several real-world issues. The article walks through real bugs, compares AI fixes with manual investigation, and explains why “working” fixes are not always correct.

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

📙 Articles / Tutorials / News

Next.js at Enterprise Level

A step-by-step guide to scaling Next.js apps, from defining SLAs and monitoring to using CDNs, better caching, load balancers, Redis, API Gateways, and event-driven systems

Why Google Refuses to Index Your Next.js Site

If your Next.js site loads fast but still won’t get indexed, the problem is often not SEO. This article breaks down how redirects (especially 308s), missing sitemaps, weak canonicals, and hidden Vercel behaviors can confuse Google. It also introduces vercel-seo-audit, a CLI tool to help you see your site the way Googlebot does and fix indexing problems at the root

Go 1.22, SQLite, and Next.js: The "Boring" Backend

A case for choosing simple, stable tools over trendy stacks. The author builds a backend with Go and SQLite, and connects it to a Next.js frontend

React’s ViewTransition Element

This post looks at React <ViewTransition> component. It compares using the browser’s native View Transitions API directly with using React’s built-in version

📦 Projects / Packages / Tools

Announcing TypeScript 6.0 Beta

TypeScript 6.0 is out in beta and acts as a bridge between 5.9 and the upcoming TypeScript 7.0 (which will use a new Go-based compiler). This release focuses on preparing for 7.0, but also ships useful updates like built-in types for Temporal, Map.getOrInsert, and RegExp.escape, plus a new es2025 target

accept-md

A small tool that lets your Next.js app return clean Markdown when a client sends Accept: text/markdown. It works with both App Router and Pages Router. Great for AI crawlers, docs exports, content reuse, and keeping a canonical Markdown version of your content

vS3

vS3 makes it easy to handle S3 storage in your app. It supports pre-signed URLs, encryption, and request validation, so you don’t have to build everything yourself.

eslint-plugin-next-pages-router

A new ESLint plugin focused on the Next.js Pages Router. It checks route comparisons and router.push / router.replace calls against your actual pages/ folder to catch typos and wrong patterns early. It understands dynamic routes, query strings, basePath, and i18n, and even suggests fixes in editors like VS Code

🌈 Related

State of React 2025

The results of 2025 State of React survey have been released. Tl;dr: 2025 was a big and sometimes chaotic year for React. React 19 raised questions about the future of client-side apps, CRA was sunset, and RSC debates continued. SPAs are still strong, AI tools now default to React, and despite the noise, React remains in a very solid place

Radix UI vs Base UI

Radix UI gives you structured, accessible components with strong defaults and a stable API. Base UI takes a lower-level, behavior-first approach, giving you full control over markup, layout, and animations. The post helps you decide which one fits your project and team best

The Too Early Breakpoint

Shows examples from sites like Time and TechCrunch where layouts change too early and look awkward. The author argues for more thoughtful, flexible designs that adapt smoothly across screen sizes instead of switching to the smallest layout too soon

The logo soup problem (and how to solve it)

The post looks at how uneven logo sizes, hidden padding, and dense vs thin designs create visual chaos. Then it walks through a simple math-based approach and presents LogoSoup, a tiny React library that sizes, crops, and aligns logos automatically

Next.js Weekly #116: Next-Intl Precompilation, RSC vs SSR, Syntux, Tamagui 2, Vercel Sandbox, CSS in 2026

Erfan Ebrahimnia — Fri, 06 Feb 2026 11:45:27 +0000

🔥 Hot

► Improving Performance using React Server Components

In this talk, Vercel engineer Gal Schlesinger explains how React Server Components work under the hood and why they’re powerful. He shows how streaming HTML and Suspense let apps render important content first and delay the rest, without extra client-side requests

Ahead-of-time compilation for next-intl

next-intl now supports precompiling translations at build time. By enabling a single flag in next.config.ts, you can cut about 9KB of compressed JavaScript from your bundle and make message formatting faster at runtime

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

📙 Articles, Tutorials

► RSC vs SSR Performance

Nadia Makarevich compares client-side rendering, classic SSR, SSR with server data fetching, and finally Server Components with streaming

New useOptimistic docs

If you haven’t looked yet, the updated useOptimistic docs are worth a visit. They explain the hook with simple examples, cover many real-world use cases, and include interactive sandboxes so you can try things yourself

My approach to building full-stack web apps with Next.js

Not a best‑practices guide, but a breakdown of the architecture the author uses across his projects. It covers assets, layouts, Server Actions, caching, and job processing, with an emphasis on avoiding surprises in production.

You probably don’t need useCallback here

Argues that useMemo and useCallback usually don’t help much unless you’re avoiding expensive work or keeping stable references for memoised children or effects

📦 Projects / Packages / Tools

Tamagui 2

Tamagui v2 is here with a big focus on stability, speed, and better docs. It brings typed, high‑performance styling that works the same on React Native and the web, plus many updated components, a new default config, better themes, and major compiler and animation improvements

agent-browser

A fast browser automation tool made for AI agents. It uses compact text output instead of heavy JSON, which saves tokens and makes it easier for LLMs to understand. It gives each page element a stable ref, so agents can click and interact in a clear and repeatable way

syntux

syntux lets you build generative UIs from your data. You pass in a value and a short hint, and syntux designs and renders a UI for you. It supports streaming UI generation, caching, and custom React components.

facehash

A small React component that creates friendly, unique avatar faces from any text like a username or email. It has zero dependencies, works offline, and is fully deterministic (same input, same face)

🌈 Related

JavaScript Frameworks - Heading into 2026

Ryan Carniato shares his annual overview of the JavaScript framework landscape. Instead of flashy new tools, this year focuses on deeper shifts: AI-first frameworks, apps that run the same code on server and client, and async as a core concept

𝕏 Performance Is Not a Technical Problem

After years of performance work at Vercel, Shu argues that performance issues aren’t caused by bad code or bad engineers, but by entropy. As apps grow, context is lost, abstractions hide real costs, and performance slowly degrades. He believes long-term performance requires systems that account for lost context and growing complexity.

CSS in 2026: The new features reshaping frontend development

Modern CSS is becoming powerful enough to replace a lot of JavaScript for UI work. This article explores new features like customizable native <select> elements, better animations, and data-driven styling

Run untrusted code with Vercel Sandbox, now generally available

Vercel’s Sandbox lets AI agents run untrusted code in fast, isolated Linux microVMs. It’s built for short‑lived tasks, starts in under a second, and shuts down when done. The Sandbox CLI and SDK are now open source, with pay‑only‑for‑CPU pricing

Next.js Weekly #115: 🚨 New CVEs, Patterns & Best Practices, Github PRs UI with RSCs, next-lens, Inside Turbopack

Erfan Ebrahimnia — Fri, 30 Jan 2026 11:01:09 +0000

► Next.js Patterns: Public pages with personalization (6:37)

Delba shows how to start with a fully static page and slowly add async and user-specific content without slowing things down

🚨 New Next.js CVEs

Several denial‑of‑service vulnerabilities were found that could crash servers or cause very high memory or CPU usage. The issues affect React Server Components and some self‑hosted Next.js setups under specific conditions. Fixes are available in the latest React and Next.js releases:

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

📙 Articles, Tutorials

Rebuilding a better GitHub PRs UI with Next.js and RSCs

Francisco Miranda built a faster GitHub pull request UI using Next.js and React Server Components. The project leans heavily on server rendering, minimal client components, Next.js caching, and Suspense to keep large PRs responsive

Next.js Image Optimization

A beginner-friendly breakdown of how Next.js handles images using the built-in next/image component. It covers topics such as how to avoid common mistakes like lazy-loading LCP images, preloading, blur placeholders, and when to consider alternatives like Unpic

Build a Next.js 16 PWA with true offline support

This guide goes beyond the basic PWA setup in Next.js. It shows how to build an offline-first app using service workers, IndexedDB, and sync logic, so users can add and update data without a connection and sync later

Next.js Glossary

Vercel launched a large, up-to-date glossary that explains common Next.js concepts in simple language, from App Router and Server Components to caching, streaming, and Turbopack

📦 Projects / Packages / Tools

next-best-practices

A new skill set from Vercel that helps agents follow best practices when working with the Next.js App Router. It covers concepts like Server and Client Components, data fetching, routing, performance, and error handling, and also includes optional skills for version upgrades and features like Cache Components

next-lens v1.2

next-lens has shipped several nice updates since the last time it was featured. The web inspector lets you browse routes visually, search and filter them, manage API methods, and open source files directly in your IDE. There’s also a new Raycast extension that lets you inspect routes, copy paths, and jump into your editor

json-render

A new library for building AI‑driven UIs using safe, predictable JSON instead of free‑form text. You can define a component catalog and allowed actions, then let AI stream JSON that always matches your schema.

next-seo v7.1.0

This release adds a new HowToJsonLd component that helps search engines understand your how‑to guides. You can describe steps, tools, materials, time needed, cost, and even videos in a clear, structured way

🌈 Related

Inside Turbopack: Building Faster by Building Less

Learn how the smart caching system behind Turbopack works, and how build results are reused and now saved to disk for faster restarts

The Incredible Overcomplexity of the Shadcn Radio Button

The author argues that modern UI libraries often rebuild basic browser features from scratch, even when native HTML and a bit of CSS would do the job better

Bun Is Fast, Until Latency Matters for Next.js Workloads

Interesting benchmark showing that while Bun is often seen as very fast, it struggles with latency in real Next.js server workloads. Under heavy traffic, Deno and Platformatic Watt had much lower and more stable response times, with Node.js in between.

I left frontend for SDET, then came back

A personal story about leaving frontend work to become an SDET, facing fears around CI, testing, and infrastructure, and why it ended up making the author a much better frontend developer

Next.js Weekly #114: Skills.sh, Stealing React Components, better-themes, Server Action Data Fetching, opensrc

Erfan Ebrahimnia — Mon, 26 Jan 2026 20:15:21 +0000

Skills.sh

This week Vercel launched Skills.sh. A collection of reusable capabilities for AI agents that you can install with one command. There are already 4,500+ unique agent skills, covering popular tools like BetterAuth, Remotion, and Stripe

► Building a Hybrid AI Chatbot with Next.js 16

Sam Selikoff walks through building a chatbot app using new Next.js 16 features. He shows how to stream AI responses from OpenAI, handle optimistic UI updates, and preview loading states with the new Suspense DevTools

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

📙 Articles, Tutorials

Can You Fetch Data with React Server Actions?

Before replacing fetch with React Server Actions, you'll want to read this. This post tests whether Server Actions work for fetching data on the client by building a dashboard app and measuring its performance with both Server Actions and regular fetch

useOptimistic Won't Save You

Explains why optimistic UI in React is still hard, even with React 19’s new useOptimistic hook. The article walks through common bugs like flickering state and race conditions, explains how Concurrent React and transitions add more complexity, and shows that useOptimistic alone doesn't solve ordering issues

How to Steal Any React Component

A clever hack that turns React's dev-friendly features against itself. React Developer Tools works by reading React Fiber data that's exposed in the browser. This post shows how to use the same data from live websites and reconstruct components with AI

React has changed, your Hooks should too

The post looks at how modern React (18+) pushes us away from overusing useEffect and toward cleaner, render‑driven patterns. It covers common Hook mistakes, better use of derived state, custom Hooks as true encapsulation, and newer tools like useSyncExternalStore, transitions, and deferred values

📦 Projects / Packages / Tools

𝕏 Remotion Skills

Remotion, the framework for creating videos programmatically with React, dropped their Agent skill this week, and the motion designs coming out of it are absolutely nuts. Alex Sidorenko demonstrates how you can use it to create your own videos

opensrc

opensrc is a small CLI tool that pulls down the source code of npm packages or GitHub repos so AI coding agents can understand how things work internally, not just the types

better-themes

A lightweight theme manager for React apps that focuses on doing theming “right” from the start. It avoids theme flashes on load, supports system dark mode, and works well with SSR and SSG

Next.js Boilerplate v6

Probably the longest‑maintained Next.js starter boilerplate out there. Version 6 ships with a zero‑setup local Postgres database, fresh updates to everything included (Sentry, Vitest, Storybook, etc.), and all the latest Next.js goodies like the React Compiler, a faster dev server, and more

🌈 Related

Interview: David Haz, creator of React Bits

An interview with David Haz about building React Bits, an open‑source library with 100+ animated and interactive React components. He talks about growing the project to 30k GitHub stars, balancing it with a full‑time frontend job, and how Motion, GSAP, and AI fit into his workflow

Vercel vs Netlify vs Cloudflare: Serverless Cold Starts Compared

This benchmark measures how much cold starts slow down Next.js apps on popular serverless platforms. Using the same Next.js app across providers, the results show Cloudflare as the fastest and most consistent, Netlify as the slowest (even when warm), and Vercel performing well for pages but suffering frequent cold starts on APIs

The Next Two Years of Software Engineering

Over the next two years, the day-to-day work of developers may look very different. Addy Osmani explores how AI is changing software engineering and what developers should do to stay relevant

The Astro Technology Company joins Cloudflare

The Astro web framework is joining Cloudflare. Astro will stay open-source, MIT-licensed, and platform‑agnostic, with the same roadmap and governance. With more resources, Astro can keep experimenting with performance, and add pressure and inspiration for how Next.js develops

Next.js Weekly #113: RSC Fetching Patterns, react-grab, React Best Practices, dotenv-diff, React Conf 2025, Zero UI

Erfan Ebrahimnia — Fri, 16 Jan 2026 07:53:01 +0000

Sharing data with Client Components

Sam Selikoff shared another useful Next.js pattern. It shows how to share server-fetched data with Client Components without blocking the page, by passing a promise through Context and unwrapping it with React's use hook. Especially handy for shared data like auth, feature flags, or request-based values.

React Conf 2025

All React Conf 2025 sessions are now live! The talks cover what's next for React and React Native, including new features like <Activity />, View Transitions, and the release of React Compiler v1.0

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

📙 Articles, Tutorials

Data Fetching Patterns in React Server Components

A practical guide on how data fetching has evolved from client-side fetching to SSR and now React Server Components. It shows patterns like server-owned data with request deduping, sharing data with client components, React Query hydration, and streaming promises with Suspense

Next.js 16 vs. TanStack Start for E-commerce

Explains the trade‑offs between Next.js’s opinionated, batteries‑included approach and TanStack Start’s more flexible, hands‑on style. It looks at how each one handles things like rendering, data fetching, caching, SEO, performance, hosting costs, and long‑term maintenance

► STOP showing loading states and START using optimistic UI

Learn how useOptimistic and startTransition let you update the UI instantly while the server work happens in the background, including how rollbacks work on errors

Using React Transitions for low priority text editor updates

When a text editor starts doing too much work on every keystroke, performance can quickly suffer. This post shows how React Transitions can defer non‑critical updates, like read‑only previews, without affecting the main editing experience

📦 Projects / Packages / Tools

React Best Practices

Vercel has released an open-source repository that collects over 10 years of React and Next.js performance learnings into one place. The rules are ordered by impact, include clear examples, and are designed to be used by both humans and AI coding agents

react-grab

Press ⌘C / Ctrl+C to grab the file name, React component, and HTML of an element, ready to paste into tools like Cursor, Claude Code, or Copilot

React Zero UI

A new approach to UI state that avoids React re‑renders completely. Instead of updating state at runtime, it pre‑renders all UI states at build time and switches them using data-* attributes and CSS

dotenv-diff

This tool scans your whole codebase and helps you spot missing, unused, duplicated, or wrongly named variables before they cause bugs in production.

🌈 Related

Building Type-Safe Compound Components

In part 3 of Dominik Dorfmeister's series on Design Systems he explores compound components, explaining when they work well in React, when props or slots are a better choice, and how to handle type safety

I moved virtualization math to Rust/WASM - here's what I learned

A write-up about experimenting with WebAssembly to speed up list virtualization in a React app. The post explains why scrolling large, variable-height lists can get slow in JavaScript, and how moving the heavy math to Rust + WASM made scrolling much smoother, even with millions of rows

Mitigating Denial-of-Service Vulnerability for Next.js / React

A Node.js bug made stack overflows uncatchable when async_hooks are enabled, causing servers to crash. This silently impacted React Server Components, Next.js, and most APM tools because they rely on AsyncLocalStorage

I rebuilt my blog with React Server Components

The post explains where server components work really well, like code highlighting, LaTeX, and RSS generation, and where things feel awkward, such as client-side navigation. Instead of using Next.js, the author went with Parcel, but the ideas still carry over.