Sam Selikoff: Improving developer and user experience with nested layouts in Next.js
Вставка
- Опубліковано 9 лют 2025
- 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
So many concepts understood in one video. Awesome! Thank you Sam
and in just 23minutes... damn
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.
are we still talking about youtube videos or
@@swyxTV _sorry children_
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!!
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 :)
I never knew you could do that either lol
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.
It's an absolute joy to learn a framework this way.
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!
how are you using those commands(11:41) without going to network tab. whats the shortcut bring out run and enter command there
Great video Sam. A lot of concepts inside one video and hands-on examples. congratz
Such a great talk! Thanks Sam, can't imagine making this content easier to understand
I was to start a new project downloaded next-12 yesterday Now switching to next-13. Very well explained video Thanks Sam.
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!
just wow video. so many good things I learnt from just a single video. great way to teach
am i watching a vscode masterclass or a layouts demo
Vim masterclass
Both. Lol
You were an awesome presenter, thanks enjoyed the video.
Wonderful way to explain. Next 13 has many features that reduced the doubts I had to understand ssr or csr. Thank you very much!
I am happy to watch you on Vercel channel.
woah cool to see Bradley Cooper giving explanations about next 13 🙏
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.
You got it! Love seeing more and more of the best patterns making their way into Next.js 🙂
The segment from useSelectedLayoutSegment is just awesome :)
Love Sam's teaching style
Easily the best conf talk ... nicely done!
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 :)
Wow, the new features seem amazing...Thank you
WOW that was a quick but very concrete explanation, thank you.
Very professional and crisp. Thanks SAM!
please share the github link to this project so we can see the version of different package i am stuck
well explained. anyone else excited by these new features?
so well explained and enjoyable to watch🔥
Wow! This video is excellent! Layout was daunting to me until I watched this video. That is very well explained! Thank you so much
Thank you for the clear explanation. I can't wait to use nextjs 13 in my new projects.
This video is absolutely amazing.
I am facing trouble when using redux with next js app directory
Thank you for such a valuable video 👏
Very clear and informative video. I would like too see more examples
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
Great video. Explained new concepts like piece of cake :)
Amazing explanation 🔥🔥 Nextjs forever 🔥🔥
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)
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
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
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"
Any chance you can share a reproduction? I'd be happy to take a look!
you can just import use with "import { use } from "react"
@@ray-lee tk! this solve the second problem!
For the first issue, like at me, the error presents when "segment" in on "/". If you look at /movies it work fine.
I am having the exact same issue
Banger as always
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?
This is because React 18, with strict mode enable.
How can I open that little window at the top when you select something you wanna wrap in the JSX?
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.
Very good video, the pacing is perfect. How can I setup the hot reload you are using, the get instant feedback on localhost?
great talk Sam!
Is there a difference for using useSelectedLayoutSegment vs useRouter and reading the url?
Great video !
Sam Selikoff: Improving learning experience
This is very useful.
Holy cow ! Awesome thx for the video
Sam is the best!
Thanks! very nice explanation (as always)...
awesome video. qq: why not const for all those variable you are never going to update, why use let?
generatestaticparams what happen if from the api the content has been updated ?
This is great but im wondering how to bring back the context tree from _app.tsx (for ui and auth providers)
@@jeremytenjo great! Thank you very much for taking the time to answer
So helpful thank you so much
I the love the way you are explain things, great. pls also explain with auth and global state.
Anyone know how to use UI Components for app folder new version ?
I’ve been looking for this
AMAZING !!!
Love the new routing system, migrate api routing too pls 🙏
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
Same issue, change the react version in package.json to "experimental", but still fail
I think it is due to the fact I was using typescript and the @types/react is not exporting this hook.
useSelectedLayoutSegment not working :p
Sam is awesome
Hey hi.
What shortcuts u used for changing the throttling
Sorry what do you mean by throttling?
@@samselikoff Network speed throttling/reducing
@@mayank1513 Ah! + Shift + P to bring up the command palette, then "Go online", "Enable fast 3G throttling", and "Enable slow 3G throttling".
My favourite man is here
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.
Fantastic!
really good video
liked the start music
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
i am new. how do you get browser window in visual code
It's not really in VS-Code, its just sorted on left/right side on the monitor Ithink :)
How is the Loading component being used while fetching? NextJs picked it up automatically?
yes
"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.
Pls share the git hub link of that code.
what about api folder? Will it be supported also in the future?
It didn't go away, you can use it as always
Will be supported in the future when they find a good solution for it they said.
Noob here. Where are your .next and node_modules folders? My project looks nothing like this to start
I use the Files: Exclude setting in VSCode to ignore everything in my .gitignore file from the tree explorer.
Sam, thanks for you great presentation. Could you share this example with us?
excellent !!!
Hello, can you update this tutorial...it has changed now
Awesome❤
Super!
11:41 how to do that ?
+Shift+P to bring up the DevTools command palette
Found nextjs.13 very buggy with MUI cos it took to much time to compile things and is using to many modules on compilation.
Why the server was hitted so many times during the build ? Is this a bug?
This was due to me using an early version of Next 13 when coding the demo
This is cool. Do you have a personal UA-cam channel. I love how you explain stuffs
yes he does and yes its great: ua-cam.com/users/SamSelikoff
@@AndersGustafsson87 Thank you..
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.
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.
App layout is stable in Next Js 13.4
anyone else weirded out by how many rerenders happen on the client when navigating between pages. monka
That's Sam!
Is it me or is the data being fetched multiple times at build time?
I saw that too and immediately thought of React Strict Mode. I'm not sure though if that has any relation.
beta.nextjs.org/docs/data-fetching/caching
@@VercelHQ Im not sure how "caching" is relevant here, when "/id" was visited after build, it suppose to act like a "serverSideProps", why call the server 3 times?
I think this was mostly due to an early release of Next 13 I was on when I coded the demo.
Is someone else getting false on index route "/"?
Sick
Please do more video Thank you
Is api folder gone for good?
Nope but it's not supported under /app yet. They're working on it but for now you can still use /pages/api.
i think i still like the old way
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.
Need typescript ver 😢 But helpful content anyway. Thank you very much 🥰🥰
It's a really simple example, I don't think you need to worry about TS, it doesn't change that much