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

Get an inside look at how nested layouts with Next.js 13 can improve your user and developer experience with Sam Selikoff, Founder of Build UI.
Deploy now: vercel.com/home

[@alfonsocartes]

So many concepts understood in one video. Awesome! Thank you Sam

[@sma1015]

and in just 23minutes... damn

[@ichibanfuego]

am i watching a vscode masterclass or a layouts demo

[@r0mankon]

Vim masterclass

[@mostlydevs4277]

Both. Lol

[@DivjotSingh]

Sam is a great educator. He paces his talks/videos quite nicely like a melody. You get introduced to a simple API, then a problem, then a natural solution that intuitively makes sense, then some fun with it, and then a great climax to what you just learnt.

[@swyxTV]

are we still talking about youtube videos or

[@DivjotSingh]

@@swyxTV _sorry children_

[@martinezomg]

WOW that was a quick but very concrete explanation, thank you.

[@jordondax]

You were an awesome presenter, thanks enjoyed the video.

[@hakkasama8807]

I think I've watched this video almost 5 even the 2 stages of the conference, it was awesome tbh! Thanks to the full team, amazing work here!

[@emalorenzo2415]

Such a great talk! Thanks Sam, can't imagine making this content easier to understand

[@_peterferguson]

Easily the best conf talk ... nicely done!

[@TomHermans]

Great video Sam. A lot of concepts inside one video and hands-on examples. congratz

[@hemanthkotagiri8865]

I didn't even notice 23 minutes have gone by. Thank you for this awesome release Vercel! Can't wait to get my hands dirty!

[@shift-happens]

The segment from useSelectedLayoutSegment is just awesome :)

[@juanmanuelamato511]

Wonderful way to explain. Next 13 has many features that reduced the doubts I had to understand ssr or csr. Thank you very much!

[@im-a-trailblazer]

It's an absolute joy to learn a framework this way.

[@senkasim]

Thank you for the clear explanation. I can't wait to use nextjs 13 in my new projects.

[@gagamil]

Having built only a small number of frontend mvp apps I really appreciate that the new next hits all the common dev concerns that even I have run upon. So convenient.

[@tericcabrel]

Wow! This video is excellent! Layout was daunting to me until I watched this video. That is very well explained! Thank you so much

[@omkarkulkarni3644]

Very professional and crisp. Thanks SAM!

[@larrydevops6951]

Wow, the new features seem amazing...Thank you

[@alsherifkhalaf7385]

I am happy to watch you on Vercel channel.

[@nicolassturm8853]

so well explained and enjoyable to watch🔥

[@jugalkumarseth7675]

I was to start a new project downloaded next-12 yesterday Now switching to next-13. Very well explained video Thanks Sam.

[@pavankjadda]

Great video. Explained new concepts like piece of cake :)

[@MrKeepItTrill]

Wow I can't believe you can hold space to move the MacOS screenshot selection!!! This has changed my life. Great explanation of /app as well :)

[@itsbrex]

I never knew you could do that either lol

[@MrBrandenS]

Always enjoy your great videos Sam! You are an amazing teacher. I'm sure you get a bit of smirk on your face how similar this feels to Ember land with even more flexibility to take things further with the server side and client side paradigms which are awesome. I'll definitely be giving the new layout stuff a try this week.

[@samselikoff]

You got it! Love seeing more and more of the best patterns making their way into Next.js 🙂

[@Blade_Dhruv]

Hey bro this is the best tutorial of nested layout I have ever seen, your way of explaining is just so good loved this video!!

[@drakongames5417]

just wow video. so many good things I learnt from just a single video. great way to teach

[@vitriowibisono2875]

Very clear and informative video. I would like too see more examples

[@ginger-viking]

Love Sam's teaching style

[@questionyourbeliefs]

This video is absolutely amazing.

[@harelpanker]

Thanks! very nice explanation (as always)...

[@quantumrim3805]

Thank you for such a valuable video 👏

[@kenny7385]

woah cool to see Bradley Cooper giving explanations about next 13 🙏

[@eliuddyn]

Amazing explanation 🔥🔥 Nextjs forever 🔥🔥

[@Mitsunee_]

Yeah, I went from "dunno if I'll get this to work" to already thinking ahead to migrating my blog as a test project. Gonna wait for the docs to be updated and current projects to get finished and give it a try :)

[@notshbn]

I’ve been looking for this

[@synt-x6458]

well explained. anyone else excited by these new features?

[@BrianRAmolo]

Great video !

[@igrb]

Banger as always

[@warofsigmar34000]

Holy cow ! Awesome thx for the video

[@labnol]

This is very useful.

[@rammehar5531]

I the love the way you are explain things, great. pls also explain with auth and global state.

[@swyxTV]

great talk Sam!

[@Infante1979]

So helpful thank you so much

[@minnow1337]

Love the new routing system, migrate api routing too pls 🙏

[@gabrielrock]

really good video

[@BarisPalabiyik]

This talk was great, I wish they showed how to do mutations(post reqs) as well with the server components, because when you go client side for interactivity you lost the backend capabilities.

[@gustavomonteiro2087]

Sam is the best!

[@JasonChannelOne]

Fantastic!

[@henriquematias1986]

Would be great to see useSWR running on top of those statically rendered pages! So new data could be loaded at runtime. Also the server side code to be updated from time to time

[@HarshDivecha_FTR]

AMAZING !!!

[@ashutoshsingh8867]

Awesome❤

[@anuroop748]

excellent !!!

[@amirnoorani5017]

Sam is awesome

[@prabeshregmi3372]

Sam Selikoff: Improving learning experience

[@manoj-k]

My favourite man is here

[@GurpreetSingh-zn1fd]

Super!

[@anhvuuc8693]

Please do more video Thank you

[@songokussj4cz]

So goood! Such learn... 🙂 Maybe a stupid question though. 22:30 - what if I change something in my DB, for example year of LoTR from 2001 to 2002. Will this update or I have to rebuild the next.js app again (or if I add a new movie)

[@AhmadAbdulSamad]

liked the start music

[@danielf4438]

Very good video, the pacing is perfect. How can I setup the hot reload you are using, the get instant feedback on localhost?

[@ifeanachofavour409]

This is awesome stuff you guys have done. Just a question for Sam concerning layout. How do I create protected layouts, such that, the layout at the root level of my project doesn't show on a protected page/route(using middleware for protected routes). Looking forward to a reply. Thanks

[@creatorsremose]

Really great developments, thank you! Though I am a little concerned about how hideous was that "loading" flicker every time you navigated to Movies. It's fine when you land on that page, but navigating to it (for my standards, at least) will require a much more elegant solution than that.

[@CoryTheSimmons]

Simple enough. Have the loading component return null unless it's been 200ms or something, in which case, show a skeleton loader. That way you're not flashing it for every little thing, but when things actually are taking 1s+ to load, people will get some sort of feedback.

[@whoIsDeck]

That's Sam!

[@codex6634]

Sam, thanks for you great presentation. Could you share this example with us?

[@lutif1415]

awesome video. qq: why not const for all those variable you are never going to update, why use let?

[@ogunmokunademola7292]

This is cool. Do you have a personal KZbin channel. I love how you explain stuffs

[@AndersGustafsson87]

yes he does and yes its great: kzbin.info

[@ogunmokunademola7292]

@@AndersGustafsson87 Thank you..

[@binusegoogle]

Need typescript ver 😢 But helpful content anyway. Thank you very much 🥰🥰

[@neociber24]

It's a really simple example, I don't think you need to worry about TS, it doesn't change that much

[@sayandcode]

Sick

[@luisllaboj]

How can I open that little window at the top when you select something you wanna wrap in the JSX?

[@drakongames5417]

how are you using those commands(11:41) without going to network tab. whats the shortcut bring out run and enter command there

[@basics-school]

so much details in this talk but while I use segment it with group route i get the segment as (auth) like this so how can i set the active state in this scenerio

[@indianappguy]

please share the github link to this project so we can see the version of different package i am stuck

[@thrivingcreator]

Question: Around 6:45, after you get the client-component setup (via 'use client') we see that the console.log(href) prints each route *twice* in the Chrome dev tools for each page refresh. Why twice?

[@devjunioralves]

This is because React 18, with strict mode enable.

[@wchorski]

Is there a difference for using useSelectedLayoutSegment vs useRouter and reading the url?

[@mastan419]

❤

[@hakuna_matata_hakuna]

loading page is cute but a progress bar on the top is better , youtube , github it just looks so good without subjecting people to page wide loading spinners

[@fram007]

Hi, Sam two issues: 1. when I use in nav-link.tsx: "let segment = useSelectedLayoutSegment();" I get " No selected layout segment below the current level" 2. When i use "import { experimental_use as use } from "react";" I get "react__WEBPACK_IMPORTED_MODULE_1__.experimental_use) is not a function"

[@samselikoff]

Any chance you can share a reproduction? I'd be happy to take a look!

[@ray-lee]

you can just import use with "import { use } from "react"

[@fram007]

@@ray-lee tk! this solve the second problem!

[@9662Mario]

For the first issue, like at me, the error presents when "segment" in on "/". If you look at /movies it work fine.

[@killerdroid99]

I am having the exact same issue

[@strato1986]

This is great but im wondering how to bring back the context tree from _app.tsx (for ui and auth providers)

[@strato1986]

@@jeremytenjo great! Thank you very much for taking the time to answer

[@jbjiostore626]

I am facing trouble when using redux with next js app directory

[@RandomMcLain]

How is the Loading component being used while fetching? NextJs picked it up automatically?

[@kakun7238]

yes

[@ayoubahabchane]

"loading" is a special file name that NextJs recognizes. If you supply nextJs with a file named "loading" inside a certain folder/segment, NextJs will use that file/component as the loading placeholder for that particular segment.

[@eyotajr]

generatestaticparams what happen if from the api the content has been updated ?

[@neil_from_future]

Anyone know how to use UI Components for app folder new version ?

[@TrackingAcademy]

Ou, great thing! I tried using the same files, and experimental_use is throwing an error as its not a function of react on movies/page.js

[@amarkwong6221]

Same issue, change the react version in package.json to "experimental", but still fail

[@amarkwong6221]

I think it is due to the fact I was using typescript and the @types/react is not exporting this hook.

[@mistertemplate9196]

what about api folder? Will it be supported also in the future?

[@neociber24]

It didn't go away, you can use it as always

[@khashe]

Will be supported in the future when they find a good solution for it they said.

[@joaobibiano]

Why the server was hitted so many times during the build ? Is this a bug?

[@samselikoff]

This was due to me using an early version of Next 13 when coding the demo

[@AuxiliaryOfficial]

i think i still like the old way

[@uziboozy4540]

Mom: we have Remix at home Remix at home: Next 13

[@raajnadar]

App layout is stable in Next Js 13.4

[@mdmathewdc]

I think this video is a bit outdated, we can simply use await inside a Server component, use hook is only required in Client components.

[@mayank1513]

Hey hi. What shortcuts u used for changing the throttling

[@samselikoff]

Sorry what do you mean by throttling?

[@mayank1513]

@@samselikoff Network speed throttling/reducing

[@samselikoff]

@@mayank1513 Ah!  + Shift + P to bring up the command palette, then "Go online", "Enable fast 3G throttling", and "Enable slow 3G throttling".

[@ThugLifeModafocah]

I'm here for the third time watching this. Everytime I had different feelings about it. First I was amazed, then I got worried, now I'm not so sure. Like, it was your responsibility to know how/when/where in the flow you should call a loader, now it is like magic... It can just bind you too much to the tool making you not much interchangeable to others tools and the market. I don't know, maybe I'm talking 🐄💩 but as awesome these changes are, they seems dangerous too.

[@inasuma8180]

anyone else weirded out by how many rerenders happen on the client when navigating between pages. monka

[@ahmedabbas3981]

Pls share the git hub link of that code.

[@majidtaei4251]

Hello, can you update this tutorial...it has changed now

[@othmaneaoubid6896]

useSelectedLayoutSegment not working :p

[@laughAFrame]

Found nextjs.13 very buggy with MUI cos it took to much time to compile things and is using to many modules on compilation.

[@sK4hsCz]

Is someone else getting false on index route "/"?

[@orangeclayproductions160]

Noob here. Where are your .next and node_modules folders? My project looks nothing like this to start

[@samselikoff]

I use the Files: Exclude setting in VSCode to ignore everything in my .gitignore file from the tree explorer.

[@milantiwari12]

Is api folder gone for good?

[@samselikoff]

Nope but it's not supported under /app yet. They're working on it but for now you can still use /pages/api.

[@freespeech515]

i am new. how do you get browser window in visual code

[@lmlTimolml]

It's not really in VS-Code, its just sorted on left/right side on the monitor Ithink :)