The true potential of Next.js Layouts (+ my next.js course 👀)


Hey Reader,

I have some exciting news 🥳.

I have been working hard on launching the Modern Full Stack Next.js Course ↗️.

It's a course that teaches you to build and deploy modern full stack Next.js Production-ready apps.

It is coming along well and I am taking the extra time to perfect it. It’s set to launch in April, and I can’t wait for y’all to check it out!

I plan to share extra bonuses 🎁 and nuggets for folks on the waitlist so click this magic link to join the waitlist ↗️.

Weekly Snack: The Secret Magic of Layouts 🍿

Despite working on Next.js for the past few years, I still made a mistake of realizing the true potential of Layouts.

What are Layouts?

In Next.js, a Layout is a file that lets you wrap a group of pages.

If you think Layouts are just for common styling and shared elements, think again—they do so much more.

Take my Next.js Course Platform, for example.

The Challenge

When a student clicks a lesson in the curriculum side nav, we don’t want the entire curriculum to reload with the new page. If there are 100 lessons in the side nav, why reload them every time? That data isn’t changing.

The Solution

This is where Layouts come in! By creating a child layout, I can keep the curriculum side nav from reloading unnecessarily and move the data fetching to Layouts as well.

Notice the data fetching being moved to Layouts which means lessons will be fetched only once on page load 🏆.

Here’s how:

Moving on to our weekly news,

🚀 Latest Frontend News

A Library with beautiful React Components

Next.js just published a detailed guide on Building API's with Next.js

Next.js 15.2 is out and even though this may seem like a minor version, it isn't!

  • 💅 The Error UI is fully designed and revamped - looks slick
  • ❎ Async metadata will no longer block page rendering
  • ⚡ Faster compile times thanks to Turbopack
  • 🤯 Experimental support for React's new View Transitions API

I already upgraded my Next.js Course Platform to 15.2 and it is very fast and way better!

Claude 3.7 is now available on Trae! - A competitor of Cursor AI and an IDE as well

TanStack Solid Router is now Available 🎉 More info here

TanStack Form 0.43 is out now! with Stricter types

You can now Self-Host Convex and is fully Open Source and they have a detailed onboarding tutorial as well

🎥 Weekly Youtube Videos

Check it out and subscribe to my channel ↗️ for more Frontend, Leadership and Career Development content.

Create React App is Dead, Here's a New Way to Build React Apps

video preview

Interviewed Lee Rob, VP of Product at Vercel

video preview

What do you think of today's Newsletter? Simply click on one of the links below.

🔥 Love it!

😐 It’s okay

👎 Not good

All past newsletters can be found here.

You can email me at me@kulkarniankita.com to advertise/sponsor the newsletter.

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
The Subtle UX Trick That Makes Apps Feel Premium

Hey Reader, I’ve kicked off a brand-new series on YouTube: The AI Agent Series where you’ll learn how to build, deploy, and scale powerful AI Agents from scratch. To get started, check out the series here ↗. I listed down tasks I'd hire for and instead, built an AI Assistant Agent with Convex, WorkOS Authkit and Next.js. This week, I'm dropping a video showing 📹 How I shipped a AI Agent SaaS in just 13 minutes and we'll buid your own Assistant step-by-step. Now onto today’s sponsor 👇...

Create Your First AI Agent

Hey Reader, Ever Wish You Had a Senior Engineer Reviewing Your Code 24/7? 🧠Now you do and it’s powered by AI. This is Part 1 of my new AI Agent Series where we’re building and deploying real AI agents that can think, analyze, and act like a senior software engineer 🤓. This project is called AI Code Reviewer and it’s not just a fancy chatbot. It remembers past messages, gives contextual feedback and helps you ship better code, faster. Here's the Tech Stack: → ⚡ Next.js 15 + React 19 → 🧠 Convex...

after function in Next.js

Hey Reader, Next.js has a bunch of little features that feel fun at first — but can actually change the way you build. This week’s snack is one of those. That’s the whole point of Frontend Snacks: giving you small, sharp insights that make a real difference and ones you can actually apply. Weekly Snack: after function 🍿 Next.js 15 introduces after() — a new API that lets you schedule server-side code to run after the response has been sent to the browser. So your UI renders instantly, and the...