Sam Selikoff: Improving developer and user experience with nested layouts in Next.js

Hi there, my name's Sam Selikoff and I'm super excited to be talking to you about one of my favorite features coming to Next 13, Nested Layouts. I've used Nested Layouts in a lot of different frameworks going back to my time in Ember, and I love the power they give you to build you UIs for the web. And today we're gonna see exactly how they work

in Next 13 by looking at this demo app. So this is a brand new Next 13 app. We're gonna see we have this root app folder with two files, layout.js and page.js. And here is the RootLayout. So the first thing you'll notice about this layout is that it renders the HTML head and body tag. So it's actually rendering the entire document. And the second thing you'll notice is this children prop, which it's slotting in right here inside of the body tag.

And that's what's rendering our page component. So right now we have one page right at the root URL. Let's go ahead and make a second page with movies/page.js and we'll export a default function, and let's return a tag that says the movies page. So now if we come over and visit movies, look at that. We've got a new URL in our app. So this is how we create pages in Next 13.

And if we come back to the layout, let's come within our body tag and we'll add a header right here. And now if we look at the movies page or the home page, we're gonna see that header text on both pages. So in Next 13, layouts are a first class concept. We can see here the header is being rendered above both pages right above this children right here. So this makes layouts a great place

for persistent nav like some links. So let's go ahead and add a nav tag. We'll add a home link and we'll add a link to /movies. And now we can see both of these links are showing up, and when we click 'em we can see the pages being rendered. Now just like in Next 12, we have a special component called Link. So let's go ahead and change these to use that. And now when we click these,

we're getting nice client side transitions and some other behavior, like pre-fetching, that we already know and love from Next 12. So as you can see, this layout is the perfect place for our header. And it's also a great place to do some global stuff like importing tail and css, which we can do right up here. We can see that taking effect, and adding some global styles like BG Gray 900. Let's make this a dark app, and we'll add text-gray-100 for the text.

And let's just throw antialiased right here. And now we can come down, and add some space between these links. Maybe add a bottom border to our header with some padding. And we'll also add one more div around kind of the main panel of our layout here. So we're off to a good start, but it'd be nice to know which one of these links are active when we actually click on them. Maybe we could toggle some classes on this link tag.

Well, Next 13 has a great hook that lets us do just that. It's called Use Selected Layout Segment from Next Navigation here. And if we go ahead and save this, we're actually gonna see an error. And if we come over and open the docs for Use Selected Layout Segment, we're gonna see that this is a hook that allows us to read the current route segment inside of a client component. And so it turns out this whole time,