👋 Hi and welcome to the first issue of NextjsWeekly.
I'm Erfan, and I'm excited to share with you the latest and greatest on Next.js every week. Let's dive in! 👇
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.
📙 Tutorials, Articles & Opinion
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
📦 Packages / Tools / Repos
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.
🌈 Related
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.
Subscribe if you want to get these kind of news in your inbox every Thursday:
Top comments (0)