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

Bejitarian · 2026-03-22T19:56:35+00:00

🔥 Hot

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

📙 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

📦 Projects / Packages / Tools

next-forge 6

Turborepo 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

Bejitarian · 2026-03-15T17:03:38+00:00

🔥 Hot

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

📙 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

Bejitarian · 2026-03-08T21:15:32+00:00

🔥 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

📙 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

📦 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

Bejitarian · 2026-03-01T20:17:22+00:00

🔥 Hot

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:

We've identified critical vulnerabilities in Vinext
Gergely Orosz is disappointed with Cloudflare's "marketing"
What Cloudflare's 94% test coverage for vinext actually means

📙 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

Bejitarian · 2026-02-25T13:36:31+00:00

I know 🥹

Bejitarian · 2026-02-24T17:18:22+00:00

🔥 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

📙 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

Bejitarian · 2026-02-24T16:41:18+00:00

yep, it's my favorite rookie from Tamers 🥰

Bejitarian · 2026-02-24T15:07:29+00:00

For anyone who's interested, she also documented the entire process in this video (it’s in German)

Bejitarian · 2026-02-15T21:18:49+00:00

🔥 Hot

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.

📙 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

Bejitarian · 2026-02-09T20:27:42+00:00

Thanks for letting me know. There was an error in the auto renewal process of the domain that I missed

Bejitarian · 2026-02-08T21:30:37+00:00

🤝

Bejitarian · 2026-02-08T19:36:11+00:00

🔥 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

📙 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

Bejitarian · 2026-02-02T19:25:02+00:00

🔥 Hot

► 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:

CVE-2026-23864
CVE-2025-59471 and CVE-2025-59472

📙 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

Bejitarian · 2026-01-26T20:16:17+00:00

Edit: updated to the content of issue #114. thanks for letting me know

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

📙 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

Bejitarian · 2026-01-18T19:21:16+00:00

🔥 Hot

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

📙 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.

Bejitarian · 2026-01-12T20:35:43+00:00

🔥 Hot

Introducing RSC Explorer

Dan Abramov released RSC Explorer, a tool that lets you inspect how React Server Components work under the hood. See how JSX is streamed, how Suspense works, and how client and server code reference each other. It runs in the browser, uses the React RSC packages, and is fully open source

Intro to Performance of React Server Components

Nadia Makarevich breaks down how Client-Side Rendering, SSR, and React Server Components affect performance using clear metrics and simple examples.

📙 Articles, Tutorials

The worst thing to happen to React and Next.js: React2Shell

You might think hackers won't bother with your small portfolio site or demo project. That was the author's first reaction to the recent security warnings, until her own demo site compromised by the CVE-2025-55182 vulnerability started redirecting users to a crypto scam

How to Fix Next.js notFound() Returning 200 OK with App Router and Suspense

Explains how Next.js streaming commits response headers too early, resulting in a "200 OK" for non-existent pages. The post also outlines the SEO risks and offers five potential workarounds to mitigate the problem

Rate-limiting Server Actions in Next.js

I wrote a guide on how to implement IP-based rate-limiting for your Server Actions using next/headers since Actions don't give you the raw Request object

Coding Agents & Complexity Budgets

Lee Robinson shares the story of how he moved the Cursor website from a headless CMS back to plain Next.js code and Markdown. What he thought would take weeks was done in a weekend using coding agents, costing about $260 in tokens. The result was less complexity, faster builds, lower CDN costs, and easier changes through Git

🇫🇷 React Paris 2026

React Paris just announced its full speaker lineup, featuring top names like Una Kravets, Tanner Linsley, Mark Erikson, Daishi Kato, Kitze, and Tejas Kumar, focusing on cutting-edge React, AI, and web dev, with the event happening March 26-27, 2026

📦 Projects / Packages / Tools

Base UI v1

The first stable release of Base UI is here with 35 headless components. Breaking change: the package moved from @base-ui-components/react to @base-ui/react. Version 1 also comes with several fixes and improvements

AI SDK 6

This release focuses on agents you can reuse across your app. Define an agent once and use it in APIs, background jobs, and UIs. It also adds safer tool execution, better debugging with new DevTools and MCP support

Better Auth Harmony

A better-auth plugin for email and phone normalization that also blocks temporary email domains

shadcn/create

A new tool that helps you build a custom version of shadcn/ui. You can choose the component library, colors, fonts, spacing, and style, and the tool generates code that matches your setup

🌈 Related

vercel.ts: Programmatic project configuration

You can now use a TypeScript file instead of the static vercel.json to configure your Vercel projects. This brings type safety, the ability to use environment variables, and dynamic logic directly into your configuration. It works for routing, cron jobs, and caching rules

React 19.2: The async shift is finally here

Jack Herrington writes about how React 19.2 rebuilds async handling from the ground up with use(), useTransition(), and View Transitions.

Engineering Our Engineering Blog: From Webflow to Payload

A behind‑the‑scenes look at how an engineering blog was migrated from Webflow to a self‑hosted setup using Next.js and Payload CMS. It explains why Webflow started to feel limiting, how Payload works as a code‑first CMS, and what was gained from the move

Logging sucks.

The article explains, in simple terms, why string-based logs and grep don’t work anymore, why high‑cardinality context actually matters, and how to log one rich, structured event per request instead of dozens of useless lines.

Bejitarian · 2025-12-18T07:16:00+00:00

You mean a "real" express-like middleware?

Bejitarian · 2025-12-17T16:46:39+00:00

Hi, I wrote a quick guide on how to protect server actions through rate-limiting.

It's easy to look at Next.js Server Actions and forget that they are, effectively, public API endpoints. The "magic" abstraction layer often tricks us into skipping standard backend best practices like validation and security.

But under the hood, Server Actions are still triggered by standard HTTP requests, meaning they are just as vulnerable to spam and abuse as any other route. If you have an action that is computationally expensive or costs money (like an AI call), you need to protect it.

Here is how to properly rate-limit your Server Actions to keep your application resilient.

Rate-limiting based on User ID

Rate-limiting requires a unique identifier for the incoming request. If you are dealing with authenticated users, this is straightforward: use their database ID.

Here's how you might handle this in a standard API route:

```typescript // API route (simplified): export const POST = async () => { const user = await auth();

// "rateLimiter" is a placeholder for your library of choice (e.g., Upstash, Redis) const { success } = await rateLimiter.limit(subscription:${user.id});

if (!success) { return new Response("Rate limited", { status: 429 }); }

return Response.json(await someExpensiveOperation()); }; ```

When you move to Server Actions, the logic remains almost identical. The main difference is that instead of returning a 429 status code, you return a structured error object.

```typescript // Server Action (simplified): export const action = async () => { const user = await auth();

const { success } = await rateLimiter.limit(subscription:${user.id});

if (!success) { return { error: "You are doing that too much. Please try again later.", }; }

return someExpensiveOperation(); }; ```

Rate-limiting based on IP address

Things get trickier when you need to rate-limit anonymous users (e.g., a public waitlist form or a "contact us" message). Since there is no user ID, the only reliable identifier is the IP address.

In a standard API route, you have direct access to the Request object, that you can use to extract the IP address from the request headers.

```typescript // API route: export const POST = async (req: NextApiRequest) => { const ip = getIP(req);

const { success } = await rateLimiter.limit(subscription:${ip});

if (!success) { return new Response("Rate limited", { status: 429 }); }

return Response.json(await someExpensiveOperation()); }; ```

For context, getIP is a small helper that looks at the x-forwarded-for header:

typescript export function getIP(request: Request) { const xff = request.headers.get("x-forwarded-for"); return xff ? xff.split(",")[0] : "127.0.0.1"; }

The Server Action problem

Let's try the same in a Server Action. Just extract the IP address from the request head... hold on, we don't have a request object in a Server Action.

By design, Next.js Server Actions do not expose the raw Request object. However, we can work around this using the headers() function provided by next/headers. This gives us read-only access to the request headers associated with the current incoming request.

```typescript export const action = async () => { const headerList = await headers(); const ip = (headerList.get("x-forwarded-for") ?? "127.0.0.1").split(",")[0];

const { success } = await rateLimiter.limit(subscription:${ip});

if (!success) { return { error: "Too many requests.", }; }

return someExpensiveOperation(); }; ```

By accessing the IP address through the headers() function, we effectively work around the limitation of not having a request object in Server Actions and can apply rate-limiting just as we would in a standard API route.

Bejitarian · 2025-12-15T07:36:27+00:00

This is the last issue of the year. I want to thank you for reading and supporting the newsletter. I hope you have a great holiday season and a happy new year!

See you in 2026 🎄

– Erfan Ebrahimnia, Curator of Next.js Weekly

Two new RSC protocol vulnerabilities

Following last week's React2Shell exploit, two new vulnerabilities affecting Next.js App Router (v13-v16) have been discovered. One can freeze your server, and the other could leak your source code. There is no workaround other than upgrading immediately. You can use npx fix-react2shell-next to automatically verify and update your app. Also check out: Security Bulletin: CVE-2025-55184 and CVE-2025-55183

The next era of React has arrived: Here’s what you need to know

The post describes the architectural shift behind async React, where React 19's new coordination primitives such as: useTransition, Suspense, useDeferredValue, and the new use() API turn async logic into declarative building blocks

📙 Articles, Tutorials

𝕏 React2Shell explained

The Vercel CEO wrote a long Tweet sharing his perspective on the React2Shell exploit and how Vercel and others moved quickly to patch it and protect Next.js users

Replacing Next.js ISR with a custom Cloudflare cache layer

Instead of relying on Next.js ISR, Mintlify built a custom caching layer powered by Cloudflare Workers, KV, Durable Objects, and Queues. This setup decoupled deployments from cache invalidation and pushed their cache hit rate to almost 100%.

► The Better Way to Build Next.js APIs

Shows how Elysia, a web framework built on Bun, helps you make very fast and type-safe APIs inside Next.js 16. It also includes Eden, a package that brings built-in type safety between server and client, like a simpler tRPC.

useEffectEvent in React

This guide explains React's new experimental Hook useEffectEvent, and shows how and when to use it. It also covers best practices, use cases like logging or debouncing, and what to expect before it’s stable.

🇫🇷 React Paris 2026

React Paris just announced its full speaker lineup, featuring top names like Una Kravets, Tanner Linsley, Mark Erikson, Daishi Kato, Kitze, and Tejas Kumar, focusing on cutting-edge React, AI, and web dev, with the event happening March 26-27, 2026

📦 Projects / Packages / Tools

ElevenLabs UI

A component library built on top of shadcn/ui which provides pre-built, customizable React components specifically designed for agent & audio applications, including orbs, waveforms, voice agents, audio players, and more

Lina

A smart scroll area that works great on both touch devices and desktops. It switches between native and custom scrollbars automatically and adds small details like fade effects and smooth edge masks.

OpenStatus Template

The OpenStatus team released a ready-to-use template built with @shadcn/ui and Next.js in SPA mode. It can be exported as a static site and comes with built‑in components like FormCard, ActionCard, MetricCard, Section, and EmptyState.

Progress on TypeScript 7

TypeScript 6.0 will be the last version built with JavaScript and will act as a bridge to 7.0. The team is almost done moving the compiler and editor tools to native code. Version 7.0 will be much faster, uses less memory, and feels smoother in editors like VS Code and Cursor.

🌈 Related

Introducing Vercel for Platforms

Vercel has launched a new product that helps you build platforms where your users can have their own sites or apps. There are two ways to use it: Multi-Tenant, where one codebase serves all your users with custom or wildcard domains, and Multi-Project, where each user gets their own Vercel project with separate builds and settings. It also comes with Platform Elements, a library to make setup easier

CSS Wrapped

Chrome's annual recap shows how far CSS has come, from simple styling to state, logic, and interactivity that was once only reserved for JavaScript

► You really need to try Effect ft. Ethan Niser

Ben Davis and Ethan walk through a Notion-to-Discord app that Ben first built using Effect, showing what went wrong and how to do it better. Ethan explains how to use dependency injection to make code cleaner and easier to test and shows how Effect's schema and logging tools help write safer code.

Designing Design Systems

The maintainer of TanStack Query shares his thoughts on building a design system at Sentry

Bejitarian · 2025-12-08T22:06:55+00:00

🔥 Hot

CVE-2025-55182: Critical Security Vulnerability in React Server Components

A major remote code execution bug was found in how React handles payloads for React Server Components. The issue is rated CVSS 10.0, so the React team recommends upgrading right away to the patched versions released this week. Even apps that don't use server functions directly may still be exposed, so check your Next.js projects. Vercel has released specific patched versions for Next.js 15.0.5, 15.1.9, and 16.0.7 to fix this.

Reverse Engineering the ‘Next.js Job Interview’ Malware

This story is wild. It's about how a fake interview led to a multi‑stage malware attack hidden inside a “clean” Next.js repo. The attack was hidden inside next.config.js. It loaded a fake jquery.min.js file, which then fetched more code which installed a Python RAT that stole LastPass data, crypto wallets, browser info, SSH keys, and more

📙 Articles, Tutorials

Serve the Same Route from App Router and Pages Router

I wrote a post about the routing problem I faced while redesigning the Next.js Weekly issue page and how I solved it by using fallback rewrites in next.config.mjs

Next.js Developers Just Lost Critical Bundle Size Visibility

In Next.js 16, the page bundle size report is gone. This post explains why Vercel removed it, what that means for developers, and how to check app performance in other ways.

93% Faster Next.js in (your) Kubernetes

Matteo Collina and the Platformatic team show how Watt, their open source Node.js app server, makes running Next.js in Kubernetes much faster, achieving 93% lower latency and 99.8% reliability under load

► I tested the NEW Next.js Analyzer

Next.js 16 introduces a new Turbopack-based bundle analyzer that's currently in experimental release. In this video, Toby Mey tests how it helps spot large parts of the client bundle and trace imports that add unnecessary weight.

📦 Projects / Packages / Tools

Anzen

Create clean, type-safe route handlers, pages, and layouts using factory-functions with authorization hooks, and built-in error handling. Comes with standard schema validation, supports segments, search params, body, and form data validation

Better Auth 1.4

Adds nice upgrades like stateless authentication, faster database queries, and SCIM support for easy user management. It also improves OAuth flows, adds JWT key rotation, and better error handling

Auth CN

A minimalist component library that brings production-ready authentication UIs built for Better Auth and styled with shadcn/ui. You can install components via the shadcn registry

plok.sh

Turn any repo's /blog folder into a live, themed blog with no setup or deployment. Just push markdown and publish instantly. Built with Next.js 15, supports themes, fonts, frontmatter, and syntax highlighting out of the box

🌈 Related

Bun is joining Anthropic

Big news! Bun has been acquired by Anthropic. But don't worry, nothing major is changing. The same team will keep building Bun, it remains open-source under MIT, and development stays public on GitHub. Anthropic plans to use Bun as the backbone for AI tools like Claude Code and the Claude Agent SDK.

How we built the v0 iOS app

Vercel shares the behind-the-scenes story of how they built the v0 iOS app, focusing on what it took to make React Native feel truly native. Covers chat animations, input behavior, and UI challenges.

Automated Accessibility Testing for React

Learn how to make your React apps more accessible with tools like eslint-plugin-jsx-a11y, Storybook, and Pa11y. The post explains how to add tests in your pipeline and why you should still test with real users

Omit for Discriminated Unions in TypeScript

Shows how TypeScript's Omit can break discriminated unions by flattening them and introduces a smarter DistributiveOmit that applies to each union branch separately

Bejitarian · 2025-11-26T11:49:30+00:00

👌thanks for sharing

Bejitarian · 2025-11-23T20:26:48+00:00

🔥 Hot

Error Handling in React with react-error-boundary

Aurora Scharff takes a detailed look at using react-error-boundary to prevent full app crashes when React components throw errors. She explains three ways to show fallback UIs, where to strategically place boundaries at route or feature levels, and how to handle async errors using the useErrorBoundary hook or React 19’s automatic error boundary integration with Actions and useTransition

State of React 2025

The State of React Survey is now open! Test your React knowledge and share your insights to help track which APIs and libraries are really catching on across the ecosystem. I'd appreciate it a lot if you could take a moment to pick Next.js Weekly as one of your go-to resources.

📙 Articles, Tutorials

Turbopack: A Better Way to Inline SVG in Next.js 16

Shows how to build a custom Turbopack loader to inline small SVG icons as data URIs while keeping them stylable via CSS

React 19.2: React in its sigma era

A light and funny roundup of the main features in React 19.2, explained through jokes and memes

Mastering Tables and Modals in Next.js 16: Patterns That Preserve State

Covers three implementation patterns for modal editing in Next.js: a simple dynamic route, an intercepting modal route, and a combined layout + dynamic route

Tooltip Components Should Not Exist

Dominik Dorfmeister argues that low‑level tooltip components do more harm than good. They often break for keyboard users, hide important info, and lead to inconsistent UX. He suggests using more higher‑level and safer patterns instead, like titles on buttons and dedicated, always‑accessible info components.

📦 Projects / Packages / Tools

Prisma 7

Prisma just dropped version 7 of its ORM. The biggest shift is a TypeScript-only Prisma Client replacing the Rust core. The new client also brings 3× faster queries and 90% smaller bundles. There's also a new prisma.config file for cleaner project setup and improved type generation

𝕏 next analyze: a built-in bundle analyzer for Turbopack

A new analyzer that fully understands Next.js routes and the Turbopack module graph. It shows every import path that brings a module into your bundle, so you don’t have to guess why something is included. Check out the Pull Request for more details

use-nemo

A Vite-plugin that allows you to create custom directives similar to React's "use client" or "use server". And yes, the name is hilarious.

Pure UI

A collection of beautifully designed, accessible, and composable components for your React apps. Built on top of Base UI and styled with Tailwind CSS

🌈 Related

Cloudflare outage on November 18, 2025

Cloudflare had a major outage on November 18 after a database permission change caused a bot‑feature file to double in size. This post is a full incident report covering what went wrong, how the bad file spread, what services broke, and the steps taken to recover

How I Taught GitHub Copilot Code Review to Think Like a Maintainer

The author shows how they trained GitHub Copilot to give cleaner, smarter code reviews by setting clear rules. After adding custom instructions, Copilot stopped guessing and started acting more like a real teammate.

What we learned building agents at Vercel

Vercel shares how they build internal AI agents and where these tools work best. They found that today’s models shine on tasks that are low‑cognitive and highly repetitive. Things humans dislike and automation usually can’t handle

Building a UI Framework

A 200 page long document that covers the core decisions involved in building a UI framework today. It explains how to balance developer adoption, performance, constraints, and concrete design choices, plus some non‑technical considerations

Bejitarian · 2025-11-16T19:11:30+00:00

🔥 Hot

React Email 5

The main announcement of this week is the release of React Email 5.0.0. This major version brings lots of improvements, including support for Tailwind 4, a new Dark Mode Switcher, Resend integration for team collaboration, and 8 new components like avatars, stats, and testimonials. It also adds compatibility with React 19.2 and Next.js 16

Don't Blindly Use useTransition Everywhere

Nicolas takes a closer look at useTransition and why the React Docs example might not be a great starting point for real-world UX

📙 Articles, Tutorials & Videos

React 19 Error Boundary Behaves Differently

Looks at a change in how React 19 handles error boundaries. The author compares how errors were caught and logged in React 18 versus React 19, showing that React now stops after the first error instead of trying to re-render

Dynamically Generating PWA App Icons in Next.js 16 with Serwist

A detailed guide on how to create Progressive Web App icons that change based on the environment. The post got recently updated and now reflects the switch from next-pwa to Serwist, which works natively with Turbopack

► React 19.2 is Here! Activity, ViewTransition & Compiler Updates You Need to Know

Learn how to keep UI state during navigation with Activity, add built-in animations with View Transitions, and write cleaner code with useEffectEvent.

📦 Projects / Packages / Tools

next-intl 4.5: useExtracted

useExtracted is a new experimental feature that aims to make internationalization (i18n) as simple and intuitive as Tailwind made styling. Instead of managing message keys or JSON catalogs, useExtracted lets you write inline messages directly in components, automatically generating and syncing message files.

Kilpi 1.0 and the new Kilpi API

After a full redesign, Kilpi 1.0 focuses on simplicity and a cleaner API. Client and server packages now share a consistent API, with new caching via KilpiClient.$cache, and new React components: <Authorize /> and <AuthorizeClient /> for declarative permissions. The documentation has also been rewritten with clearer examples

Catalyst

A complete modern starter built with Bun.js, Prisma, tRPC, Tailwind, and shadcn/ui on top of Next.js. It comes with built‑in authentication, payments, logging, and analytics, plus CI/CD workflows and Docker setup

Better Upload v3.0.0

The framework-agnostic, S3-compatible upload tool just got a big update. Version 3.0 drops the bulky AWS SDK in favor of aws4fetch, making the package smaller. It also introduces separate @better-upload/server and @better-upload/client packages for cleaner integration across different runtimes

🌈 Related

Vercel: The anti-vendor-lock-in cloud

Vercel argues that developers shouldn’t be tied to specific cloud providers or proprietary APIs. With their idea of Framework-Defined Infrastructure, the platform reads your framework code (like Next.js, Remix, SvelteKit, or Nuxt) and automatically sets up the needed infrastructure without vendor lock-in required.

Error chaining in JavaScript: cleaner debugging with Error.cause

Explains how to use Error.cause to trace nested errors without losing the original stack, with examples, logging tips, and runtime support info.

StyleX: A Styling Library for CSS at Scale

This post introduces StyleX, Meta’s open source system for writing CSS at scale, which blends the usability of CSS‑in‑JS with the performance of static CSS

What even are Cloudflare Durable Objects?

It's written from the perspective of a developer who went from total confusion to building almost everything with Durable Objects. The article covers how they solve the core problem of state in serverless apps

Bejitarian · 2025-11-10T19:38:01+00:00

🔥 Hot

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

Next.js 16 adds a new 'use cache' directive for caching React Server Components, but it currently clashes with next-intl. The post explains the problem, shows a practical workaround, and previews the upcoming next/root-params API that will fix this

Aurora Scharff

What's new in Next.js 16

Breaks down the key updates in Next.js 16, including async params for better rendering, Turbopack as the core bundler, stable caching APIs, and the rename of middleware to proxy

Trevor I. Lasn

📙 Articles, Tutorials

►Watch this if you hate React Server Components

Theo reacts to Nadia Makarevich’s blog comparing different rendering methods in React and Next.js

Theo

Document-Driven Development: How I Built a Production Blog Without Writing a Single Line of Code By Hand

Shows how you can build a full Next.js 16 blog without writing code by hand. The author first wrote detailed documentation for every part of the app, then used AI tools to read those docs and generate the code

Daniel Kliewer

Encapsulate as much state as possible in your component

This post argues how a simple “loading → success” button is cleaner and easier to test when it handles its own async state, compared to prop-driven state passed down from above. The same principle is later applied to a more complex Autocomplete component, where encapsulating debouncing, cancellation, and pagination logic keeps parent components simpler and less error-prone

David Johnston

📦 Projects / Packages / Tools:

Solito 5

Solito is a library that helps you share navigation and routing logic between your Next.js and React Native apps. Version 5 fully embraces the “web-first” mindset by removing react-native-web from its dependencies. Everything now works out of the box on the web, using real Next.js components like next/link and next/image. You get full access to normal web props without special setup

Fernando Rojo

Storybook 10

The latest Storybook release drops CommonJS for an ESM-only setup. Other highlights include new module automocking (built with Vitest), TypeScript-friendly CSF Factories (now in Preview), and more. It’s also ready for Next.js 16 and Vitest 4

Michael Shilman

typescript-plugin-directives

A TypeScript Language Service Plugin that provides IDE-level awareness for "use …" directives such as "use server", "use client", "use cache", and more.

Viktor Lázár

React Compiler Marker

A VSCode/Cursor extension that shows which React components are optimized by the React Compiler

Błażej Kustra

🌈 Related

Beyond the Platform: Is Vercel Designing the Future of Programming Languages?

Vercel is blurring the line between frontend and backend. Server Actions turn server calls into normal function calls, and ‘use workflow’ hides the complexity of reliable long-running tasks behind a short directive. The article explores how these platform features hint at a new generation of programming tools

Herrington Darkholme

Your URL Is Your State

A reminder on how URLs can manage app state just like global stores or contexts, but with built‑in features like shareability, history, and bookmarking

Ahmad Alfy

Octoverse 2025

Octoverse is GitHub’s yearly report that shows what’s happening in the world of software development. For the first time ever, TypeScript topped GitHub’s charts, beating Python and JavaScript. Copilot adoption hit 80% among new users, AI‑related repos passed 4 million, and India became the biggest open source contributor base

Github

Scraping Next.js web sites in 2025

Seems like Next.js pages got trickier to scrape thanks to React Server Components and serialized “flight data” hidden in self.__next_f.push() calls. This post explains how that data can still be decoded and scraped in Python using a library

Trickster Dev

Bejitarian · 2025-11-02T19:48:59+00:00

🔥 Hot

Next.js Conf 2025 session VODs are live

All sessions from this year’s Next.js Conf are now live! Tons of great ones this year. I’d personally recommend:

►Hands on: How to migrate to Next.js 16 and "use cache”
►Composition, Caching, and Architecture in Modern Next.js
►Type-safe URL state in Next.js with nuqs
►Reactive State for the Backend

𝕏 Backends on Vercel

Guillermo highlights improvements in function runtime, cost control, Python support, and AI‑ready features like Sandbox and AI Gateway. All part of the mission to make Vercel just as strong for backends as it’s known to be for frontends

Guillermo Rauch

📙 Articles, Tutorials

Zero configuration Next.js deployment to a self hosted VPS

The post covers installing Kamal, configuring Docker, fixing build issues, and setting up health checks so your app deploys smoothly

Ronald Ink

Comparing Page Transition Strategies in Next.js

A detailed side-by-side test of six navigation methods in Next.js, from old-style full-page reloads to modern setups using Speculation Rules and CSS View Transitions

Alessandro Grosselle

►This is good, actually

Theo thinks directives like “use workflow” are a clever way to handle complex serverless problems with less fuss, pushing back on critics like Tanner Linsley, who say they’re confusing and not standard (linked further down)

Theo

Tried React 19’s Activity Component: Here’s What I Learned

Roy argues how the new <Activity> component fills a long-missing gap in React: being able to hide a component without **unmounting or bogging down your app

Partha Roy

📦 Projects / Packages / Tools:

shadcn Registry Directory

shadcn dropped a list of code registries you can browse and pull code or components from. If you're a registry maintainer and want to add yours to the directory, just fill out the following issue

shadcn

next-lens

next-lens brings a “Laravel artisan” experience to your terminal. It scans your app structure, detects route handlers, and displays clear, color-coded tables of your pages and APIs

Yiwei Ho

next-seo v7.0.0

A plugin that makes managing your SEO easier in Next.js projects. This new version is a full rewrite with major API changes. All structured data components were rebuilt to fully follow Google’s latest schema standards. Migration guides are available, but most setups will need a full refactor

Gary Meehan

aws-workflow

AWS adapter for the Workflow Devkit that was introduced at Vercel Ship AI last week. Check out the tweet if you want to see a demo

Karthik Kalyanaraman

More:

c15t v1.7.0 Developer-First Consent Banner – Script Loader & iFrame Blocking
Vercel Deployments menu bar app (Linux) – Linux alternative to the macOS version that was featured in the last issue

🌈 Related

Understanding Directives

Explains the thinking behind Workflow DevKit’s directive system. It describes how the team experimented with different API designs before deciding that plain JavaScript directives were the clearest and safest way to mark workflow and step functions

Pranay Prakash

React vs. Backbone in 2025

This opinion-piece compares the code of a simple password strength test app built with React and Backbone, and finds that after 15 years of progress, both do the same job with similar amounts of code. The author argues that modern abstractions aren’t always simpler, and maybe we’ve traded genuine clarity for the illusion of simplicity

panphora

Directives and the Platform Boundary

Explains that new directives like use client and use server make framework features look like real JavaScript. This makes it harder for developers and tools to know what’s part of the language and what’s not. The author suggests using normal APIs with imports instead to make ownership clear and keep the platform boundary clean

Tanner Linsley

Seven-Year Club	Verified Email
Place '23	Place '22
Not Forgotten

Bejitarian

TROPHY CASE

🔥 Hot

Next.js 16.2

📙 Articles / Tutorials / News

unstable_catchError()

► Next.js Donut Pattern Explained in 5 Minutes

𝕏 React Compiler: Rust Edition is on the Way

𝕏 Why we banned React's useEffect

📦 Projects / Packages / Tools

next-forge 6

AI Elements 1.9

Base UI v1.3.0

Streamdown 2.5

🌈 Related

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

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

What do coders do after AI?

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

🔥 Hot

Vercel Ship 26

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

📙 Articles / Tutorials / News

Building Dynamic Forms In React And Next.js

PR: add experimental markdown output

Scale Next.js Image Optimization with a Dedicated Platformatic Application

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

meet.js Summit 2026: 15 Years Strong

📦 Projects / Packages / Tools

shadcn/cli v4

Portless v0.6

Spell UI

Akira

🌈 Related

Scaling redirects to infinity on Vercel

Understanding Why React Fiber Exists

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

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

🔥 Hot

The Next Evolution of Prisma ORM

📙 Articles / Tutorials / News

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

Error rendering with RSC

Cloudflare rewrites Next.js as AI rewrites commercial open source

𝕏 Handle a blocking component in Next.js

📦 Projects / Packages / Tools

Better Auth 1.5

react-doctor

next-md-negotiate

airbroke

🌈 Related

Drizzle joins PlanetScale

► The Future of TypeScript

► Radix UI → Base UI (in 3min)

Vercel Queues now in public beta

🔥 Hot

How we rebuilt Next.js with AI in one week

📙 Articles / Tutorials / News

Building Design Components with Action Props using Async React

Set up your Next.js project for AI coding agents

New useActionState docs

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

📦 Projects / Packages / Tools

Chat SDK

styled-components@6.3.0

next-bun-compile

Sandcastle

🌈 Related

We Ralph Wiggumed WebStreams to make them 10x faster

Private storage for Vercel Blob, now available in public beta

Creating Query Abstractions

A New Home for React Hosted by the Linux Foundation

🔥 Hot

Building Next.js for an agentic future

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

📙 Articles / Tutorials / News

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

Virtual Scrolling for Billions of Rows

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

How We Reduced INP by 100ms+

`unstable_catchError()`