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