#49: Server Action Nuances, Longer Function Execution, HeadlessUI, Patching Globals

Shipping Ship: Behind the Particle Shader Effect for Vercel’s Conf – A step-by-step tutorial on how Basement Studio built the particle shader effect for the Vercel ship site using WebGL

Nuances of Server Actions in Next.js – In this article Tiger provides insights into Server Actions in Next.js, covering topics such as parameter binding, sequential execution limitations and revalidation techniques, with practical examples

Sentry 🤝: Supabase: Find the slow queries in your database – Learn how to improve the performance of your PostgreSQL database and get real-time error alerts at our upcoming workshop. Plus join us live and you’ll have a chance to win swag

Rebuilding "Remix Contacts" in Next.js 14 with Transitions, Server Actions and Prisma – Remix Contacts is Remix's official tutorial. This guide describes how to rebuild it in Next.js 14 using React Server Components, Server Actions, Transitions and Prisma, while also comparing the two approaches

Vercel to Self-Hosted Next.js – This post guides you through the steps to set up a self-hosted Next.js app with a CI/CD pipeline powered by GitHub Actions, with zero downtime deployments and rollback functionality

► Handling RSC Errors in Next.js – Learn how use an error boundary to implement a reset function for React Server Component that threw an error

🎙️ React Server Components: Form Actions + Server Actions – Discussion on using actions and form actions in React Server Components for calling server code from the client side without needing a separate API

Headless UI v2.0 – Headless UI v2.0 for React got released and includes a ton of new stuff including built-in anchor positioning, a new headless checkbox component, HTML form components and more

𝕏 Clerk Elements – A library of unstyled, composable components that can be used to build custom UIs on top of Clerk's APIs without having to manage the underlying logic

Draft: unstable_after – This feature will allow you to run code in your server components and API routes after the response is finished

uikit for React Three Fiber – Build performant 3D user interfaces for Three.js using @react-three/fiber

More:

• edge-csrf – CSRF protection library for JavaScript that runs on the edge runtime
• Next.js Book Search App– A demo showcasing efficient parsing of large data with optimistic UI updates
• Support useFormStatus in progressively-enhanced forms

Why Patching Globals Is Harmful – A phenomenal article about why libraries should avoid patching globals. The topic recently became relevant due to React’s decision to patch Date.now() and Math.random()

Modern React testing, part 5: Playwright – This part of the testing series focuses on writing end-to-end tests using Playwright, demonstrating how to mock network requests with Mock Service Worker, and applying testing best practices to write integration tests

Vercel Functions are now faster and powered by Rust – tl;dr: 30% faster cold starts for smaller workloads. You don’t need to make any changes to your apps.

Vercel Functions for Hobby can now run up to 60 seconds – Big news: All new deployments will be able to increase the maximum duration of functions on the free tier from 10 seconds up to 60 seconds

More:

• waitUntil – Enqueue an asynchronous task to be performed without blocking the response
• VERCEL_PROJECT_PRODUCTION_URL– Vercel now provides the project's production domain as an env var