📨 #220: Next.js, Astro, Nuqs, CRA, React Scan, Fumadocs, Fusion, Radix, Inertia | Sortables, Contributors Summit, Windows, Deep linking, Oklab, Audio, BottomTabs, Metro, OTA | TypeScript, Angular, Node.js, Vite

Hi everyone!

This week we have a good variety of React articles and Next.js is finally adding support for Node.js runtime middleware!

Mobile developers will also discover future plans for React Native, including desktop support from Microsoft. A new sortables drag & drop library should unlock new interactions in your app, considering it's quite hard to build all this yourself.

TypeScript continues to progress with a new beta including a flag to support the newly added native Node.js support, and the upcoming browser support. A polyfill for native browser support is already available!

I'm trying something new this week, splitting the newsletter title keywords with a |, following the pattern React keywords | React Native keywords | Other keywords. Do you think this is useful?

As always, thanks for supporting us on your favorite platform:

• 🦋 Bluesky
• ✖️ X / Twitter
• 👔 LinkedIn
• 👽 Reddit

Don't miss the next email!

It's exceptionally well curated, offers great insights and is well worth subscribing to!

Addy OsmaniHead of Chrome DX - Google

💸 Sponsor

PropelAuth: Make Authentication Your Advantage

If your authentication isn't helping you grow, it's holding you back.

With PropelAuth, you get everything you need to launch and scale your B2B product:

• Easy to understand documentation and friendly, fast support.
• UIs that cover all your use cases - signup, login, MFA, organization management and more.
• User impersonation so you can provide top-notch support to your users.
• Enterprise SAML/SSO and advanced security features so you can be upmarket-ready.
• User insights to help you strategize and expand.

Get started today

⚛️ React

Next.js PR - Support for Node.js middleware

A much-awaited feature for the Next.js community. The latest v15.2 canary has a new experimental.nodeMiddleware flag letting you opt-in for runtime: ‘nodejs’, enabling you to use Node.js APIs in middleware, and remove the constraints of being limited to APIs compatible with the edge runtime.

Vercel middleware has also been rebuilt from the ground up to support multiple runtimes and run on Fluid compute, a new cost-efficient way for Vercel to run serverless functions.

• 💸 Add a collaborative document editor to your app
• 👀 Remix PR - Split Route Modules: Introduce new future.unstable_splitRouteModules flag so that the route component and its clientLoader can be downloaded in parallel instead of sequentially.
• 🗓️ Paris TypeScript La Conf' - 🇫🇷 Paris - 28 February - Last call to join the first ever TypeScript conference in the heart of Paris! Get 20% off tickets with code "TWIR"!
• 📖 Integrate Motion with Radix: New docs page presenting integration examples for exit and layout animations.
• 📜 Single Responsibility Principle in React: The Art of Component Focus: I agree with this practice of designing your React app in “layers”.
• 📜 Persisting Form Data in React: A Modern Approach with Nuqs: Introduces a convenient lib to use search parameters in a typesafe way with integrations for Next.js and React Router.
• 📜 Using Phoenix with React and Inertia: Explains the surprising technical choice of combining an Elixir/Phoenix backend with a React SPA, including the challenges encountered and caveats. The Inertia protocol permits stitching both technologies through an adapter.
• 📜 An ast-grep rule to ban bad HTML nesting in React: A possible alternative to ESLint rule.
• 📜 How to Load Dynamic Stylesheets in React Router: Presenting techniques to load custom styles per authenticated user/company, using resource routes and meta functions.
• 📜 The React data-table I always wanted: A full-featured demo of TanStack Table + shadcn/ui + Nuqs, documenting lessons learned. A good inspiration to build your own table.
• 📜 How to inspect React Server Component Activity with Next.js: Using Next.js instrumentation.js and OpenTelemetry.
• 📜 How to build a library in React: Implementing and publishing a useContextSelector hook
• 📦 Astro 5.2 - Tailwind 4 support, trailing slash redirects, option to disable React streaming: Streaming might be incompatible with runtime CSS-in-JS libraries.
• 📦 mdx-prompt - Composable LLM Prompts with JSX
• 📦 React Scan 0.1.2 - Re-render history, components tree
• 📦 Fumadocs 15.0 - Tailwind 4 support
• 📦 Redwood 8.5
• 📦 React Three XR 6.6 - IWER debugging tools for mixed reality apps
• 📦 MUI 7.0 alpha
• 🎥 Aaron Francis - Introducing Fusion - Seamlessly combine React and Vue with Laravel
• 🎥 Theo - Create React App is finally dead
• 🎥 Jack Herrington - Stop Using Recoil, Use This Instead!
• 🎙️ This Month in React 2025-01 - Movement on CRA, Redwood.js dead?

Don't miss the next email!

One of the few things I regularly read to keep up with the React world.

Theo BrowneFounder of ping.gg - Youtuber

💸 Sponsor

See what’s broken and where with Sentry

Sentry's new bi-weekly live demos will show you how to catch, fix and prevent issues fast. Join one of their engineers Thursdays at 1 PM ET for 25 minute tour—no slides, no fluff, just code-level visibility from pre-release to production. RSVP

📱 React-Native

React Native Sortables

A new powerful React Native library for re-ordering items with drag & drop gestures, including features such as:

• Support for Grid and Flex layouts
• Support for different item sizes, spacing, and arrangements
• Auto-scrolling when dragging outside screen
• Seamless layout animations
• Simple API, full TypeScript support
• Compatible with Expo and both architectures

• 💸 Clerk - Build a daily workout tracker with Clerk, Convex, and Expo
• 📣 Apple open-sourcing Swift Build engine
• 💬 React Native RFC - Oklab color space support
• 📜 React Native Core Contributor Summit 2024 Recap: Many contributors met last September before React Universe to discuss the future of React Native, including various topics such as the release process, the New Architecture, Lean Core 2.0, upcoming support for new Web APIs, and more.
• 📜 Microsoft - A look into the new architecture on RNW 0.76 and 0.77: On Windows, the New Architecture is available in preview but isn’t enabled by default yet. Newly introduced features such as Modal support only support the New Architecture.
• 📜 iOS Universal Links and Android App Links with Expo Router and EAS Hosting: Using web URLs for deep linking provides benefits over custom app scheme links. Easy to set up with Expo Router.
• 📜 An elegantly simple DOM Component use case: Useful to quickly integrate fancy web things, such as D3 charts.
• 📜 Using Live Activities in a React Native App
• 📜 Building a BottomSheet from scratch in React Native
• 📜 Pre-built iOS Binaries: Reducing React Native Dev Start Time from Minutes to Seconds
• 📜 Supporting iOS Share Extensions & Android Intents on React Native
• 📦 Audio API 0.4: Enables real-time waveform visualizations (cool demo).
• 📦 Bottom Tabs 0.8.4 - Custom JS tabs
• 📦 Skia 1.11 - Reconciler perf improvements
• 📦 Metro 0.81.1 - Performance improvements and fixes
• 📦 Screens 4.6 - Important fixes
• 📦 Expo Open OTA - A Go implementation of the Expo Updates protocol, designed for production
• 🎥 Fernando Rojo - Major 2025 Updates: Mix Blend Mode, CSS Animations, SwiftUI
• 🎥 Dan’s Lab - How to Create a Video Feed using Expo
• 🎙️ RNR 320 - Silky Smooth Animations with Catlin Miron

🔀 Other

• 📜 You should not use URLPattern to route HTTP requests on the server: The upcoming Node.js 23 URLPattern feature, based on regexp, is not scalable enough.
• 📜 From Rust to TypeScript: A New Chapter for Prisma ORM
• 📦 TypeScript 5.8 beta - erasableSyntaxOnly, require(esm), dependent return type narrowing
• 📦 ES Module Shims 2.0 - Polyfill for native ES module features: Already supports TC39 Type Annotations stripping, letting you run TypeScript code with erasableSyntaxOnly natively in the browser today, similar to Node.js!
• 📦 Vite 6.1
• 📦 Mentoss - fetch() mocker for server/browser runtimes
• 🎥 Angular: The Documentary

🤭 Fun

See ya! 👋