#39: App Router Training, Partial Prerendering, GTP Skeleton, Lucia 3.0, Web Components in React

▶️ Partial Prerendering (What? Why? How?) – Partial Prerendering is an experimental feature introduced in Next.js 14. This video brilliantly explains its functionality and the benefits it provides

Next.js App Router Training – A collection of interactive examples to learn about the Next.js App Router

Avoid using React’s `useFormStatus` – The `useFormStatus` hook returns a form's pending state, but with a caveat: it solely functions within a form child. This article presents an alternative approach for tracking form state using `useFormStatus` and `useTransition`

🧵 `use client` marks a door from server to client – This reply thread by Dan was a huge eye-opener for me. `use client` and `use server` mark doors between environments and are only needed in files that are imported from the other environment

Lessons Learned from Developing DevCycle’s Next.js SDK – Reflecting on the challenges and lessons learned from implementing a Next.js-specific SDK

Next.js App Router migration: the good, bad, and ugly – The founder of Flightcontrol shares their experience migrating the code for their dashboard from Pages Router to the newer Next.js App Router

More:

• How to setup Client-Server Relaying in Next.js
• Optimizing images for Next.js sites with imgproxy and docker
• Docs: Improved middleware.ts explanation, more code examples,…
• Docs: Improved instrumentation.ts docs, API references

Lucia 3.0 🚀 – A simple and clean authentication solution. With version 3.0, the library has undergone a restructuring, splitting it into three parts to increase flexibility: Lucia, the main library; Oslo, a set of authentication-related utilities, and Arctic, a collection of OAuth clients for popular providers

GPT Skeleton – Let AI generate loading skeletons for your UI

VS Code extension for shadcn/ui – This extension enables you to install shadcn/ui components directly from VS Code

OpenMailer – A minimalist Next.js alternative to Mailchimp, Beehiiv, Convertkit etc.

▶️ How Vercel builds Vercel – Learn how Vercel builds Vercel: from the initial v0 all the way to enabling feature flags in production and visualizing traffic data

🎙️ You should learn Drizzle, the TypeScript SQL ORM – This week's podcast recommendation is Wes Bos and Scott Tolinski discussing Drizzle ORM: what it is, how it works, and why you should consider giving it a try

Migrating from Zod to Valibot: A Comparative Experience – Valibot is a Zod competitor with the advantage of providing a smaller bundle size due to its modular architecture. This article discusses the strengths and weaknesses of using Valibot for schema validation compared to Zod

How streaming helps build faster web applications – Learn why streaming is critical for performance and how the Next.js App Router integrates with React Suspense to easily enable streaming UI

More:

• Direct support for Web Components in React 19
• New client-side hooks coming to React 19