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.
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.
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.
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 😂
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
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 .
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.
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.
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)
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.
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
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?
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
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?
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.
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. ruclips.net/video/LkDelp5WWYU/видео.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."
@@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.
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
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.
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
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
1 hour worth content resumed in less than 10 minutes, thanks Cody!!!
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 huge time saving man, please upload these type of videos so that one can skim through whenever we forget things 😅
Coming from like 2 beginner NextJS tutorials, this has some how taught me more then 4 hours of RUclips
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 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.
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!
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 !
Appreciate the compressed flow to this upload.
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...
Me watching you do things I do every single day: 👁️👄👁️
this is the type of content that developers with knowledge on a different framework/library need in order to learn Nextjs quickly. Thanks
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 great! I already know this stuff, but having content that summarizes all of it really well helps me a lot!
Only thing more satisfying than this video was the clackity-clack of that smooth as butter keyboard
this was one of the concise video regarding nextjs's actions with good practices
clarity helps memorisation
thank you!
This one single video solved a lots of mysteries of myself, thanks a bunch
I love this. Please more of this type of super fast digestible video.
the value that you gave us is just amazing
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)
Glad I found your channel. Thanks for the great content!
Thanks, just what I was looking for to understand how build classic CRUD thing in Next.js
this was amazing keep it up bro, i feel like i just upgraded from next.js 13 > 14
This made my day
🤣 my first membership video with 10 minute pre-release access
What's the name of the plugin which shows you error prompt next to the line where that error occured?
Error lens
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 😂
Quick and simple content to learn or refresh knowledge. Great teacher 🙂
That was the best intro ever 😂 thank you
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
Great video! I love working with Nuxt
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 .
Love this concise way of teaching. Great content. Thank you.
What keyboard r u using??? Sounds great
Hello, thanks for your content! Whats the extension to make the keys has sound?
Thanks, easy to understand. Do one with Nuxt or Svelte
Great video, huge benefit. Thank you.
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
Great video, loved the format!
Quick and sweet
Keep going brother
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.
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.
Really great and informative video! Love to see more like this.
+1 for this format of video!
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!
What’s the vscode color scheme in the tumbnail anyone know ?
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
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
This is very complicated to just be able to submit and get basic data
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
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
At the end when you are resetting form ref in render that is not best practice imho, because it is side effect during render.
bro the keyboard sounds so good.
Great video!! Keep these videos coming.
what is the "2o" "148k" etc.. in Nextjs Developer Tools browser extension? How to enable it on my website
What theme are you using?
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
Looks like we don't need tanstack's react-query anymore?
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?
which better ? iam using react hook form to handle form submission and i am using function in server action file!
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.
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
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
Currently have a next 12 side project, ive been avoiding upgrading next to all this app and “use server” stuff.
Good content! perfect pace 👍
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. ruclips.net/video/LkDelp5WWYU/видео.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."
Cody, what do you think, are the concerns regarding deployment issues for Next.js justified?
Love your videos. What VSCode Theme do you use ?
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 ?
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
im becoming a next js addict .. its getting out of my hand .. this stuff is good
what is your keyboard? Sounds amazing.
love your vids dude keep them coming
Really good content. I appreciate it. It is very helpful. What VSCode theme are you using? I like it a lot :)
This is ace and makes me depressed that I use angular at work lol
Also what keyboard do you use? Sounds amazing!
Great stuff, picked up a few tips, twice as long please!
The algo needs to step up its game. this should be the first video when anyone looks for "Next JS"
that was actually fast, awesome
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!
what is your keyboard model?
Klack.app cream switches
@@WebDevCody thank you.
this tutorial is amazing
What keyboard are you using?
Thank you for this!
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?
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.
What keyboard do you use ?
klack.app
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😅
Which theme he is using ?
Bearded theme stained blue
Theme?
Bearded theme stain blue
What keyboard are you using ?😂 (sounds great)
The keyboard clicks are coming from an app that simulates key press sounds.
Klack.app
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
Excellent video
who else is loving hearing the keystrokes
Wonder what keyboard/switches are those
Which theme is this??
Bearded theme stained blue
@@WebDevCody thanks
The first step should absolutely be to read the docs😊
coming from react, this feels like a different language to me
thocky keeb you got there
U like dat?
the fact that I have to extract out buttons for pending hook to work is such a pain my god
Lightening speed!