Issue #15 // July 13, 2023 // Open web version |
|
Demystifying React Server Components – A simple to understand, no fluff, guide about the concepts behind React Server Components
Rendering rich responses from LLMs – Learn how to use Vercel’s AI SDK with Next.js to build an AI app that understands markup languages for formatting and rendering diagrams in MermaidJS
⚡️ SPONSOR 
Authentication & User Management for Next.jsClerk is the easiest way to add authentication and user management to your Next.js app. With prebuilt UI components and feature-rich SDKs & APIs, Clerk is purpose-built for the modern web and designed to get you up and running in minutes. NextJs Middleware | How it Works & Real Use Cases – A solid explainer on middlewares in Next.js and how they can be used to intercept requests and execute code on the Edge runtime before the request is completed
📙 Tutorials, Articles & OpinionErrors Received When Migrating Next.js 13 to New App Folder – Solutions to common Next.js errors when switching to the app folder and server components
Why I use Zod with Server Actions – Ryan Toronto explains how to simplify your Server Actions code by using Zod
A Visual Guide to Prefetching in Next.js 13 – Prefetching can be the difference between a UI that feels laggy and one that feels snappy. Check out this visual guide to understand how Prefetching works in Next.js 13
Simple Next.js & React Authentication With Clerk – In line with the sponsor of this issue, Brad from Traversy Media published a great video on how to build an authentication system for Next.js using Clerk
📦 Packages / Tools / ReposIntroducing: Kuma UI 🐻❄️ – A Headless & Zero-Runtime UI Components & CSS-in-JS library compatible with React Server Components
Material UI now supports the Next.js App Router – All components and hooks from MUI libraries now automatically include the "use client" directive to run as client components
tier-vercel-openai – OSS app for generating marketing content using OpenAI built with Next.js 13, Prisma, Stripe for payment and Tier for implementing billing, metering, and access checks
next-international – New release comes with support for App Router
🌈 RelatedInvisible Details of Interaction Design – "Design can feel like there's no science to it — only feel and intuition.". An absolute must read for UI developers and people curious about interaction design
React Hook for Avoiding Flash of Empty UI While Data Transitions – In this article, James shares his experience of dealing with flashing UIs in React and explains how he solved the issue by creating a custom hook
Using TypeScript – Preview of the official guide on using React with TypeScript
|