Next.js Weekly #43: Next.js Cache Toolbar, “use client” misconceptions, Testing API Routes, Upstash Queue

Issue #43 // March 8, 2024 // Open web version

Together with

Why React Server Components Are Breaking Builds to Win Tomorrow – Understand the journey of React’s rendering evolution over the years and learn why React Server Components are the natural next step in building modern apps

// VISHWAS GOPINATH

𝕏 "use client" misconceptions – Confused about when to use "use client"? This amazing visualization explains what the “use client” directive is actually doing

// DELBA OLIVEIRA

⚡️ SPONSOR

Calling all devs! Sentry Launch Week is coming March 18-22

Tune in to get announcements of new products, new features, and a whole bunch of other cool things. Get a sneak peek (and win free swag) if you sign up for their launch week reminder list today. Get excited 😱.

sentry.io

📙 Tutorials, Articles & Opinion

Password protecting routes in Next.js App Router – Explains how to add simple password protection to routes in Next.js using App Router and NextAuth

// ALEX CHAN

Testing Next.js app router API routes – A guide to testing Next.js API routes and mocking NextAuth to properly test authenticated routes

// DAVID MYTTON

Conceptual Model of React and RSC – Interesting post about what “UI = f(state)” means and why it matters

// ONDREJ VELISEK

Learn Next.js by building a real-life project: Part 1 – An easy to follow tutorial on building an AI app to summarize YouTube videos using Next.js and Strapi

// PAUL BRATSLAVSKY

📦 Packages / Tools / Repos

Introducing AI SDK 3.0 with Generative UI support – Vercel open sourced the generative UI technology of v0. Associate LLM responses to streaming React Server Components

// VERCEL

Upstash Queue – SQS like stream based queue on top of Redis. The repository includes a Next.js example you can use for reference

// UPSTASH

next-cache-toolbar – A little dev tool to identify and debug Next.js data cache entries by showing the revalidation status and tags

// KAJETAN SZYMCZAK

Million Lint is in public beta – A VSCode extension that identifies slow code in your React applications and provides suggestions to fix it

// MILLION.JS

🌈 Related

Deploying safely on Vercel without merge queues

► Drizzle ORM in 100 Seconds – Drizzle is a heavily underrated ORM in the JS world. This Fireship video explains all the main features and and gives compelling reasons why you should give it a try

// FIRESHIP

Introducing feature flag management from the Vercel Toolbar – Override your application's feature flags directly from the Vercel Toolbar. Supports some popular A/B testing solutions and custom feature flags.

// DOMINIK FERBER

Compiler Theory and Reactivity – Simplified explanation of how the React compiler works under the hood

// SATHYA GUNASEKARAN

React is the New IBM – A critique of the React team’s decision to improve performance with “compiler magic”. I personally disagree with the author’s opinion but it’s an interesting read

// CHARLES CHEN