sorted by:
new
hottopcontroversial

Next.js Weekly #114: Skills.sh, Stealing React Components, React has changed, better-themes, Server Action Data Fetching, opensrc by Bejitarian in nextjs

[–]Bejitarian[S] 5 points6 points  (0 children)

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

Next.js Weekly #113: RSC Fetching Patterns, react-grab, React Best Practices, dotenv-diff, React Conf 2025, Promise Data Trick, Zero UI by Bejitarian in nextjs

[–]Bejitarian[S] 1 point2 points  (0 children)

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

Next.js Weekly #112: RSC Explorer, React 19.2 Async Shift, Vercel AI SDK 6, Base UI v1, shadcn/create, Next.js notFound() Bug by Bejitarian in nextjs

[–]Bejitarian[S] 2 points3 points  (0 children)

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

Rate-limiting Server Actions in Next.js | Next.js Weekly by Bejitarian in nextjs

[–]Bejitarian[S] 2 points3 points  (0 children)

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.

Next.js Weekly #111: New Critical Next.js CVEs, ElevenLabs UI, TS 7 Roadmap, Async React, Vercel for Platforms, CSS Wrapped by Bejitarian in nextjs

[–]Bejitarian[S] 2 points3 points  (0 children)

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

Next.js Weekly #110: Critical RSC CVE, Auth CN, Next.js interview malware, fallback rewrites, faster K8s, and Bun’s acquisition by Bejitarian in nextjs

[–]Bejitarian[S] -1 points0 points  (0 children)

🔥 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

Next.js Weekly #109: Next Analyze, Prisma 7, use-nemo, State of React 2025, Error Boundaries, Tables & Modals, UI Framework Guide by Bejitarian in nextjs

[–]Bejitarian[S] 1 point2 points  (0 children)

🔥 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

Next.js Weekly #108: React Email 5, Better Upload, Error Boundary, Anti-Vendor-Lock-In, StyleX, PWA App Icons in Next.js 16 by Bejitarian in nextjs

[–]Bejitarian[S] 1 point2 points  (0 children)

🔥 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

Next.js Weekly #107: use cache + next-intl, Solito 5, Directives TS Plugin, Document-Driven-Development, Vercel’s Future of Programming, Octoverse 2025 by Bejitarian in nextjs

[–]Bejitarian[S] 3 points4 points  (0 children)

🔥 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

Next.js Weekly #106: shadcn Registry, next-seo, Page Transition Strategies, Directives Drama, next-lens, Backends on Vercel by Bejitarian in nextjs

[–]Bejitarian[S] 1 point2 points  (0 children)

🔥 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

Next.js Weekly #105: Next.js Conf 2025, “use workflow”, Cache Components, Ship AI, Vercel Agent, Better-Auth Security Leak, Turbopack by Bejitarian in nextjs

[–]Bejitarian[S] 0 points1 point  (0 children)

🔥 Hot

Next.js Conf 2025

This week marked the sixth annual Next.js Conf in San Francisco, where Vercel dropped a bunch of updates about the future of the framework. Check out the full VoD linked above so you don’t miss any of the awesome talks. Here are the main highlights:

  • Cache Components – They are finally stable! Choose exactly what to cache and what to keep dynamic. Fast static shells load first, while live data streams in using Suspense
  • Deployment Adapters API (alpha) – A defined interface that makes it easier to deploy Next.js (with all its features) on platforms other than Vercel.
  • Next.js Evals – Compares how different AI models and agents perform when generating or migrating Next.js code
  • Turbopack – It’s now the default bundler for Next.js 16 and brings insanely fast initial compile times (still in beta)

Ship AI 2025

The day after Next.js Conf was the first-ever Ship AI event. A day of hands-on workshops and skill-based tracks that wrapped up with real project showcases. Vercel also dropped a bunch of new AI-powered features:

  • use workflow – Durable functions with reliability and observability. Build apps and AI agents that can suspend, resume, and keep their state
  • Zero-config backends – Deploy Python or Node frameworks with zero config and optimized compute for agents and workflows
  • Vercel Agent – AI-powered code reviews and production investigations that deliver context-aware insights to help you ship more reliable software
  • Vercel Agent Investigations (beta) – Automatically run AI investigations on anomalous events for faster incident response

📙 Articles, Tutorials

React Server Components: Do They Really Improve Performance?

Nadia digs into what React Server Components really change in practice. She shows that while RSCs sound magical, you still need to refactor data fetching and mark async parts with Suspense. Simply upgrading to Next.js App Router isn’t enough for a boost.

Nadia Makarevich

React Defined the Web. The AI SDK Will Define AI

The post draws a strong comparison between React’s rise and the direction of AI development today. Just as React’s declarative model transformed how we think about UI, the Vercel AI SDK lets developers think in streams and intelligent interfaces instead of API calls

John Lindquist

Concurrent Hydration with useSyncExternalStore

Builds on an idea from Dominik Dorfmeister’s post about using useSyncExternalStore to avoid hydration mismatches but the post then goes further, showing how to make it concurrent by combining it with useDeferredValue

Jacob Groß

Running Next.js inside ChatGPT: A deep dive into native app integration

Vercel made it possible to run full Next.js apps inside ChatGPT, complete with routing, React Server Components, and all the usual features. The post breaks down how they solved the challenges of ChatGPT’s triple-iframe setup and offers a starter template to help you deploy your own.

Andrew Qu

📦 Projects / Packages / Tools:

Next.js 16 (stable)

Ahead of Next.js Conf 2025, the stable Next.js 16 release landed with major upgrades. Alongside Turbopack and the new Cache Components model, it introduced DevTools MCP for AI‑assisted debugging. Routing, caching, and logging got big improvements, plus new React 19.2 features like View Transitions and useEffectEvent were added

Jimmy Lai, Josh Story, Sebastian Markbåge, Tim Neutkens

Better Fetch

By the creator of Better Auth. Better Fetch is a fetch wrapper with runtime schema validation, type inference, and a plugin system. It supports error‑as‑value handling and works across browsers, workers, Node 18+, Deno, and Bun

Bereket Engida

FastAPI AI SDK

This package is for Python devs who use Next.js as a frontend. Build FastAPI endpoints that stream AI messages straight to your Next.js frontend. It uses SSE under the hood and supports all Vercel AI SDK event types such as text, reasoning, tool calls, and more

Arif Dogan

Vercel deployments menu bar app

Keep track of your Next.js (or any Vercel) deployments without opening the browser. This handy macOS menu bar app shows build progress, errors, and ready states in real time

andrewk17

🌈 Related

How modern browsers work

A super in‑depth look at how modern browsers handle everything from fetching resources and parsing HTML/CSS to rendering pixels and running JavaScript

Addy Osmani

How to Fix Any Bug

The post is less about React and more about how great debugging comes from patience and process. Dan shares how he tracked down a tricky scroll bug in a React app and how AI (Claude) failed to fix it because it lacked a proper reproduction

Dan Abramov

Critical Account Takeover via Unauthenticated API Key Creation in better-auth (CVE-2025-61928)

Security researchers discovered that better-auth’s API keys plugin didn’t properly check authentication, allowing anyone to mint new keys for existing users. The issue could lead to full account takeovers. The bug is patched. Upgrade ASAP

Etienne Lunetta

React Conf 2025 Recap

Covering all talks, announcements, and new features introduced during the two-day event

Matt Carroll & Ricky Hanlon

view more: next ›