#1: Streaming Support, Static Exports, React Email, Shadcn/UI

Vercel now fully supports HTTP response streaming – Learn how Vercel's custom solution enables HTTP response streaming in both Node.js (Lambda) and Edge runtimes. With HTTP streaming, you can reduce response latency, improve page load times, handle large dynamic payloads efficiently, and cut down on overall memory usage. You can experience the benefits of streaming on Vercel today through Next.js Route Handlers and React Server Components.

How React server components work: an in-depth guide – If you're planning to utilize streaming on Vercel with Next.js, it's essential to understand React Server Components (RSC). This guide from Plasmic.app does an excellent job of explaining what RSCs are and how they work

🧵 The Next.js App Router now supports static exports – … on the canary branch but it will soon be stable. For Next.js devs who don’t need a server, this is a game-changer! Additionally, `next export` is now built into the `next build` command, and there are many other changes that Lee Robinson highlights in his Twitter thread.

AI Powered Text Generator using Next.js, Replicate and Redis – In this tutorial, Hosna shows how to use Replicate's Machine Learning API to create a caption generator using salesforce/blip's image to text model. The app will be built with Next.js, Upstash Redis for rate limiting, Tailwind CSS for styling, and deployed on Vercel.

🎥 Add authentication to Next.js Route Handlers – Check out this video tutorial by Jon Meyers where he shows how to add cookie-based authentication and authorization to Route Handlers and use policies for Row Level Security in Supabase to protect user data.

🐦 Improved sitemap support coming to Next.js – SEO in Next.js becomes easier and more productive

React Email – A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.

Bright - RSC for syntax highlighting – Syntax highlighting on the server. Which means no impact on bundle-size.

next-wayfinder – A lightweight (~3kb minzipped) and flexible package that simplifies the organization of middleware in Next.js applications.

chronark – Check out this great portfolio page by Andreas Thomas, built with the new Next.js 13 App-Router. The best part, this page is fully open source and you can find the source code here and use it as reference for your next project.

shadcn/ui – You have to try this! shadcn/ui is a fantastic collection of customizable and accessible components that you can easily copy and paste to create your own component library. Plus, it's free and open-source! The components are built using Radix UI and Tailwind CSS.

Announcing the Rate Limit Analytics – Upstash continues to build great stuff. In this case it's Rate Limit Analytics. With this feature, you'll be able to see your application's overall performance and how rate limits affect different users. The Rate Limit Dashboard makes it easy to visualize and analyze your rate limits. The best part is, if you’re already using @upstash/ratelimit then you just need to add a flag to enable this.

What is Strict Mode in React? – This article dives into the details of what strict mode is, how it works and why you should consider using it in your applications

SWR DevTools – If you are using Vercel’s data fetching library SWR then I have found a super useful tool for you. It’s a developer tool which helps you debug your SWR cache and fetchers.