Issue #40 // Feb 9, 2024 // Open web version
► Next.js App Router Authentication (Sessions, Cookies, JWTs) – Learn how to use JWTs with HTTP-only cookies to implement basic session-based authentication in the Next.js App Router
OpenTask: A Next.js App Router Case Study – This is a follow-up on Nexar: an application architecture for Next.js App Router, which was recently featured in an edition of Next.js Weekly. This in-depth write-up explains how to implement this architecture to build a full-stack app, leveraging all the latest App Router features
Take your Code Presentations to the next level with snappify's powerful animation features.
📙 Tutorials, Articles & Opinion
How to stream files from Next.js Route Handlers – If you want to serve large files to your users, there's no way around using streams. This guide explains how to set up streaming in Next.js and highlights the differences between streaming in the newer Route Handlers versus the older method used in API Routes
What we've learned from the transition to Next.js 14 with Server Components – A deep dive into the journey of rewriting Medusa's Starter Template to make use of Next.js 14 App Router features. I particularly appreciated the side-by-side code comparisons, which illustrate the significant reduction in code when using the App Router
Fix Next.js routing to have full type-safety – Explains how to use Zod in order to implement a fully type-safe routing layer for your Next.js apps
► Optimizing Videos in Next.js – Learn about best practices for embedding videos in your Next.js application
📦 Packages / Tools / Repos
Aceternity UI – A beautiful set of Tailwind CSS and Framer Motion components to build your next landing page
High performance Next.js – Learn how to take full advantage from the App Router server-centric and static-first philosophy. A course by Eric Burel with 1h+ of video and detailed text content.
Enhanced Button – Easily expand the regular shadcn button component with new button styles, without the need of creating new additional button components.
FormsLab – Form builder for anonymous surveys, polls, and collecting feedback. Built with Next.js, TailwindCSS, and Prisma
Million 3 – Boost React's performance by 70%. Version 3 introduces enhanced TypeScript support, handling of nested React components, and a completely rewritten compiler for even faster performance
The next evolution of serverless is stateful – Moving to serverless has its drawbacks, like the inability to use WebSockets. This article explains how to bring back the ability to have stateful connections through Cloudflare Durable Objects and Partykit
Integration Testing Vercel Serverless Functions with OpenTelemetry – Learn how to set up OpenTelemetry and TraceTest in your Next.js application, enabling you to run integration tests both locally and within your CI pipelines
► Building an OpenAI-powered Slackbot with GPT – Another amazing tutorial by Lee: Create a Slackbot that can answer any question, powered by Vercel Functions and OpenAI
🎙️ Dan Abramov on React, RSCs, and the future – Dan Abramov talks about his time on the React core team, thoughts on React Server Components and how React has evolved