NextJS Tutorial - All 12 Concepts You Need to Know
Вставка
- Опубліковано 15 тра 2024
- Learn Next.js quickly...
Also check out Hostinger's Black Friday deal at hostinger.com/bytegrad with discount code BYTEGRAD
Full transparency: I get a commission if you buy something from Hostinger through that link. VPS-hosting for Next.js apps can be a good option if you are already familiar with server / VPS setup.
Hi, I'm Wesley. I'm a brand ambassador for Kinde.
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
All commands for deploying: gist.github.com/ByteGrad/7904...
⏱️ Timestamps:
0:00 Intro
0:29 Next.js fresh install
2:33 Routing & navigation
5:00 Metadata
5:24 Styling: Tailwind CSS
6:28 Hostinger's Black Friday deal
7:35 Image component
9:06 Client vs Server components
11:54 Server actions
16:55 Suspense and streaming
21:11 Caching, static & dynamic rendering
28:28 Middleware
29:37 Folder structure
31:43 Relax
32:10 Static export
33:10 Deployment options
33:36 Push to GitHub
33:52 Environment variables in Next.js
35:50 Hostinger VPS deployment
#webdevelopment #programming #coding
Great as always, loved the mini deploy tutorial at the end.
Love your editing - very compact and to the point without any time wasting.
I’m following your channel from last 6 months, and honestly speaking content quality improved so well.
Was watching some tutorials from other channels and was having trouble processing it all. I was starting to think I was the problem, but then I came to this vid and it all makes perfect sense. Subscribed
I am at the half of the video yet, and as a beginner, I learned more than all tutorials I watched combined so far. The I was really super confused and struggling with the new concepts and NextJS. A bird's eye-view from someone who really knows his stuff is enlightening. Thank you !
CLEAR. DIRECT. OBJECTIVE. EXCELLENT. Wish every web dev tutorial on the Internet was like this!
I just LOVE the pace and editing here. As someone who is familiar with other frameworks it is very refreshing to not hear any boring old stuff but only what's essential and important.
Surely the video is not accessible to beginners, but not every video has to be.
I also noticed a lot of similarities with SvelteKit by the way.
Best NextJS tutorial ever. Congrats, you've explained the basics and the simple way. Helped a lot!
came here to kickstart my nextjs learning path, you taught more than that, I loved the hosting part, you explained very well.
I just loved your explanation 😍😍😍😍
OMG Man ! I am in love with this video. It helps me to revise all next JS concepts within an hour what an amazing explanation from you.
This is legit the best A-Z Next.js tutorial out there, thank you
This is really nice for someone liike me that couldn't practice Next.Js for the last months, having a quick review of essential concepts to know from NextJS. Thank you very much!
best tutorial i've ever watched for anything code related. very well done thank you
YES , YEEEES!! i was waiting for you to make a video about NextJS before i start it , thank you !
Wow. Just wow. Seldom seen such a concise and clear video.
Information like this is most often contained within 10x of the video size.
Beautiful!
I am so looking forward to checking out your upcoming Next.js tutorial.
Hey Man your tutorials are so explicative , clear and concise! Probably I wouldn't have followed you when I first started programming, but know with experience I can follow along easily and your method is spot on! ❤
So thankful; Posted at the exact moment I needed it.
I only got half way through the video and bought your course. Very well explained and the ability to demonstrate these concepts on top of just talking about them is awesome.
Awesome, thanks! 👍
I'm kind of a beginner who knows only basic React and still I enjoyed this video so so much!
I just came across this channel and its definitely making my life easy getting started with Next JS
This is great value. Thanks for the effort and effective communication
It's funny I've heard people say, "Tailwind eliminates the need for coming up with class names." Before, that didn't seem like a big deal, but it actually 'clicked' when watching this video. The mental energy that goes into coming up with good, consistent class names is no small thing, not to mention maintaining greater consistency in CSS across projects. Makes sense to save the creativity for when it's needed, thanks.
i feel like it takes more effort to look up tailwind css syntax than thinking of a classname...
For me it took about 2 weeks to learn all the tailwind classnames. Now I feel like I will never go back to vanilla css
once you start using it you will not ever want to go back
I'm addicted to your videos 😅, keep making them as I need daily multiple doses of them❤
This guy is one of the very few best devs on nextjs I have ever seen with really clear delivery and the background on the topics. completely the opposite of indian toturials.
keep up the great work.
Wow, this is really nice overview! Thanks!
Eagerly awaiting your next course!
I'm amazed how clear you make your topics. Thank you for very informative videos
Clear and understandable, just like all your other videos... keep up and tank you !
Appreciated the last deployment part. Thank you 🙏
From dev to production. Good tutorial.
Your tutorials are so amazing and helping a lot ... Thanks
thanks man. just starting with nextjs and react so this is great.
If I want to learn any front-end technique now, I first come to see if you have any videos. Your tutorials are perfect for me. It’s great.
Happy to hear that!
it is short, straight and educative
loved it
thank you❤
Nice explained core concepts. Thanks for the tutorial. Nice format!
wow that was anmazing tutorial, both next js stuff and how to deploy thing on server. Thanks a lot. subscribed !!
I thoroughly enjoyed this, superb quality
You just delivered the holy grail I was looking for, Thanks a lot!!
Thank you very much sir. All of your lectures are amazing!!!
Your NextJs videos has a lot more views than others!
It would be amazing if you could also make a tutorial on how to use supabase sso with it. I am a little lost and I like that you explain important points.
I don't often comment tutorial or any UA-cam video but this Next.js tutorial video's quality is very high from A to Z. Thank you so much. You are amazing !!!
Glad it helped!
Wonderful overview! Thank you!! 🎉
Awesome video with great examples and clear explanation!
I like it! short and compact knowledge shared. Thank you
after watching so many videos of NextJs I found you just finished the video I can say All Clear
Waoh.... It's such a quality tutorial... I am literally unable to not understand almost "EVERYTHING" about NextJS.... +1 sub 😂💪
I wish you could make another video covering app router versus pages router, focusing on their folder structure. thx for the very clear explanation😁
Great Explaination man, on point.
Great share , thank you for another good video as always
I needed to pause this video to find out the genius behind it. I love this tutorial and I am definitely getting your course.
Awesome, thanks! :)
DUDE, this content is SAVAGE, respect ++ subscribed
After watching for a few seconds I double checked my player speed settings. literally you're very smooth and conveying 100%.
thx for good explanations!👍
im excited about the react next course
the video i was looking for. Simple !
I need this new next's course!!
best video on nextjs thanks BytGrad
This is very very good video with very detailed and very clear on each and everything you try to share with us❤.
Thank so much for your efforts
The caching explanation was 👌🏼
Wow, awesome video, thanks !
Bro you are the goat of NextJs
My God I absolutely love your channel!
This is an awesome course. Thanks
The best kind of tutorial
Thanks for this nice post.
best explanation i have ever witnessed
Useful video. Thanks
Thanks so much!!!!!! Pretty great video!
This video is awesome! Thank you
This is just amazing.
i was impatiently waiting for youir next video (no pun intended ) amazing as always
Haha great!
Love it 😊
Great video, how can you perform more than one crud operation on the use optimistic?
This could easily be an excellent six-hour Udemy course. Perhaps it's recency bias, but this is the best crash course I have ever seen. And i say that as an expert because for a long time, I've only watched crash courses :P
Nice video thanks for your work ❤
Great NextJs overview 🎉 One question tho: In 32:37 What’s the name of your intellicence? The VS Code extension that suggests the code autocompletion?
Thank you
You sir are awesome.
great content !! thankyou
Thank you.
Finally!! Thanks
such a great video!
definitely put this into bookmarks
thanks alot you are super teacher
Can you make more nextjs beginners video, where you teach us stuff, am a frontend dev student. and I really want to become good
Thanks for the interesting video! Quick question regarding the Image component and pulling images from an API. Thing is, I don't have the image dimensions upfront. Any ideas on how to deal with the width prop requirement? Should I chat up the backend team to add width and height to the API response, or is there a workaround you'd suggest?
One week until the course drops!!
Get ready! 👍 :)
thank you, so much better than the docs
Very usefull ! Thanks a lot
Excellent 👍👍!
My english is not perfect so I had to slow down video till 0.75 :) To understand everything. Great tutorial.
this is really awesome, thank you ... any chance you could make the code public?
Thank you so much for this video, although I'm still a bit confused about the caching, if you didn't talk about it and someone new to nextJs 13 eventually build the app and he finds that the dev mode and build mode are different, it can cause someone to run mad
U have very pretty diction and Your language is very clear.Its soo important for people from other countries . greetings
what a banger tutorial
Please make a video on CRUD APPLICATION using latest next 14 and tailwind css. Love from India 🇮🇳❤
My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.
Can't wait :D Thank you for the great content you provide us with.
Will the nextjs course be Next 14?
@@kevinnguyen238 Yes, all the latest and greatest is in there :)
what a smart man!
Can we use react-query or useSWR with server actions? Can server actions be used without a form?
Is PM2 not needed? Also making the website or webapp HTTPS would be cool to see or setting up a basic firewall there. I know I could look for it elsewhere, but you are one of the best. I learn fast and clear with you.
Yeah you can make that much more sophisticated
This video is amazing