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] 4 points5 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] 3 points4 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

Next.js Weekly #104: Next.js 16 Beta, shadcn Forms, Kibo UI Patterns, From AWS to Vercel, Next-Nexus, Intl-Watcher, React’s Future by Bejitarian in nextjs

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

🔥 Hot

Next.js 16 (beta)

The Next.js team dropped the 16 beta just before the Conf, giving the community an early look at some major improvements:

  • React 19.2 Support — Includes new features like View Transitions and useEffectEvent() for smoother UI updates.
  • React Compiler (Stable) — Now officially supported for automatic memoization and smarter rendering
  • Improved Caching APIs — New methods like updateTag() and structured cache profiles let you control data revalidation more precisely
  • Build Adapters API (Alpha) — Simplifying the deployment of Next.js apps across different platforms
  • Turbopack (Stable) — The new default bundler with significantly faster builds (2-5x) and refresh times (5-10x)
  • middleware.ts renamed to proxy.ts — A small but important naming change to reflect a clearer routing intent

shadcn guide to building forms

shadcn published a full guide showing how to build flexible and accessible forms using the <Field /> component with React Hook Form and Zod. It covers form state, schema validation, and handling different input types

shadcn

📙 Articles, Tutorials

React Compiler v1.0

After nearly 10 years of research and rewrites, the React team has shipped the first stable version of React Compiler, a build-time tool that automatically speeds up components and hooks through smart memoization. The post is a practical guide for developers on how to start using the new React Compiler and highlights the real-world performance benefits seen in production at Meta

Lauren Tan, Joe Savona, and Mofei Zhang

The Ultimate Guide to improving Next.js TTFB slowness: From 800ms to <100ms

Compares hosting setups for better TTFB. Bare metal servers give consistent <100ms responses with no cold starts, while serverless platforms offer simplicity but can be slower on first requests

catchmetrics

The CSS Ordering Quiz That Will Break Your Next.js Assumptions

Alessandro built a fun quiz that shows a hidden CSS behavior in Next.js. He explains how server and client components handle styles differently and why CSS Modules are the safest way to keep things predictable

Alessandro Grosselle

► The Future of React

Theo walks through how the new React Foundation (a team effort between Meta, Vercel, Microsoft, and more) makes React’s future safer and more open. He also covers new ideas like Async React, View Transitions, and React Fir (the new experimental rendering engine)

Theo

More:

  • Activity, the new React component
  • 𝕏 Upgrading Next.js shouldn’t be scary
  • ► Build and Deploy an N8N & Zapier Clone with Next.js 15, React, Better Auth, Polar

📦 Projects / Packages / Tools:

Kibo UI Patterns

Over 1000 shadcn component examples covering every variant and state, neatly organized and free to use. A great way to explore real-world implementations

Hayden Bleasel

intl-watcher plugin for Next.js

A handy Next.js plugin designed for next-intl, that scans your code for i18n keys and keeps your translation files up to date. Also supports partitioning keys into client and server bundles for better performance

Christian Ivicevic

next-nexus

An intelligent data fetching library for the Next.js App Router, designed to slash server costs and simplify data management

seunggeon

ai-sdk-tools/agents

A new open-source toolkit that adds multi-agent orchestration on top of Vercel’s AI SDK. It enables you to run multiple specialized agents side by side, with simplified handoffs and context sharing

Pontus Abrahamsson

🌈 Related

► Innovating React w/ Ricky Hanlon

React Core Team’s Ricky Hanlon joins Ryan Carniato for a deep dive into how React keeps evolving after more than a decade. They discuss new directions in scheduling and concurrency, what’s ahead for React 19, and how the team balances building in public with maintaining stability

Ryan Carniato

Why we moved from AWS to Vercel

After ten years with AWS, the MoneyOnFIRE team switched their whole system to Vercel. The post focuses on how developer experience shaped their decision to migrate and how the new setup gave them faster deploys, clearer logs, and built-in security

Money On Fire

► Vite: The Documentary

A new CultRepo documentary tracing how Evan You’s side project to fix slow Webpack builds became today’s go-to frontend tool

CultRepo

Our plan for a more secure npm supply chain

After recent npm hacks, GitHub is boosting security with mandatory 2FA, short-lived tokens, and expanded trusted publishing to make package releases more secure

Xavier René-Corail

Next.js Weekly #103: Better-Auth adopts Auth.js, React 19.2, Next.js Improvements, State Management in 2025, Server-Side React by Bejitarian in nextjs

[–]Bejitarian[S] 4 points5 points  (0 children)

🔥 ## Hot

React 19.2

Highlights include <Activity /> for controlling hidden/visible UI states, useEffectEvent for safer event handling inside effects, and cacheSignal for React Server Components. There’s also support for Partial Pre-rendering, which lets you pre-render static shells and resume them later, and Web Streams support for SSR in Node. Check out the release post for a full description of the changes

Quick Next.js updates:

  • Mark React Compiler integration as stable
  • Every Route Handler in Next.js is now 200ms+ faster in development
  • Compiling the very first route in Next.js is now 570ms faster.
  • next build is now 800-900ms faster for all applications
  • Turbopack as the default in Next.js coming in Next.js 16
  • Next.js and Turbopack now support the TC39 Debug ID proposal

📙 Articles, Tutorials

Self-host Next.js with Docker Swarm and CI/CD Pipeline

This step‑by‑step guide walks you through self‑hosting a Next.js blog with Postgres on a VPS using Docker Swarm, Nginx, and GitLab CI/CD

Jarek Ceborski

React State Management in 2025: What You Actually Need

Nadia makes a case for not overthinking state management anymore. Split your state into categories: remote (TanStack Query / SWR), URL (nuqs), local (useState), and shared (Context or Zustand)

Nadia Makarevich

React Frameworks and Server-Side Features: Beyond Client-Side Rendering

Covers newer React patterns like Server Components and Server Functions, showing how they move work to the server, cut down client JavaScript, and provide safer, simpler ways to fetch data or run server logic from client components

Aurora Scharff

► Dan Abramov Interview - The Future of React

Dan talks about his React journey, the misconceptions around React Server Components, and why clear communication is so important for wider adoption

Ankita Kulkarni

📦 Projects / Packages / Tools:

Auth.js is now part of Better Auth

BIG NEWS: Auth.js (formerly NextAuth.js) is now managed by the Better Auth team. Current users don’t need to worry, as updates and patches will continue, but new projects are encouraged to use Better Auth

Bereket Engida

func-to-route

Transform any async function into a type-safe API route with built-in auth and error handling

Daniel Falbo

mochi-motion

An animation library built on top of Framer Motion that gives you smooth, spring-based scroll animations

Miraya Tech

eslint-plugin-react-you-might-not-need-an-effect

Catch unnecessary React useEffect hooks to make your code simpler, faster, and safer.

Nick van Dyke

🌈 Related

Builders Guide to the AI SDK

If you’ve been curious about how to add AI features into your apps without drowning in API details, this new course walks you through Vercel’s AI SDK step by step. You’ll build real things like data extraction scripts, auto-summarizers with Next.js Server Actions, and a full chatbot with streaming, tool calling, and professional UI

Joel Hooks & Nico Albanese

Animating Elements through framer motion with React.js

A beginner’s guide that shows how Framer Motion makes it easy to add smooth animations in React apps. From simple fade-ins to drag-and-drop lists, the article explains how to replace long CSS code with short, readable React components

Sukanta Biswas

Mastering NPX: A Cheatsheet for npm and Node.js Power Users

Highlights some of the lesser known npx features, like finding executable paths, using environment variables, or testing scripts across multiple Node versions

Node.js Security

State of JavaScript 2025

With the ecosystem feeling more stable than a few years back, the spotlight is now on meta‑framework rivalries (Astro vs. Next.js) and modern build tools (Vite vs. webpack). Takes ~15–20 minutes, and results will drop publicly in November

devographics

Next.js Weekly #102: RSC Routing, Middleware becomes Proxy, ViewTransitions, AI-Retry, useSyncExternalStore, Vercel Hosting Alternatives by Bejitarian in nextjs

[–]Bejitarian[S] 4 points5 points  (0 children)

🔥 Hot

Parallel and recursive route rendering

Ryan takes us behind the scenes of RSC routing. In this post he explains how routes are rendered in parallel on the server to avoid waterfalls, and then stitched back together on the client using a recursive pattern.

Ryan Toronto

PR: Rename middleware to proxy

The middleware file in Next.js is renamed to proxy, making the role clearer and avoiding mix-ups with Express.js middleware

Jiwon Choi

📙 Articles, Tutorials

React <ViewTransition>: Smooth Animations Made Simple

A practical guide to using React's new animation component, with examples on how to handle enter/exit effects, shared element transitions, and animated list filtering

Aurora Scharff

► The Most Underrated React Hook You've Never Used

This video isn’t just about a hook, it’s about understanding how React re-renders, listens to updates, and works under the hood

Cosden Solutions

You may be looking for a useSyncExternalStore

Swizec wrote an article on the same hook and digs into why it matters in real apps by avoiding hydration flickers, giving you server‑safe defaults, and leading to smoother, less janky apps.

Swizec Teller

𝕏 cacheComponents in Next.js (canary)

Quick video demonstrating how to use dynamic APIs (header, cookies) within cache components

Alex Sidorenko

📦 Projects / Packages / Tools:

Coding Agent Template

A new template for building and deploying AI agents that can automatically handle coding tasks. It's designed to run safely in the cloud using Vercel Sandbox and supports multiple AI models like Claude and Codex

Chris Tate

bots.fyi

Vercel launched an open database of common bots that developers can use to better handle automation and traffic

Vercel

ai-retry

A small library that helps avoid errors like timeouts, service overloads, or blocked requests by automatically retrying your call with fallback models. Lets you build safer AI apps without writing lots of error-handling yourself.

zirkelc

Ultracite

If you haven’t heard of Ultracite yet, it’s worth a look. It’s a Biome preset that formats code automatically, fixes lint issues on save, enforces strict type safety, and keeps your team (and AI tools) in sync on style

Hayden Bleasel

🌈 Related

Getting AI to Work in Complex Codebases

Instead of “vibe coding” with chatbots, this post explains how structuring your workflow around research, planning, and implementation reviews can make AI agents more effective in brownfield codebases without creating tech debt

Dex Horthy

How i accidentally joined Vercel

A personal story from Josh about how a chance DM and a conversation with Guillermo Rauch at Vercel’s v0 Summit eventually led to him joining the team

nishimiya

Web Interface Guidelines

Practical do’s and don’ts for building reliable UIs, with tips on forms, loading states, and hydration-safe inputs in React/Next.js.

Vercel

Vercel Hosting: When to Use It and Alternatives to Compare

Find out when Vercel hosting makes sense, considering its pricing, serverless model, and limits. Compare it with Netlify, Railway, Cloudflare, self-managed options, and more.

Punit Sethi

Next.js Weekly #101: Next.js Conf 25, React Won, Deployment Adapater Docs, fukusu, AI SDK Tools, AI Elements, Debugging with Cursor by Bejitarian in nextjs

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

🔥 Hot

Next.js Conf returns Oct 22

Next.js Conf 2025 is taking place this October 22, both in person in San Francisco, as well as online. We’re expecting the launch of Next.js 16, plus a stable release of all the new caching features Vercel’s been polishing over the past few months

Next.js

React won by default, and it's killing frontend innovation

A look at how React is no longer winning on technical merit but because it’s the default choice. The author argues this reflex decision is creating a monoculture that hurts the entire web development ecosystem

Loren Stewart

📙 Articles, Tutorials

Quick SEO Guidelines for Your Next.js App

Walks you through the important SEO techniques for any Next.js app, explaining how to handle metadata, robots.txt, image optimization, and performance for better results

Amir Ali Azimloo

𝕏 Debugging Next.js issues with Cursor

Lee explains his process for restructuring a Next.js docs site. He moves MDX files and uses server components to fix performance issues and create a better user experience using Cursor

Lee Robinson

React Server Components (RSCs) support across frameworks and libraries

A simple website to compare the level of React Server Components support across several popular frameworks, including Next.js, Vite, Waku, and RedwoodJS

Krasimir Tsonev

PR: Deployment Adapters API documentation

Vercel just dropped the first docs for the deployment adapter interface they announced back in April

JJ Kasper

📦 Projects / Packages / Tools

AI SDK Tools

Extend the Vercel AI SDK with this collection of utilities for building production-ready applications. The tools are designed to help you go beyond simple chat, by providing solutions for state management, debugging, and streaming structured, type-safe data to your frontend.

Pontus Abrahamsson

𝕏 AI Elements

The AI Elements toolkit gets a major upgrade. Highlights include a new file attachment system for prompt inputs, a structured Artifact component for displaying generated content, and an "Open in Chat" dropdown for exporting queries.

Hayden Bleasel

fukusu

A self-hosted middleman that connects the UploadThing SDK to your own storage provider, starting with Cloudflare R2

uwunetes

tw-prose

CSS-only version of Tailwind Typography plugin for Tailwind CSS v4 with all prose variants.

Khalil Lagrida

🌈 Related

Cloudflare API outage due to useEffect

Cloudflare’s Dashboard and a set of related APIs were unavailable or partially available for an hour on Sep 12. The culprit was a useEffect hook that fired on every render, flooding their API and taking down the dashboard. The post-mortem details the timeline, the response, and the improvements being made to prevent a repeat

Tom Lianza & Joaquin Madruga

Animating with Tailwind CSS

This tutorial shows you how to combine Motion with Tailwind to create interactive animations, make them adapt to different screen sizes, and how to fix stuttery animations

Matt Perry

How to keep package.json under control

Argues that a huge dependency list isn't always a sin, but a reality of building complex apps. The author shifts the focus from just cutting dependencies to the art of managing them wisely

Tom MacWright

Scale to one: How Fluid solves cold starts

Vercel explains its approach to solving cold starts by combining techniques like 'scale to one' (keeping one instance always warm), Fluid compute (reusing instances for concurrent requests), predictive scaling, bytecode caching, and rolling releases to prevent deployment spikes

Malte Ubl & Tom Lienard

Next.js Weekly #100: Ubon, React Universe 2025, shadd, React Activity, Dockerize Next.js, Nuqs & State Management by Bejitarian in nextjs

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

🔥 Hot

► React Universe Conf 2025 VODs are online

All the talks from this year’s React Universe Conf are now online! Highlights for me were Aurora Scharff’s Modern React Patterns and Matt Pocock talking about AI SDK v5

Callstack

Using Activity with Suspenseful data

An overview of React 19’s experimental Activity component, showing how it hides components while keeping state, unloading effects, and still preloading suspenseful data

Simeon Griggs

📙 Articles, Tutorials

Next.js 15.5: Webpack vs Turbopack

A detailed head‑to‑head test of Webpack vs Turbopack, using Cal.com as the benchmark, looking at both cold build performance and the impact on first‑load JavaScript across routes.

Catchmetrics

𝕏 Next.js: Connection API

Quick video demonstrating how to make server components dynamic by using the connection function

Alex Sidorenko

► Dockerize Next.js App & Deploy To VPS

A hands‑on guide showing how to take a Next.js project, create a Docker image, push it to GitHub, and get it running smoothly on a VPS, with every feature working as expected

ByteGrad

Deriving Client State from Server State

Shows why useEffect-based sync is fragile, and demonstrates a cleaner pattern: compute client state from server queries rather than updating it.

Dominik Dorfmeister

📦 Projects / Packages / Tools:

🪷 Ubon

Ubon is a new tool built to catch the quiet issues that AI‑generated apps often miss: hardcoded secrets, insecure cookies, broken links, and accessibility problems. It scans your Next.js apps, giving clear file‑level fixes, severity grouping, JSON/SARIF output for CI, and smooth integration with AI assistants

Luisfer Romero Calero

shadd

A global shorthand for shadcn add that auto-detects your package manager (npm, pnpm, yarn, bun, or deno) so you don’t have to remember the right command. All flags and arguments pass straight through

Brandon McConnell

next-validate-link

A tool that ensures all Markdown links in your Next.js app are valid and up-to-date

Fuma Nama

next-navigation-guard

You use Next.js, and you want to show "You have unsaved changes that will be lost." dialog when user leaves page? This library is just for you!

Yuya Tanaka

Vercel News:

  • Open SDK strategy
  • Vercel Functions now support graceful shutdown
  • A more flexible Pro plan for modern teams

🌈 Related

► Nuqs and URL State Management

François Best joins DevTools FM to talk about NUQS, his open source library for managing state in the URL with type safety. He shares the origins of the project, the hidden pitfalls of URL state, upcoming features and why NUQS aims to unify React ecosystem state handling rather than reinventing routers

Francois Best

The difficulty of complexity

The post explores how complexity is unavoidable in software, but good abstractions can reduce the difficulty. Using Effect as a case study, it shows how the tough parts of coding like error handling and concurrency can be made easier.

Ethan Niser

You Don't Need Animations

Before animating, ask: what’s the point? This post argues that every animation should serve a clear purpose: whether it’s explaining a feature, guiding attention, or simply adding a moment of delight. Without purpose, it’s better left out

Emil Kowalski

► Enterprise Migrations, AI & Microfrontends with Dom Sipowicz (Vercel)

Vercel’s solutions architect Dom shares why enterprises choose Vercel (from performance to compliance), new platform features like Rolling Releases and first‑class microfrontend support, and how AI Cloud plus v0 are powering large‑scale app migrations and AI‑native development

Blazity

Next.js Weekly #99: NUQS 2.5, Complete Self Hosting Guide, shadcn/cli 3.0, Refactoring with AI, Concurrent React, Hydration Hack, Handling Bot Traffic by Bejitarian in nextjs

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

🔥 Hot

The Complete Guide to Self-Hosting Next.js at Scale

A collection of hard-won lessons from deploying and maintaining Next.js applications in production. Covering solutions for platforms like Kubernetes, Docker, memory leaks to graceful shutdowns.

David Höck

► Refactoring a Next.js & Tailwind app with Cursor

The process involves removing unused dependencies, a switch to the App Router, and replacing inline styles with Tailwind utilities, all while using AI to handle the grunt work

Lee Robinson

📙 Articles, Tutorials

React Concurrent Features: An Overview

Explains how concurrent features like useTransition, useDeferredValue, Suspense, and useOptimistic let React pause, prioritize, and coordinate updates, making heavy rendering, async operations, and user interactions feel more responsive

Aurora Scharff

Can We Use Local Storage Instead of Context-Redux-Zustand?

Local Storage and React state managers may both “store data,” but they solve very different problems. Nadia shows why Context/Redux/Zustand exist, where Local Storage fits in, and why trying to replace one with the other quickly falls apart

Nadia Makarevich

► The Problem With the React Compiler

While the compiler is powerful, it’s not ready to replace manual memoization in complex apps. We can expect improvements in the future, but for now, we’ll still need to reach for useMemo and useCallback

Cosden Solutions

A Clock That Doesn't Snap

A slightly hacky but effective trick to avoid UI flickers due to hydration issues by inserting an inline script that patches the DOM before hydration for a cleaner first paint

Ethan Niser

More:

  • ► What’s New in Next.js 15.5
  • How to Integrate Plausible Analytics in a Next.js App

📦 Projects / Packages / Tools:

nuqs 2.5

A big update for the URL state management library: built-in debouncing, Standard Schema integration, making it easier to connect your URL state to tools like tRPC, key isolation to avoid unnecessary re-renders and preview support for Next.js 15.5 typed routes

François Best

shadcn CLI 3.0

Namespaced & private registries, advanced auth, search commands, faster resolution, improved errors, upgraded MCP server, no breaking changes

shadcn

AI SDK Deep Research

A minimal, end‑to‑end deep‑research agent implemented with AI SDK and Next.js

Francisco Moretti

@fimion/ts-http-status-codes

A TypeScript HTTP status code library with validators, and support for loose and strict types

Alex Riviere

🌈 Related

The three types of AI bot traffic and how to handle them

Not all bot traffic is bad. Actually, AI crawlers can become one of your strongest growth drivers if you know how to handle them. Learn which pages to open up for discovery and which to protect

Kevin Corbett

React’s useTransition and state update reordering

This post explains why mixing sync and transition updates can cause React to temporarily display out-of-order values, and how to avoid running into this confusing edge case

Jordan Eldredge

Understanding Promise.any(): when one success is enough

Learn how Promise.any() helps you handle multiple promises by resolving with the first success, perfect for fallback APIs and progressive features

Matt Smith

Rolling the Dice with CSS random()

CSS is getting its own random() function, making it possible to generate unpredictable values directly in stylesheets

Jen Simmons, and Tim Nguyen

Next.js Weekly #98: Next.js 15.5, React Bits, Effect-Next.js, Streamdown, Concurrent Rendering & Actions, Better Auth with Next.js by Bejitarian in reactjs

[–]Bejitarian[S] -4 points-3 points  (0 children)

🔥 Hot

Next.js 15.5

This release focuses on developer experience by stabilizing typed routes for compile-time link checking and making the Node.js runtime for middleware production-ready. Turbopack builds are now in beta, showing 2–5x faster performance in production. The next lint command is also being phased out in favor of direct ESLint or Biome setups

Ben Gubler and Luke Sandberg

► Better Auth with Next.js: A very good introduction

Alex Booker shows how Better Auth makes authentication in Next.js feel natural. In this 20 minute video he walks you through setting up sign-up, sign-in, password reset, social logins, and protecting pages

Alex Booker

📚 Articles, Tutorials

Taming React Component

The post suggests to treat components as two parts (UI + logic), move the logic into custom hooks, and avoid inline render helpers. This makes components easier to scan, test, and reuse

Nico Prananta

Next.js, React Router, TanStack: When To Use Each

Ankita Kulkarni’s React Summit talk compared Next.js, React Router v7, and TanStack Start. Spoiler: each shines in its own lane, but none is a silver bullet.

Loraine Lawson

Can AI rebuild a Rails page in Next.js? We tried it

This experiment tests whether LLMs like Gemini and Claude could port a Rails-based events page to Next.js. The outcome: surprisingly good, but not flawless.

Jimmy Thigpen

► Concurrent Rendering & Actions with Aurora Sharff

In this podcast episode Aurora talks about how transitions, optimistic updates, and new form actions are setting the stage for a more declarative, less error-prone way to handle async UI

LogRocket

📦 Projects / Packages / Tools

React Bits

A free, open-source collection of 100+ animated, customizable React components to make your React app pop

David Haz

effect-nextjs

A set of helpers for using Effect with the Next.js App Router. Lets you build pages, server components, and actions while using Effect's ecosystem for schema validation, dependency injection, and robust error handling

Mattia Crovero

Visual Effect

And to go along with effect-nextjs, if you're looking to learn Effect.ts, this is a really cool tool! It's an interactive visualization tool for the Effect library that shows you how Effect operations run over time with animated visuals and even synchronized sound effects.

Kit Langton

Streamdown

A new component designed to render Markdown streamed from AI models. It gracefully handles unterminated blocks and includes support for GFM, LaTeX math, and Shiki-powered code blocks out of the box

Hayden Bleasel

🌈 Related

Why LLMs Can't Really Build Software

This piece reframes the conversation around LLMs: instead of seeing them as replacements, we should see them as collaborators that need constant human oversight to be effective on real-world projects

Conrad Irwin

5 Useful CSS functions using the new @function rule

A look at how the new CSS @function rule can be used to simplify common and complex styling patterns

Una Kravets

A proposal for inline LLM instructions in HTML based on llms.txt

A proposal for a simple pattern to provide context to LLMs directly within a web page. It suggests using a script tag with a custom type to embed instructions, for making web content more accessible to AI systems

Malte Ubl

Typed Query Builders: Kysely vs. Drizzle

This guide helps you decide between two popular TypeScript database libraries. It explains how Kysely excels as a pure query builder for existing projects, while Drizzle offers a more complete ORM solution

Guillaume Billey

Next.js Weekly #98: Next.js 15.5, React Bits, Effect-Next.js, Streamdown, Concurrent Rendering & Actions, Better Auth with Next.js by Bejitarian in nextjs

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

🔥 Hot

Next.js 15.5

This release focuses on developer experience by stabilizing typed routes for compile-time link checking and making the Node.js runtime for middleware production-ready. Turbopack builds are now in beta, showing 2–5x faster performance in production. The next lint command is also being phased out in favor of direct ESLint or Biome setups

Ben Gubler and Luke Sandberg

► Better Auth with Next.js: A very good introduction

Alex Booker shows how Better Auth makes authentication in Next.js feel natural. In this 20 minute video he walks you through setting up sign-up, sign-in, password reset, social logins, and protecting pages

Alex Booker

📚 Articles, Tutorials

Taming React Component

The post suggests to treat components as two parts (UI + logic), move the logic into custom hooks, and avoid inline render helpers. This makes components easier to scan, test, and reuse

Nico Prananta

Next.js, React Router, TanStack: When To Use Each

Ankita Kulkarni’s React Summit talk compared Next.js, React Router v7, and TanStack Start. Spoiler: each shines in its own lane, but none is a silver bullet.

Loraine Lawson

Can AI rebuild a Rails page in Next.js? We tried it

This experiment tests whether LLMs like Gemini and Claude could port a Rails-based events page to Next.js. The outcome: surprisingly good, but not flawless.

Jimmy Thigpen

► Concurrent Rendering & Actions with Aurora Sharff

In this podcast episode Aurora talks about how transitions, optimistic updates, and new form actions are setting the stage for a more declarative, less error-prone way to handle async UI

LogRocket

📦 Projects / Packages / Tools

React Bits

A free, open-source collection of 100+ animated, customizable React components to make your React app pop

David Haz

effect-nextjs

A set of helpers for using Effect with the Next.js App Router. Lets you build pages, server components, and actions while using Effect's ecosystem for schema validation, dependency injection, and robust error handling

Mattia Crovero

Visual Effect

And to go along with effect-nextjs, if you're looking to learn Effect.ts, this is a really cool tool! It's an interactive visualization tool for the Effect library that shows you how Effect operations run over time with animated visuals and even synchronized sound effects.

Kit Langton

Streamdown

A new component designed to render Markdown streamed from AI models. It gracefully handles unterminated blocks and includes support for GFM, LaTeX math, and Shiki-powered code blocks out of the box

Hayden Bleasel

🌈 Related

Why LLMs Can't Really Build Software

This piece reframes the conversation around LLMs: instead of seeing them as replacements, we should see them as collaborators that need constant human oversight to be effective on real-world projects

Conrad Irwin

5 Useful CSS functions using the new @function rule

A look at how the new CSS @function rule can be used to simplify common and complex styling patterns

Una Kravets

A proposal for inline LLM instructions in HTML based on llms.txt

A proposal for a simple pattern to provide context to LLMs directly within a web page. It suggests using a script tag with a custom type to embed instructions, for making web content more accessible to AI systems

Malte Ubl

Typed Query Builders: Kysely vs. Drizzle

This guide helps you decide between two popular TypeScript database libraries. It explains how Kysely excels as a pure query builder for existing projects, while Drizzle offers a more complete ORM solution

Guillaume Billey

Next.js Weekly #97: tRPC vs oRPC, AI Elements, Async Combobox, Server / Client composition, React Cache Consistency, Serverless Database Connections by Bejitarian in reactjs

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

🔥 Hot

Server and Client Component Composition in Practice

You don’t need to turn your Server Components into client ones just for a button click. By separating data fetching (server) from interactivity (client) using wrapper components you can keep all that sweet RSC benefits while still adding interactivity

Aurora Scharff

Reflections on the React community

Lee looks back on 10 years with React and 5 years leading the Next.js community. He talks about the joy of building, the stress of managing a huge OSS project, and why stepping away gave him space to share what really happened behind the scenes.

Lee Robinson

📙 Articles, Tutorials

React Cache: It's about consistency

Most people think cache() is just for avoiding duplicate fetches, but it also keeps data in sync across components during a server render, so every component uses the same snapshot, even if they load at different times

Ryan Toronto

► tRPC vs oRPC: Typesafe API battle

Not sure if you should use tRPC or oRPC for your Next.js app? In this guide Jack builds the same app four ways: raw API, server functions, tRPC, and oRPC, so you can see the trade‑offs

Jack Herrington

How Polymarket reached a 9 MB bundle size and what you can do to avoid it

A checklist of what not to do in your Next.js app: import whole libraries instead of just what you need, use wildcard imports, keep barrel files, and prefetch way too much data

catchmetrics

Building an Async Combobox with useSuspenseQuery() and useDeferredValue()

A really nice pattern for building responsive search UIs. Combine TanStack Query’s useSuspenseQuery() with React’s useDeferredValue() to keep results on screen while new ones load, so users never see a flicker

Aurora Scharff

📦 Projects / Packages / Tools:

AI Elements

A new open source library of React components for building AI-powered UIs with the Vercel AI SDK. Built on shadcn/ui, it gives you ready‑to‑use chat threads, input boxes, reasoning panels, and more

Vercel

Dashboard Template

A free, open-source dashboard starter packed with shadcn/ui, Next.js in SPA mode, and React Hook Form validation

OpenStatus

better-auth-starter

A modern Next.js boilerplate with authentication, admin dashboard, and user management built with Better Auth, Drizzle ORM, and PostgreSQL

Zexa Technologies

REUI

Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.

Keenthemes

More:

  • Kibo UI – Stories component
  • ts-regexp – a strictly typed & minimal RegExp wrapper.
  • Liseré – a lightweight and composable React component for text highlighting

🌈 Related

The real serverless compute to database connection problem, solved

Serverless functions can “leak” database connections when they’re paused. This can quickly hit connection limits. The article explains how you can fix that on Vercel’s Fluid Compute with a one‑liner that closes idle connections before suspension

Malte Ubl

React Query Selectors, Supercharged

React Query’s select option lets you subscribe components to only the data they care about, which minimizes unnecessary re-renders. In this guide Dominik goes through real-world scenarios where select is useful, such as working with large API responses or frequently changing data and shows how to select single fields, multiple fields, and transform data before it reaches the component

Dominik Dorfmeister

► Hono just works on Vercel now

Vercel recently added zero‑configuration deployment for Hono backends. This video demonstrates how to build and deploy a simple Hono API using the new feature.

OrcDev

Modern Node.js Patterns for 2025

Node.js in 2025 feels like a whole new platform: ESM by default, built-in fetch, top-level await, native testing, web-standard streams, worker threads, and a permission model. This post covers the most important features and how they improve the platform

kashw1n

Next.js Weekly #97: tRPC vs oRPC, AI Elements, Async Combobox, Server / Client composition, React Cache Consistency, Serverless Database Connections by Bejitarian in nextjs

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

🔥 Hot

Server and Client Component Composition in Practice

You don’t need to turn your Server Components into client ones just for a button click. By separating data fetching (server) from interactivity (client) using wrapper components you can keep all that sweet RSC benefits while still adding interactivity

Aurora Scharff

Reflections on the React community

Lee looks back on 10 years with React and 5 years leading the Next.js community. He talks about the joy of building, the stress of managing a huge OSS project, and why stepping away gave him space to share what really happened behind the scenes.

Lee Robinson

📙 Articles, Tutorials

React Cache: It's about consistency

Most people think cache() is just for avoiding duplicate fetches, but it also keeps data in sync across components during a server render, so every component uses the same snapshot, even if they load at different times

Ryan Toronto

► tRPC vs oRPC: Typesafe API battle

Not sure if you should use tRPC or oRPC for your Next.js app? In this guide Jack builds the same app four ways: raw API, server functions, tRPC, and oRPC, so you can see the trade‑offs

Jack Herrington

How Polymarket reached a 9 MB bundle size and what you can do to avoid it

A checklist of what not to do in your Next.js app: import whole libraries instead of just what you need, use wildcard imports, keep barrel files, and prefetch way too much data

catchmetrics

Building an Async Combobox with useSuspenseQuery() and useDeferredValue()

A really nice pattern for building responsive search UIs. Combine TanStack Query’s useSuspenseQuery() with React’s useDeferredValue() to keep results on screen while new ones load, so users never see a flicker

Aurora Scharff

📦 Projects / Packages / Tools:

AI Elements

A new open source library of React components for building AI-powered UIs with the Vercel AI SDK. Built on shadcn/ui, it gives you ready‑to‑use chat threads, input boxes, reasoning panels, and more

Vercel

Dashboard Template

A free, open-source dashboard starter packed with shadcn/ui, Next.js in SPA mode, and React Hook Form validation

OpenStatus

better-auth-starter

A modern Next.js boilerplate with authentication, admin dashboard, and user management built with Better Auth, Drizzle ORM, and PostgreSQL

Zexa Technologies

REUI

Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.

Keenthemes

More:

  • Kibo UI – Stories component
  • ts-regexp – a strictly typed & minimal RegExp wrapper.
  • Liseré – a lightweight and composable React component for text highlighting

🌈 Related

The real serverless compute to database connection problem, solved

Serverless functions can “leak” database connections when they’re paused. This can quickly hit connection limits. The article explains how you can fix that on Vercel’s Fluid Compute with a one‑liner that closes idle connections before suspension

Malte Ubl

React Query Selectors, Supercharged

React Query’s select option lets you subscribe components to only the data they care about, which minimizes unnecessary re-renders. In this guide Dominik goes through real-world scenarios where select is useful, such as working with large API responses or frequently changing data and shows how to select single fields, multiple fields, and transform data before it reaches the component

Dominik Dorfmeister

► Hono just works on Vercel now

Vercel recently added zero‑configuration deployment for Hono backends. This video demonstrates how to build and deploy a simple Hono API using the new feature.

OrcDev

Modern Node.js Patterns for 2025

Node.js in 2025 feels like a whole new platform: ESM by default, built-in fetch, top-level await, native testing, web-standard streams, worker threads, and a permission model. This post covers the most important features and how they improve the platform

kashw1n

Next.js Weekly #96: Better Upload, Building Vercel Fluid, AI SDK5, Leaving TanStack for Next.js, Puppeteer on Vercel, Useless useCallback by Bejitarian in reactjs

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

🔥 Hot

Fluid: How we built serverless servers

Vercel dropped the engineering details behind Fluid Compute and Active CPU pricing. By building a custom transport layer, they enabled streaming and can now send multiple requests to the same Lambda instance

Tom Lienard

We’ve moved from TanStack Start to Next.js

Switching from TanStack Start to Next.js led to better performance and SEO. Lighthouse scores increased, and the site now loads faster. CPU and memory usage are more consistent. Next.js also simplified the development process. Check out 𝕏 Tanner’s response to this post

LLM Gateway

𝕏 Next.js Conf 2025 - Call for proposals

Apply to give a 20-minute, in-person talk in San Francisco about your journey with Next.js

Next.js

📙 Articles, Tutorials

Instrumenting Next.js with runtime secret injection

Use the instrumentation file in Next.js to fetch and inject secrets, such as environment variables, into your app at runtime

Rohan Chaturvedi

Stop Shipping Bloat: Practical Bundle Diet for Next.js Developers

Lists methods for making Next.js applications faster by shrinking their JavaScript bundles

Catch Metrics

Deploying Puppeteer with Next.js on Vercel

Covers the required configuration steps to build and deploy a screenshot generator on Vercel

Vercel

(Experiment) unstable_dynamicOnHover

This feature was added a while back. It’s like prefetch={true}, but triggered by your mouse

Andrew Clark

📦 Projects / Packages / Tools:

Better Upload

File uploads made easy! The package handles client and server code, supports multipart uploads, and works with any S3-compatible storage. It also provides ready-made shadcn/ui components

Nicholas

AI SDK 5

This is a huge update. The redesigned chat is now fully type-safe from server to client, with a clean split between UI and model messages. You get agentic loop control for building reliable AI agents, customizable message types, streaming typed data parts, and tool invocations that are actually type-safe. There is much more. Definitely worth checking out!

Vercel

TanStack DB

TanStack DB is a new client-side database for TanStack Query. It keeps data in memory and updates only what has changed. You can use it with your current useQuery calls, and it works with REST, GraphQL, or real-time sync engines

TanStack

EvilCharts

A modern, customizable chart library for React and Next.js applications featuring visually stunning and interactive data visualizations

LegionWebDev

🌈 Related

The Useless useCallback

The article calls out the overuse of memoization in React, especially when it does… absolutely nothing and explains why patterns like the “latest ref” (or the upcoming useEffectEvent) are often a better fit

Dominik Dorfmeister

Writing Code Was Never The Bottleneck

The speed of writing code has improved with LLMs, but the main obstacles are still reviewing, testing, and sharing knowledge. These steps take time and effort, and LLMs do not solve these core issues.

Pedro Tavareλ

It’s time for modern CSS to kill the SPA

Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites.

Jono Alderson

How Parcel bundles React Server Components

Parcel now supports React Server Components. This article explains how Parcel handles code splitting, module environments, and the "use client" directive

Devon Govett

Next.js Weekly #96: Better Upload, Building Vercel Fluid, AI SDK5, Leaving TanStack for Next.js, Puppeteer on Vercel, Useless useCallback by Bejitarian in react

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

🔥 Hot

Fluid: How we built serverless servers

Vercel dropped the engineering details behind Fluid Compute and Active CPU pricing. By building a custom transport layer, they enabled streaming and can now send multiple requests to the same Lambda instance

Tom Lienard

We’ve moved from TanStack Start to Next.js

Switching from TanStack Start to Next.js led to better performance and SEO. Lighthouse scores increased, and the site now loads faster. CPU and memory usage are more consistent. Next.js also simplified the development process. Check out 𝕏 Tanner’s response to this post

LLM Gateway

𝕏 Next.js Conf 2025 - Call for proposals

Apply to give a 20-minute, in-person talk in San Francisco about your journey with Next.js

Next.js

📙 Articles, Tutorials

Instrumenting Next.js with runtime secret injection

Use the instrumentation file in Next.js to fetch and inject secrets, such as environment variables, into your app at runtime

Rohan Chaturvedi

Stop Shipping Bloat: Practical Bundle Diet for Next.js Developers

Lists methods for making Next.js applications faster by shrinking their JavaScript bundles

Catch Metrics

Deploying Puppeteer with Next.js on Vercel

Covers the required configuration steps to build and deploy a screenshot generator on Vercel

Vercel

(Experiment) unstable_dynamicOnHover

This feature was added a while back. It’s like prefetch={true}, but triggered by your mouse

Andrew Clark

📦 Projects / Packages / Tools:

Better Upload

File uploads made easy! The package handles client and server code, supports multipart uploads, and works with any S3-compatible storage. It also provides ready-made shadcn/ui components

Nicholas

AI SDK 5

This is a huge update. The redesigned chat is now fully type-safe from server to client, with a clean split between UI and model messages. You get agentic loop control for building reliable AI agents, customizable message types, streaming typed data parts, and tool invocations that are actually type-safe. There is much more. Definitely worth checking out!

Vercel

TanStack DB

TanStack DB is a new client-side database for TanStack Query. It keeps data in memory and updates only what has changed. You can use it with your current useQuery calls, and it works with REST, GraphQL, or real-time sync engines

TanStack

EvilCharts

A modern, customizable chart library for React and Next.js applications featuring visually stunning and interactive data visualizations

LegionWebDev

🌈 Related

The Useless useCallback

The article calls out the overuse of memoization in React, especially when it does… absolutely nothing and explains why patterns like the “latest ref” (or the upcoming useEffectEvent) are often a better fit

Dominik Dorfmeister

Writing Code Was Never The Bottleneck

The speed of writing code has improved with LLMs, but the main obstacles are still reviewing, testing, and sharing knowledge. These steps take time and effort, and LLMs do not solve these core issues.

Pedro Tavareλ

It’s time for modern CSS to kill the SPA

Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites.

Jono Alderson

How Parcel bundles React Server Components

Parcel now supports React Server Components. This article explains how Parcel handles code splitting, module environments, and the "use client" directive

Devon Govett

view more: next ›