React Email 6.0, Vercel got hacked, Prevent flash before hydration, Logging in Next.js, shader-lab, TypeScript 7.0, nextmap

React Email 6.0

The highlight of this release is an open-source email editor that outputs inbox-ready HTML. It has a composable API for building custom blocks like image uploaders or social embeds. Also new: a unified single package for all components and a fresh set of templates for auth and e-commerce flows

Vercel April 2026 security incident

Vercel disclosed a security incident where an attacker compromised a third-party AI tool (Context.ai) used by an employee, gaining access to some internal systems and non-sensitive environment variables. No npm packages were affected. Vercel recommends rotating credentials, enabling 2FA, and reviewing activity logs

---

⚡️ Sponsor: Clerk

Clerk CLI: manage auth from your terminal

The new Clerk CLI detects your framework and gets auth ready to configure. Run clerk init to scaffold, clerk config to manage sign-in methods, redirects, and session policies in code, or clerk api to query users and orgs. Try it.

📙 Articles / Tutorials / News

New Docs: How to prevent flash before hydration

New docs explaining how to avoid the visible flicker when things like dates, themes, or localStorage values differ between server and client

If You Can't See the Boundary, You Can't Reason About the System

We featured the RSC Boundary package in a previous issue. This article from its creator explains the problem it solves: When working with React Server Components, you often have to guess where the server/client split is by reading 'use client' directives and tracing imports. RSC Boundary removes that guesswork. It's a dev-only overlay that highlights which parts of your page are server-rendered and which are client components, giving you a live visual map

Next.js 16 Migration Guide: Everything That Breaks (And How to Fix It)

A thorough, hands-on migration guide covering every breaking change in Next.js 16 and how to deal with it

Logging in Next.js with LogLayer

Next.js logs can get messy across different runtimes. This post shows how to fix that with one shared logger using LogLayer, console interception in instrumentation.ts, and structured output with Pino for production

---

📦 Projects / Packages / Tools

@basementstudio/shader-lab

A visual tool and React runtime for creating layered shader compositions. Render directly in your app, use them as Three.js textures, or apply built-in effects like ASCII, CRT, dithering, and pixel sorting as postprocessing over your own 3D scenes. Fully open source

nextmap

A CLI tool that scans your Next.js project and shows every route as an interactive graph in your browser. It picks up pages, API routes, middleware, and HTTP methods

Animata

Handcrafted interaction animations and visual effects built with Tailwind CSS and Framer Motion. Works like shadcn/ui

Announcing TypeScript 7.0 Beta

The first beta release of TypeScript 7.0 is here, and it's a big deal. The compiler has been completely rewritten in Go, making it around 10x faster than TypeScript 6.0. It now supports parallel type-checking and parallel project builds out of the box. Despite being a beta, the team says it's stable enough for everyday use

---

⚡️ Sponsor: Expo

How to go from Web to Native with React

Everything that web devs need to know about building their first mobile app - You already know React. With Expo, you can use that knowledge to build fully native apps for iOS and Android without starting over or learning new tools

---

🌈 Related

Building a UI Without Breakpoints

Modern interfaces are component-first, but most responsive CSS is still viewport-first. This article bridges that gap with four methods: intrinsic layouts using auto-fit and minmax(), fluid scaling with clamp(), container units for sizing relative to a component's actual space, and container queries for true structural changes

10 React tips I wish someone had told me before I mass-produced bugs

Lessons learned from production bugs and code reviews. Includes tips like replacing multiple useState calls with useReducer, keeping state close to where it's used, using key to reset components, and choosing Compound Components over prop-heavy APIs

A TypeScript Class-Based WebSocket Library for React

Explaining a different approach to WebSockets in React. Instead of putting everything in hooks, the heavy lifting lives in TypeScript classes

AI-Generated UI Is Inaccessible by Default

Breaks down exactly why LLMs produce inaccessible code and presents a practical five-layer fix: prompt constraints, static analysis with eslint-plugin-jsx-a11y, runtime testing with axe-core, CI enforcement via GitHub Actions, and using accessible component libraries like Headless UI, Radix, or React Aria