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