🍿 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?

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

Hey Reader, The biggest challenge with AI right now isn't building from scratch or brainstorming, it's great at both. It's building real intuition for how things should work. Take how TikTok and YouTube handle video. If they served the same file to every device, tablet, mobile, desktop, even a slow 3G connection, users would drop off fast. So how would you solve that? Don't worry, let me show you. Here's how to architect for exactly this challenge. PRESENTED BY IMAGEKIT Don't throw raw MP4s...

A code editor displays a file structure showing a new lock file generated in the Next.js directory, indicating port 3000 is occupied.

Hey Reader, Confession: i've lost count of how many times an agent has killed my running dev server and started a new one on a different port. it's the single most annoying thing about coding with AI right now. Turns out Next.js 16.2 just fixed it so dig into the snack below. let's dig in 🍿 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)...

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...