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