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.
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.
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 :)
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.
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
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
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.
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
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"
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?
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
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.
"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.
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.
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_
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
It's an absolute joy to learn a framework this way.
am i watching a vscode masterclass or a layouts demo
Vim masterclass
Both. 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.
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!!
I was to start a new project downloaded next-12 yesterday Now switching to next-13. Very well explained video Thanks Sam.
woah cool to see Bradley Cooper giving explanations about next 13 🙏
Love Sam's teaching style
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!
I am happy to watch you on Vercel channel.
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!
Wonderful way to explain. Next 13 has many features that reduced the doubts I had to understand ssr or csr. Thank you very much!
Such a great talk! Thanks Sam, can't imagine making this content easier to understand
The segment from useSelectedLayoutSegment is just awesome :)
Great video Sam. A lot of concepts inside one video and hands-on examples. congratz
just wow video. so many good things I learnt from just a single video. great way to teach
well explained. anyone else excited by these new features?
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 :)
You were an awesome presenter, thanks enjoyed the video.
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 🙂
WOW that was a quick but very concrete explanation, thank you.
Very professional and crisp. Thanks SAM!
Wow, the new features seem amazing...Thank you
how are you using those commands(11:41) without going to network tab. whats the shortcut bring out run and enter command there
Very clear and informative video. I would like too see more examples
Thank you for the clear explanation. I can't wait to use nextjs 13 in my new projects.
This video is absolutely amazing.
please share the github link to this project so we can see the version of different package i am stuck
Sam Selikoff: Improving learning experience
so well explained and enjoyable to watch🔥
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
Thank you for such a valuable video 👏
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
Wow! This video is excellent! Layout was daunting to me until I watched this video. That is very well explained! Thank you so much
I am facing trouble when using redux with next js app directory
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.
Amazing explanation 🔥🔥 Nextjs forever 🔥🔥
Very good video, the pacing is perfect. How can I setup the hot reload you are using, the get instant feedback on localhost?
Banger as always
great talk Sam!
Sam is awesome
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)
Great video !
Sam is the best!
liked the start music
awesome video. qq: why not const for all those variable you are never going to update, why use let?
My favourite man is here
Love the new routing system, migrate api routing too pls 🙏
So helpful thank you so much
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.
AMAZING !!!
This is very useful.
Holy cow ! Awesome thx for the video
Is there a difference for using useSelectedLayoutSegment vs useRouter and reading the url?
Great video. Explained new concepts like piece of cake :)
Sam, thanks for you great presentation. Could you share this example with us?
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
Fantastic!
How can I open that little window at the top when you select something you wanna wrap in the JSX?
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
Super!
I the love the way you are explain things, great. pls also explain with auth and global state.
I’ve been looking for this
excellent !!!
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
really good video
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.
Thanks! very nice explanation (as always)...
useSelectedLayoutSegment not working :p
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
App layout is stable in Next Js 13.4
generatestaticparams what happen if from the api the content has been updated ?
Sick
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.
Awesome❤
Anyone know how to use UI Components for app folder new version ?
That's Sam!
Mom: we have Remix at home
Remix at home: Next 13
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.
This is cool. Do you have a personal RUclips channel. I love how you explain stuffs
yes he does and yes its great: ruclips.net/user/SamSelikoff
@@AndersGustafsson87 Thank you..
❤
Please do more video Thank you
Hello, can you update this tutorial...it has changed now
Pls share the git hub link of that code.
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".
i think i still like the old way
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
Found nextjs.13 very buggy with MUI cos it took to much time to compile things and is using to many modules on compilation.
anyone else weirded out by how many rerenders happen on the client when navigating between pages. monka
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.
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
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 :)
Is someone else getting false on index route "/"?
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.
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.
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.
11:41 how to do that ?
+Shift+P to bring up the DevTools command palette