#13: App Router Update, Unit Testing Crash Course, Next/Nest Monorepo, Teleportation in React

Next.js App Router Update – As I briefly mentioned in the previous edition, Vercel has recently shared a post responding to the feedback regarding the problems with the App Router in Next.js. They have also outlined a list of priorities for the near future. The main areas they will be focusing on are:

• Making Local, Build, and Production Performance better
• Fixing bugs and addressing any unexpected issues
• Providing developers with education on the new features of Next.js and React

Lemon Squeezy and Next.js 13 – This step-by-step guide provides a simple setup process for managing subscriptions with Lemon Squeezy and shows you how to implement the backend in your Next.js app to handle webhooks efficiently.

🎥 React Testing Crash Course with Next.js – While it may be close to 3 hours in length, this video course is a gem that you won't want to miss. It takes a deep dive into the world of unit-testing components in Next.js, demonstrating the effective use of React Testing Library

Things you might not know about Next Image – Amazing writeup about how Next.js' Image component works. Plus it clears up common misunderstandings about image optimization, the architecture behind it, and usage.

🎥 The Ultimate Guide to Server Actions in NextJs 13 with Error Handling & Validation Using Zod – Hamed is back with another practical walkthrough. This time it’s about the usage of Server Actions in Next.js

Building a full-stack, fully type-safe pnpm monorepo with NestJS, NextJS & tRPC – If you're looking to add a comprehensive backend framework to your Next.js application, NestJS is an excellent option. This tutorial guides you through the steps of establishing a monorepo setup, utilizing NestJS for the backend and Next.js for the frontend, while ensuring type-safe communication through tRPC

🎥 Incrementally adopt the Next.js App Router – Great explainer by Lee on how to migrate from the old pages directory in Next.js to the new App Router without breaking things.

React Wrap Balancer – A small React component that tidies up bad typography and matches line lengths on the fly.

The Getting Started with AI Stack for JavaScript – Exciting news! The a16z infrastructure team has launched a new open source toolbox that helps you build AI apps without wasting time. It’s based on Next.js and comes with models for images and text, vector stores, auth, and deployment configs

nextjs-github-pages – Deploy a Next.js app to Github Pages via Github Actions

Thinking in React Query - Slides and Transcript – What is React Query? A data fetching library or something else? Recently Dominik answered these questions during the talk he gave at React Vienna. If you’re using React Query I highly recommend to check out these slides

An Introduction to Streaming on the Web – Great introduction into the topic of Web Streams and how to utilize them to handle large data sets, control data flow, and provide real-time updates and interaction to enhance the UX of your apps

Teleportation in React: Positioning, Stacking Context, and Portals – Super insightful article about why we need React Portals to overcome the limitations of CSS positioning and stacking when it comes to elements such as dialogs and modals