the most important Next.js features to learn (in 8 minutes)
HTML-код
- Опубликовано: 28 сен 2024
- Become a YT Members to get extra perks!
/ @webdevcody
My Products
🏗️ WDC StarterKit: wdcstarterkit.com
📖 ProjectPlannerAI: projectplanner...
🤖 IconGeneratorAI: icongeneratora...
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.web...
📁 GitHub: github.com/web...
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
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 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.
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
Me watching you do things I do every single day: 👁️👄👁️
These short type of videos are really good, keep at them!
this is the type of content that developers with knowledge on a different framework/library need in order to learn Nextjs quickly. Thanks
This made my day
🤣 my first membership video with 10 minute pre-release access
First 10 seconds made me watch whole video 🤣
love your content, quick and simple, you're the best, Cody !
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 😂
I love this. Please more of this type of super fast digestible video.
This is great! I already know this stuff, but having content that summarizes all of it really well helps me a lot!
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 .
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)
the value that you gave us is just amazing
The algo needs to step up its game. this should be the first video when anyone looks for "Next JS"
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
Hello, thanks for your content! Whats the extension to make the keys has sound?
Love this concise way of teaching. Great content. 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
Quick and sweet
Keep going brother
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
Great video, loved the format!
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. 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."
What keyboard r u using??? Sounds great
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.
Love your videos. What VSCode Theme do you use ?
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
Really good content. I appreciate it. It is very helpful. What VSCode theme are you using? I like it a lot :)
Great video!! Keep these videos coming.
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?
Good content! perfect pace 👍
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 ?
Great stuff, picked up a few tips, twice as long please!
love your vids dude keep them coming
which better ? iam using react hook form to handle form submission and i am using function in server action file!
Thank you for this!
Which theme he is using ?
Bearded theme stained blue
What keyboard do you use ?
klack.app
Love this channel! Does anyone know of some other good channels in a similar space? In particular those that focus on SaaS development and walk through the day-to-day and technical details of running one.
Excellent video
The first step should absolutely be to read the docs😊
Thanks
Great video.
amazing video, thanks a lot), but can you do it a little bit more slowly, its hard to keep up :)
Yeah good feedback
SUPER
Excellent 👍
Awesome
That keyboard sounds creamy af, mind showing us?
Klack app
Nice
Copilot can't keep up with this man. Wow!
Amount of gotchas is crazy.
Spam the enter key 😂
after watching feels like sveltekit is way more better ....like way moreeeee
Why do people like magic? Routing that happens automatically based on folder structure, saves you like 5 seconds of typing it in an explicit router file, and causes hours of problems down the line when you need to do something more complex. This idea of specifying parameters by creating an empty folder is some stupid shit. Anyone who uses this must surrender their understanding of what is going on at the door. Having no mental model for what's happening makes this a world of pain as you start using it deeply. The web has always been terrible and it looks like it's committed to being terrible until it gets replaced entirely. Glad I haven't had to do web dev in 4 years.. Mobile app development isn't great, but it's better than this.
It’s not bad
its just horrendous, no thanks 😂😂, next feels pretty "hacky" tbh! and i dont like it!
What are you using instead?
just drink the koolaid
No one cares about what you like
Yeah server actions' DX is horrendous, I have to create like 3 separate files just for a single form
Using an express API will take you more than 3 files + the react code ...
what do you even eat bro
What?
First to comment 😂❤
DO NOT tell me what to do!
First
1st don't read the docs 😂
uses npm in a speedrun 🙄
🤫
That's irrelevant
More short form teaching g 🫡
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.
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
who else is loving hearing the keystrokes
Wonder what keyboard/switches are those
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.
Appreciate the compressed flow to this upload.
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
What's the name of the plugin which shows you error prompt next to the line where that error occured?
Error lens
Awesome! Yes please, more of these compact learn next.js features. It's simple, fast and concise, great to focus and retain information.
Kind of disappointing to see how much overhead there is just to do something this simple to be honest. Good video regardless!
I do agree to some extent. On any real project, you'll end up having a or which you use on all your forms, so that isn't something you have to reimplement for the spinner. There are other ways you can abstract forms to have it show a success notification after submit and clear out the forms as well.
The one thing I hate most about RSC is it forces me to make new files just to achieve something. I wish they would figure out a way to not require 'use client' because then I could keep everything in the same file.
As your project grows, the relative overhead reduces due to the use of reusable components. If you were building a small project that just needed a couple of forms, then a meta framework such as Next JS is probably OTT.
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.
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 one single video solved a lots of mysteries of myself, thanks a bunch
the fact that I have to extract out buttons for pending hook to work is such a pain my god
bro the keyboard sounds so good.
what is the "2o" "148k" etc.. in Nextjs Developer Tools browser extension? How to enable it on my website
im becoming a next js addict .. its getting out of my hand .. this stuff is good
I wish nextjs learned how to do page transition
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? Sounds amazing.
coming from react, this feels like a different language to me
this tutorial is amazing
I honestly despise adding an external value to the action, I just use a hidden input with the name and just get the value from the form data.
Yeah that works as well
This is ace and makes me depressed that I use angular at work lol
Also what keyboard do you use? Sounds amazing!
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.
this was amazing keep it up bro, i feel like i just upgraded from next.js 13 > 14
that (global as any).user gave me a headache!
@WebDevCody can you explain that ive tried to understand that but only found out about globalThis! what does (global as any) mean? and why isnt it a const or let or var?
Theme?
Bearded theme stain blue
Which theme is this??
Bearded theme stained blue
@@WebDevCody thanks
Don't read the docs is the worst advice someone could give a developer.
Learning sarcasm is the best skill you can do
@@WebDevCody Yes.
What keyboard are you using?
this was one of the concise video regarding nextjs's actions with good practices
clarity helps memorisation
thank you!
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
what is your keyboard model?
Klack.app cream switches
@@WebDevCody thank you.
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.
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😅
Great video!!