#131

RSC Component Architecture, Next.js Dev MCP, Interactive Apps Guide, React Doctor, Bklit UI, Chat SDK Community Agent, Prefetch App Shells


Together with
Blazity

Component Architecture for React Server Components

Component Architecture for React Server Components

Traces the evolution from useEffect to React Query to route-level loaders to RSCs, using a social feed app as an example. The main takeaway: let each component fetch its own data on the server and use Suspense boundaries to design the loading experience instead of fetching all data at the top of a route and drilling it down through props

► I Tested Next.js Dev MCP (So You Don't Have To)

The video looks at Next.js DevTools MCP, a tool that helps AI editors understand your Next.js app better. It can read the latest docs, see routes and errors, and give more accurate help when building with newer Next.js features


⚡️ Sponsor: Blazity

Blazity

Next.js migration toolkit that eliminates guesswork and protects production and stability

Most Next.js migrations from Pages Router to App Router follow the same pattern: a developer reads the docs, starts converting files, breaks something in production, then spends weeks firefighting.

The real problem with migrations are the edge cases nobody warns you about, and the lack of systematic approach. We’ve done enough migrations to confidently say - we’ve been there and done that.

So we built Skills.md — an agent-oriented migration toolkit that gives AI coding agents (and developers) a structured, production-safe path from Pages Router to App Router.

Instead of guesswork and broken deploys you get a repeatable process built from real migration experience. It's open source and built for Skills.sh.

Make sure to stay up to date about new features, best articles and tools in the Next.js ecosystem by subscribing to the newsletter.

Once‑weekly email, best links, no fluff.

Join 7,000+ developers. 100% free.

📙 Articles / Tutorials / News

Docs: add Interactive Apps guide

A new draft PR to the Next.js docs walks you through building snappy, responsive UIs. It covers eight patterns including optimistic updates, streaming with Suspense, drag-and-drop, form handling, and caching for instant navigation

PR: Prefetch App Shells on the client

A new experimental feature that ensures every navigation in a Next.js app shows something instantly even if a per-link prefetch hasn't finished yet

The Flight Protocol Made Your DoS My Problem

This post looks at a React Flight bug that could let a single request slow down or freeze a Node server. It also shows how Server Components quietly turned the component tree into a network protocol, while most teams never updated their threat model to match

Migrating from Express to Next.js with AI agents

Shows how to turn a legacy Express app into a modern Next.js app using Google Antigravity and AI agents. Covers patterns, testing, and how agents fix their own mistakes


📦 Projects / Packages / Tools

React Doctor

React Doctor

React Doctor deterministically scans your codebase and finds issues across state & effects, performance, architecture, security, and accessibility.

sekisho

A library that uses React's error boundary mechanism to handle login redirects and access control in a clean, declarative way. Call needLogin() during render to trigger a redirect, or accessRestricted() to hide UI from unauthorized users. It's like <Suspense> but for auth

Bklit UI

A collection of Open Source charts and utility components that you can customize and extend

Chat SDK Community Agent

Open source AI-powered Slack community management bot with a built-in Next.js admin panel. Uses Chat SDK, AI SDK, and Vercel Workflow.


⚡️ Sponsor: Bluebag

Add Skills to your AI-SDK Agent in minutes

Add Skills to your AI-SDK Agent in minutes

Execute Skills in runtime VMs without building infrastructure. Run complex scripts, read Skills on-demand, install dependencies, mint download links, and build predictable, specialised agents in minutes.


🌈 Related

How's Linear so fast? A technical breakdown

A deep dive into the engineering and design decisions that make Linear feel almost instant

My Thoughts on AI: Agent Setup, Workflow, and Tools

Redux maintainer Mark Erikson shares a detailed look at how he actually uses AI for day-to-day development

React Testing Library Tutorial (with Jest & Vitest)

Robin Wieruch updated his guide to React Testing Library, covering how to test components the way users interact with them

Prisma Next Early Access: Write Your Contract, Prompt Your Agent, Ship Your App

Prisma Next is a new ORM that lets you define your database in one contract file, while it handles migrations, type-safe queries, and errors for you. It is also built to work closely with AI agents, so they can help you build apps faster. Early Access is open now for Postgres and MongoDB, but it is not ready for production yet


Have a link you want to share? Send me an email at erfan@nextjsweekly.com

All submissions are appreciated.

👋 See you next week!