#62: React Visually Explained, v1, Better Vercel Firewall, useAnimate mini

► React visually explained: ’use client’ – This has to be one of the best explanations of React’s new client/server architecture. It explores what ’use client’ is, how it works, and the problems it solves.

𝕏 Next.js Music Player – Lee launched an interactive music player app built with Next.js. In his post on X, he shares insights into his development process, explaining how he implemented PWA capabilities and integrated native media controls using the MediaSession API

Stack Auth – The open-source Auth0 alternative. Install in your Next.js app with just one command: `npx @stackframe/init-stack@latest`

Implementing Feature Flagging with the Next.js App Router – Learn how to implement a simple version of feature flagging with the Next.js App Router

How to fetch data in React [2024] – Explores various options for data fetching, covering React Server Components, tRPC, React Query, and React’s new ’use’ API

SSR-friendly Custom React Hook for Local Storage Read and Write – Describes the process of implementing a custom React hook for managing local storage, using useSyncExternalStore

v1 – An open-source starter kit designed for rapid development, built with insights from a real-world, large-scale Next.js app. Comes pre-configured with essential features like email integration, background jobs, error monitoring, rate-limiting, and more

React Aria - September 30, 2024 Release – Color picker components are now generally available, buttons now provide a pending state, advanced TreeView to beta, and new Disclosure and DisclosureGroup components for building accordions and collapsible panels

useAnimate mini – Framer Motion now provides a 2.5kB mini version of their useAnimate hook built on the Web Animations API to deliver hardware accelerated animations for a tiny bundlesize

Vaul 1.0 – The probably best React drawer component has hit version 1.0. Fully rewritten, improved, and with fresh documentation.

More:

• Bulletproof React – A simple, and scalable architecture for building production ready React applications. Updated to also include examples for the App Router and Pages Router
• 𝕏 In Next.js 15 you don’t need to manually install sharp when self-hosting

Vercel WAF: Persistent actions, rate limiting, and API control – New Firewall capabilities reduce effects of DDoS attacks and enhance traffic control

Intro to CSS animations for React developers – Investigating CSS animations in React by building some useful components like slide-in drawers, expandable search field, and fancy hover effects.

Component Composition is great btw – Dominik covers the correct way to approach component composition, with special attention given to conditional rendering for managing multiple states

Clean React with TypeScript – Exploring common React features and patterns and how to seamlessly integrate them with TypeScript