Little fun VSCode Explorer file creation tip: Instead of "create folder" and enter "users" then right click that and "create file" to create page.tsx, you can just select "create file" then type the full path such as "users/page.tsx" and VSCode will automatically create the folder if it doesn't already exist, as deep as you make the path.
This type of content is great. I haven't looked into Next.js for a while and this video showed me in 8 minutes something that I would have had to study for an hour from the documentation.
This is exactly how I love to learn something. Just get my hands dirty, try to make it work, make assumptions. When those assumptions don't work you learn something in a way you never forget. Obviously its not for everyone, but those who enjoy exploratory learning its the best feeling.
that was awesome, its actually way to short, you should do a playlist where you cover all the typical workflow with the best practices to follow. sorry about for the typos English is not my first language.
btw, I know y'all will call me out on that form reset hack, here is a proper solution useEffect(() => { if (state.message === "success") { formRef.current?.reset(); } }, [state]);
This is a great solution but an even better one would be to just have an if block in the render scope of the functional component you don't have to wait for the next render.
These concepts are mixed... 0:00 - Init and routing 1:03 - Data fetching via api routes 2:10 - Data storing via Server components 3:35 - form 6:26 - form status These concepts are mixed so watch the short video to get full context / clarity...
Rly enjoyed the video. Maybe it was too short (or too fast,wtv), but very useful ! Hope to see more like this explaining best practices, typical workflow, and most common things to do (already covered fetch, maybe some CRUD and state management on Next)
As somebody who has a large page router nextjs app, it’s great to get an overview of all the new stuff. Though there are so many breaking changes and issues, I probably never migrate 😂
like how you simplify the path for new developers who are coming to learn nextjs. speacially who are coming from react and don't about the difference between 'use client' and 'use server'.If I was a beginner and don't know much about nextjs this video will help me out a lot and this will let me know what the concepts should focus more about.Can you do more videos like this in the future this will help us a lot, maybe you can do a prisma video and connect it to a nextjs project .
Great job, bro! I really liked this concept of delivering information in a very short period of time. One thing I need to ask: can you also create a playlist where each video provides information and guidelines on topics ranging from creating a structure to following patterns, implementing authentication and authorization, using Next.js API routes or server actions, or custom backends like NestJS with Docker and Kubernetes, or managed services like Supabase and Convex for large-scale production applications? That would be awesome. Please note: I am talking about big production-grade applications.
Hi Cody, how would you start learning Next JS if you would decide to do it RIGHT NOW? Maybe starting from their tutorial from their website first? I see you have a course on your website as well, but it's not updated to Next JS v.15
Next 15 is not stable yet, they're waiting for react 19 to be stable, and I don't think Cody would start using next 15 right away, from what I know he prefers to wait just to be sure there are no gotchas, and I agree
I learn stuff by building small projects. So I'd just try building something, read the docs a bit, read their tutorial a bit, watch other youtubers a bit. my learning path is usually all over the place which works best for me. Exposure to as much as possible from different people is what helps shape my knowledge.
in react 19 the useFormState is named useActionState and inside it also exists a isPending that you can use instead of using the useFormState and also making the button a seperate component
This is so perfect. I shared it with my team saying "Chuck Williams, [2024-06-28 10:49] Watch this 3 times on double speed. I learned 3 very important things in the first 3 minutes.... so 1.5 minutes. ua-cam.com/video/LkDelp5WWYU/v-deo.html Chuck Williams, [2024-06-28 10:51] This is all NEXTJS capability. we get ALL of this - WITHOUT CONVEX Chuck Williams, [2024-06-28 11:10] @ Minute 1:08 - that's the page where we integrate convex."
I think you mentioned the drawback to this method one time which is that since the form validation occurs on the server, if a user has a very slow connection and they enter in a value on the form, it would take a long time to show the error. Moreover, the input validation can't be "live" in this case right? I think it would have been good to note this in the video
yeah, as I stated at the start of the video, I was aiming for 5 minutes, but got to 8. I can't talk about everything if I want to keep the video short.
Great video. When do you find yourself reaching for route handlers. Do you typically use them anytime you're fetching data from a client component? Would you ever use one to mutate data over a server action? Any gotchas I should be aware of?
@@WebDevCody thanks a lot ! I tried it when it was free (and probably not that good) and didn't find it interesting at all. Do you think it's a really good tool or just some gadget ?
@@captainnoyaux Copilot is pretty good, but it seems that there are now alternatives that are free and equally as good. There’s at least one for which you can download the LLM and run it locally.
Hey can I ask what vscode extension you are using that displays the warnings/errors inline like that as you code? (not referring to the autofill from copilot)
Cheers for the video! I am coming from remix and trying out next for the first time. I get an error when installing a fresh create-next-app on my D:/ drive when I run npm run dev? It works fine on my C:/ drive however. I think it could be a webpack issue. Have you ever ran into anything like this before?
How does something updateNameAction.bind(null, user.id) work, wouldn't the second argument of the newly bound function be a form submit event instead of formData?
It attaches the arguments to the function and returns a new function so it’s almost like it pops off the first argument of your function and already pre defines it
legit running a team right now with a bunch of interns and I redirected them to your video...I was like this is a very quick intro or a revision and then make question ask chatgpt or something figure it out and then come to me THANKS
hey quick question how are you able to make prettier format like that after a delay I tried everything it seems that if I paste something in it formats it corretly but when I change the settings to format on save it does not work
Can show the best way to handle loading when submiting data without useForm Hook. Do we use the tradional react way of defining a loading state and settting it to true and false before and after server action fn call.
how do we initialize form in next js. I'm building edit form and will need to initialize the form on first load but having trouble to do it. Can you please teach how to do that
Everyone at my work is so against this monorepo style of Next.js and we use a lot of React Native so I've been only been writing regular React, I miss it so much
Hello this is not relate to next.js at all but can you tell me the name of vscode theme that you're using please? Edit: for anyone also wondering it's bearded theme - stained blue.
Little fun VSCode Explorer file creation tip: Instead of "create folder" and enter "users" then right click that and "create file" to create page.tsx, you can just select "create file" then type the full path such as "users/page.tsx" and VSCode will automatically create the folder if it doesn't already exist, as deep as you make the path.
thanks man! I have done that before but I always forget about it
Even better just do it all with the `touch` command from the terminal :D
@@dvillegaspronah, you’ll have to cd into subfolders if it needs be, another stupid step most of the time.
@@nikmat you can just write out the full path, which is why I was mostly kidding hehe
@@dvillegasprotouch cli is not present in Windows devices by default
This type of content is great. I haven't looked into Next.js for a while and this video showed me in 8 minutes something that I would have had to study for an hour from the documentation.
1 hour worth content resumed in less than 10 minutes, thanks Cody!!!
Ya, does dude really type this fast and with no typos? 🫣
This is exactly how I love to learn something. Just get my hands dirty, try to make it work, make assumptions. When those assumptions don't work you learn something in a way you never forget.
Obviously its not for everyone, but those who enjoy exploratory learning its the best feeling.
Coming from like 2 beginner NextJS tutorials, this has some how taught me more then 4 hours of UA-cam
Probably, but your understanding is now already influenced by your other tutorials, things build up even when you still don't know what's relevant.
This is huge time saving man, please upload these type of videos so that one can skim through whenever we forget things 😅
Appreciate the compressed flow to this upload.
that was awesome, its actually way to short, you should do a playlist where you cover all the typical workflow with the best practices to follow. sorry about for the typos English is not my first language.
yeah that's a good idea
@@WebDevCody that would be amazing! you will have gave out raw experience that is very difficult to get from just browsing google
These short type of videos are really good, keep at them!
First 10 seconds made me watch whole video 🤣
love your content, quick and simple, you're the best, Cody !
Me watching you do things I do every single day: 👁️👄👁️
btw, I know y'all will call me out on that form reset hack, here is a proper solution
useEffect(() => {
if (state.message === "success") {
formRef.current?.reset();
}
}, [state]);
This is a great solution but an even better one would be to just have an if block in the render scope of the functional component you don't have to wait for the next render.
this is terrible. this is outdated code for a while now. stop propagating this nonsense!
@@micbln8967 Love it when someone complains about "propagating nonsense" and then not providing their own "superior" approach
Awesome! Yes please, more of these compact learn next.js features. It's simple, fast and concise, great to focus and retain information.
this is the type of content that developers with knowledge on a different framework/library need in order to learn Nextjs quickly. Thanks
This is great! I already know this stuff, but having content that summarizes all of it really well helps me a lot!
These concepts are mixed...
0:00 - Init and routing
1:03 - Data fetching via api routes
2:10 - Data storing via Server components
3:35 - form
6:26 - form status
These concepts are mixed so watch the short video to get full context / clarity...
This made my day
🤣 my first membership video with 10 minute pre-release access
Rly enjoyed the video. Maybe it was too short (or too fast,wtv), but very useful ! Hope to see more like this explaining best practices, typical workflow, and most common things to do (already covered fetch, maybe some CRUD and state management on Next)
As somebody who has a large page router nextjs app, it’s great to get an overview of all the new stuff. Though there are so many breaking changes and issues, I probably never migrate 😂
this was one of the concise video regarding nextjs's actions with good practices
clarity helps memorisation
thank you!
I love this. Please more of this type of super fast digestible video.
This one single video solved a lots of mysteries of myself, thanks a bunch
the value that you gave us is just amazing
like how you simplify the path for new developers who are coming to learn nextjs. speacially who are coming from react and don't about the difference between 'use client' and 'use server'.If I was a beginner and don't know much about nextjs this video will help me out a lot and this will let me know what the concepts should focus more about.Can you do more videos like this in the future this will help us a lot, maybe you can do a prisma video and connect it to a nextjs project .
this was amazing keep it up bro, i feel like i just upgraded from next.js 13 > 14
Thanks, just what I was looking for to understand how build classic CRUD thing in Next.js
Only thing more satisfying than this video was the clackity-clack of that smooth as butter keyboard
Glad I found your channel. Thanks for the great content!
Quick and simple content to learn or refresh knowledge. Great teacher 🙂
Great job, bro! I really liked this concept of delivering information in a very short period of time. One thing I need to ask: can you also create a playlist where each video provides information and guidelines on topics ranging from creating a structure to following patterns, implementing authentication and authorization, using Next.js API routes or server actions, or custom backends like NestJS with Docker and Kubernetes, or managed services like Supabase and Convex for large-scale production applications? That would be awesome.
Please note: I am talking about big production-grade applications.
If I get time yeah
@@WebDevCody supabase vid with nextjs would be great
That was the best intro ever 😂 thank you
Love this concise way of teaching. Great content. Thank you.
Great video! I love working with Nuxt
+1 for this format of video!
Thanks, easy to understand. Do one with Nuxt or Svelte
Quick and sweet
Keep going brother
Really great and informative video! Love to see more like this.
Great video, loved the format!
What keyboard r u using??? Sounds great
These small bits are really helpful! Can you also add some pagination techniques and how to handle them whence fetching records from DB/Api calls
bro the keyboard sounds so good.
Great video, huge benefit. Thank you.
Which keyboard and keys do you have? Sounds good Cody!
i don't think that is his keyboards actual sound. Most likely Mechvibes for the video.
it's a mac app called Klack.
Great video!! Keep these videos coming.
Hi Cody, how would you start learning Next JS if you would decide to do it RIGHT NOW? Maybe starting from their tutorial from their website first? I see you have a course on your website as well, but it's not updated to Next JS v.15
Next 15 is not stable yet, they're waiting for react 19 to be stable, and I don't think Cody would start using next 15 right away, from what I know he prefers to wait just to be sure there are no gotchas, and I agree
At least Next v.14, I mean the latest stable version
I learn stuff by building small projects. So I'd just try building something, read the docs a bit, read their tutorial a bit, watch other youtubers a bit. my learning path is usually all over the place which works best for me. Exposure to as much as possible from different people is what helps shape my knowledge.
@@WebDevCody Thank you sir, you’re the best youtuber for advanced React / Web Dev concepts overall. Wanted to let you know
Good content! perfect pace 👍
What's the name of the plugin which shows you error prompt next to the line where that error occured?
Error lens
This is ace and makes me depressed that I use angular at work lol
Also what keyboard do you use? Sounds amazing!
in react 19 the useFormState is named useActionState and inside it also exists a isPending that you can use instead of using the useFormState and also making the button a seperate component
Yup, but react 19 is RC still, so I’m not going to teach it
This is so perfect. I shared it with my team saying "Chuck Williams, [2024-06-28 10:49]
Watch this 3 times on double speed. I learned 3 very important things in the first 3 minutes.... so 1.5 minutes. ua-cam.com/video/LkDelp5WWYU/v-deo.html
Chuck Williams, [2024-06-28 10:51]
This is all NEXTJS capability. we get ALL of this - WITHOUT CONVEX
Chuck Williams, [2024-06-28 11:10]
@ Minute 1:08 - that's the page where we integrate convex."
I think you mentioned the drawback to this method one time which is that since the form validation occurs on the server, if a user has a very slow connection and they enter in a value on the form, it would take a long time to show the error. Moreover, the input validation can't be "live" in this case right? I think it would have been good to note this in the video
yeah, as I stated at the start of the video, I was aiming for 5 minutes, but got to 8. I can't talk about everything if I want to keep the video short.
Great video. When do you find yourself reaching for route handlers. Do you typically use them anytime you're fetching data from a client component? Would you ever use one to mutate data over a server action? Any gotchas I should be aware of?
I’m not sure why you mean by reaching for route handlers
that was actually fast, awesome
Cody, what do you think, are the concerns regarding deployment issues for Next.js justified?
love your vids dude keep them coming
Thanks for the video, may I ask you what vs code theme you're using? And also what keyboard you're using?
Bearded themed stained blue and klack. App
Ok, thanks
Hello, thanks for your content! Whats the extension to make the keys has sound?
Looks like we don't need tanstack's react-query anymore?
Great stuff, picked up a few tips, twice as long please!
Thanks a lot for this video it's cool to watch ! Do you use copilot for code completion or another AI ?
yes copilot
@@WebDevCody thanks a lot ! I tried it when it was free (and probably not that good) and didn't find it interesting at all. Do you think it's a really good tool or just some gadget ?
@@captainnoyaux codium is a great free alternative to copilot
@@captainnoyaux Copilot is pretty good, but it seems that there are now alternatives that are free and equally as good. There’s at least one for which you can download the LLM and run it locally.
@@Innesbwhat'd you recommend ?
Hey can I ask what vscode extension you are using that displays the warnings/errors inline like that as you code? (not referring to the autofill from copilot)
Error lens
@@WebDevCody thanks man!
im becoming a next js addict .. its getting out of my hand .. this stuff is good
The algo needs to step up its game. this should be the first video when anyone looks for "Next JS"
Currently have a next 12 side project, ive been avoiding upgrading next to all this app and “use server” stuff.
Thank you for this!
what is your keyboard? Sounds amazing.
Cheers for the video! I am coming from remix and trying out next for the first time. I get an error when installing a fresh create-next-app on my D:/ drive when I run npm run dev? It works fine on my C:/ drive however. I think it could be a webpack issue. Have you ever ran into anything like this before?
Love your videos. What VSCode Theme do you use ?
Really good content. I appreciate it. It is very helpful. What VSCode theme are you using? I like it a lot :)
Which plugin you are using for inline code error checking?
error lens
How does something updateNameAction.bind(null, user.id) work, wouldn't the second argument of the newly bound function be a form submit event instead of formData?
It attaches the arguments to the function and returns a new function so it’s almost like it pops off the first argument of your function and already pre defines it
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#partially_applied_functions
this tutorial is amazing
What the keyboard ⌨️ xD
I think the mic is tad bit too close to it ;)
Otherwise great vid!
Klack.app I can turn it down
@@WebDevCody I'd welcome that change, like 20% would be plenty!
legit running a team right now with a bunch of interns and I redirected them to your video...I was like this is a very quick intro or a revision and then make question ask chatgpt or something figure it out and then come to me
THANKS
hey quick question how are you able to make prettier format like that after a delay I tried everything it seems that if I paste something in it formats it corretly but when I change the settings to format on save it does not work
Can show the best way to handle loading when submiting data without useForm Hook. Do we use the tradional react way of defining a loading state and settting it to true and false before and after server action fn call.
Excellent video
What theme are you using?
how do we initialize form in next js. I'm building edit form and will need to initialize the form on first load but having trouble to do it. Can you please teach how to do that
who else is loving hearing the keystrokes
Wonder what keyboard/switches are those
This is very complicated to just be able to submit and get basic data
What’s the vscode color scheme in the tumbnail anyone know ?
which better ? iam using react hook form to handle form submission and i am using function in server action file!
What keyboard are you using ?😂 (sounds great)
The keyboard clicks are coming from an app that simulates key press sounds.
Klack.app
Great video!!
what is the "2o" "148k" etc.. in Nextjs Developer Tools browser extension? How to enable it on my website
What keyboard are you using?
Everyone at my work is so against this monorepo style of Next.js and we use a lot of React Native so I've been only been writing regular React, I miss it so much
everything in one project makes life simple in some aspects
Is it good or bad that the structure is still /pages and .js files?
I mean I personally would just use the app router. I also stopped using javascript a long time ago
/app router is newer than /pages router.
Never use .js instead of .ts
@@thejonte i'm a newbie dev working on a first big project. should i change everyhting away from js then? is it a safety risk?
@@WebDevCody i used then too old repo as a base :( I'm neck deep on this already, but should i start over?
Where was this video 2 weeks ago when i did a 3 day dive into this madness
As an iOS dev I dont like frontend omg, you guys are crazy string coders😅
What keyboard do you use ?
klack.app
keep em coming
thocky keeb you got there
U like dat?
Great video.
The first step should absolutely be to read the docs😊
Hello this is not relate to next.js at all but can you tell me the name of vscode theme that you're using please?
Edit: for anyone also wondering it's bearded theme - stained blue.
Which theme he is using ?
Bearded theme stained blue
Excellent 👍
the fact that I have to extract out buttons for pending hook to work is such a pain my god
Lightening speed!