๐Ÿฟ Stop shipping Framer Motion, Next.js now has Native Page Transitions


Hey Reader,

I'm working on a new course on AI and I know there are a million courses out there but honestly, I'd like to work on something that can help you ship things. However, I need your help.

Can you please answer what type of a course on AI would you want me to work on? Click here to reply โ†—โ€‹

Anyway, let's get into this week's newsletter.

PRESENTED BY SUPABASE

Supabase is the backend for your app: it gives you a database plus the โ€œboring but necessaryโ€ stuff around it (user sign-in, file storage, background functions, and real-time updates) in one place.

Itโ€™s built on Postgres (a widely used database), so your data is portable and youโ€™re not locked into a proprietary system.

For founders and PMs building with AI, itโ€™s the fastest way to go from prototype to a real, working app, all without stitching together five different services or learning a bunch of infrastructure first.

๐Ÿฟ Our Weekly Snack: Page Transitions in Next.js

Your Next.js animation library is costing you 40-60kb before a single frame moves.

Let's say you use Framer Motion. It ships JavaScript the browser has to parse and execute on the main thread, all before your user sees anything animate.

๐Ÿ’ก Here's what changed in Next.js 16

Next.js now wired up React's View Transitions API in the App Router

โœ”๏ธ Runs on the browser's compositor, not the main thread

โœ”๏ธ 60fps page transitions and shared element morphs

โœ”๏ธ Zero animation dependencies

โœ”๏ธ Already in the browser and now you can use it

๐Ÿง  How it works

Wrap ViewTransition around elements you'd like to animate. For Page transitions, on your , pass transitionTypes={['nav-forward']} to tag the navigation and on the destination page, wrap content in with enter and exit maps.

That's it.

Each transition type gets its own CSS animation - forward slides in, back slides out.

Here's how:

๐Ÿš€ The Takeaway

Staying current with Next.js isn't just about shipping new features, it's about deleting the bloat you used to need

๐ŸŽฅ If you'd prefer a video project walkthrough instead, check this deep dive.

--

๐ŸŽ If you're interested, you can download this free cheatsheet covering 29 common mistakes just like this one in React and Next.js.

๐Ÿš€ Latest Frontend News

LIBRARY UPDATES

TanStack Start now supports Server Components, this is huge!โ€‹

โ€‹TanStack AI Code Mode lets the LLM write and execute TypeScript programs in secure sandboxes, composing your tools with loops, conditionals, and Promise.all in a single shot.

Next.js finally has Page Transitions, here's how to build with themโ€‹

โ€‹
โ€‹ GREAT TOOLS

How Portable is 'use server' from TanStack anyway?โ€‹
โ€‹
โ€‹ AI

Learn how to use coding agents in 30 minutes! by Lee Rob

Google WebMCP aims to provide a standard way for exposing structured tools, ensuring AI agents can perform actions on your site with increased speed, reliability, and precision.

Tired of running agents locally, managing work trees, keeping your laptop open? check out Open Agents.

โ€‹Kimi 2.6 is out (first open source model to beat Opus 4.7)

โ€‹
โ€‹ SECURITY VULNERABILITIES

New React CVE just dropped - DOS vulnerability in Server Functions

--

Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas with Josh Comeau's new course Whimsical Animations, going live today!


๐Ÿค” What did you think of the Newsletter?

โ€‹๐Ÿ”ฅ Love it!โ€‹

โ€‹๐Ÿ˜ Itโ€™s okayโ€‹

โ€‹๐Ÿ‘Ž Not goodโ€‹

If youโ€™ve published a blog post or shipped something, feel free to reply to this email and it comes straight to my inbox. Iโ€™m always looking for great community work to consider featuring.

All past newsletters can be found here. You can email me at me@kulkarniankita.com to advertise/sponsor the newsletter.

For those curious, I write all my emails using Convertkit.

See you next week!

Ankita Kulkarni

Join 9200+ subscribers reading by weekly personalized Newsletter that helps developers level up their skills through weekly Frontend and Leadership Snacks. You get a deep dive into a Tech topic, Actionable tips to excel in your career and a toolbox!

Read more from Ankita Kulkarni
Two code snippets contrasting the placement of `redirect()` in a Next.js function, highlighting functional differences and best practices.

Hey Reader, Last week, I gave a talk at React Paris about Building your own AI minion, basically an AI Agent Toolkit for modern apps. I show my workflow and how I have automated a lot. The room was full, the energy was electric โšก, and it turned into one of my favourite talks Iโ€™ve given. You can ๐ŸŽฅ watch the video here and the slides are here. ๐Ÿฟ Our Weekly Snack: Stop calling "redirect()" inside a try/catch block in Next.js Stop calling "redirect()" inside a try/catch block in Next.js ๐Ÿ’ก Here's...

A terminal interface displays commands for a tool called next-browser, designed for AI agents to analyze and monitor Next.js applications.

Hey Reader, This week, Next.js 16.2 gave AI agents something they never had "a browser". Your agent can now see your app, find the problem, and fix it without asking you. This along with GPT-5.4 mini & nano (2 small models), TanStack Start going 5x faster, why you should ban useEffect, and more. Let's dive in. ๐Ÿฟ Our Weekly Snack: Your AI agent can finally see what your users see (Next.js 16.2 is here) Next.js 16.2 dropped yesterday (deep dive here) and it just gave AI agents a browser. It's...

next.js proxy

Hey Reader, Middleware got renamed to Proxy in Next.js 16. Same functionality. Better name. What is Proxy? Every request to your app has to go somewhere - a page, an API route, a file. Proxy gets to look at it first and decide what happens: send the user somewhere else, serve different content silently, or just let it through as-is. Think of it as a traffic controller ๐Ÿšฆ sitting in front of your routes. So, why you should stop putting auth in Proxy? It feels like the perfect place but it...