NextJS Tutorial - All 12 Concepts You Need to Know

Подписаться 122 тыс.

Просмотров 218 тыс.

50% 1

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 (paid sponsorship).
👉 Add auth to your app FAST: bit.ly/3QOe1Bh
👉 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

Опубликовано:

22 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 225

@Dohzr 4 месяца назад

Love your editing - very compact and to the point without any time wasting.

@heysahilsingh 6 месяцев назад

I’m following your channel from last 6 months, and honestly speaking content quality improved so well.

@ScriptRaccoon 4 месяца назад

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.

@havanapple5009 5 месяцев назад

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

@LLikzy Месяц назад

This is legit the best A-Z Next.js tutorial out there, thank you

@airixxxx 6 месяцев назад

Great as always, loved the mini deploy tutorial at the end.

@nayanbramhane8077 5 месяцев назад

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 😍😍😍😍

@EnesKab 2 месяца назад

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 !

@AmodeusR 2 месяца назад

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!

@theleo2094 3 месяца назад

CLEAR. DIRECT. OBJECTIVE. EXCELLENT. Wish every web dev tutorial on the Internet was like this!

@MikiStec 2 месяца назад

Best NextJS tutorial ever. Congrats, you've explained the basics and the simple way. Helped a lot!

@jasonpieters 5 месяцев назад

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.

@ByteGrad 5 месяцев назад

Awesome, thanks! 👍

@amanrubey 4 месяца назад

I'm kind of a beginner who knows only basic React and still I enjoyed this video so so much!

@KulturanCov Месяц назад

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!

@shortflicks83 6 месяцев назад

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.

@_di_su 4 месяца назад

best tutorial i've ever watched for anything code related. very well done thank you

@jiayu0307 Месяц назад

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.

@ByteGrad Месяц назад

Happy to hear that!

@marvinotieno2194 3 месяца назад

I just came across this channel and its definitely making my life easy getting started with Next JS

@domenicocucinotta2720 2 месяца назад

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! ❤

@aryaamootaghi3248 6 месяцев назад

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.

@voldemortvi4264 6 месяцев назад

YES , YEEEES!! i was waiting for you to make a video about NextJS before i start it , thank you !

@MrBrady95 2 месяца назад

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.

@xXxRK0xXx 2 месяца назад

i feel like it takes more effort to look up tailwind css syntax than thinking of a classname...

@jibbish7148 Месяц назад

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

@ustav_o 29 дней назад

once you start using it you will not ever want to go back

@aryaajay 8 дней назад

I'm addicted to your videos 😅, keep making them as I need daily multiple doses of them❤

@deividasmacavariani8684 6 месяцев назад

I'm amazed how clear you make your topics. Thank you for very informative videos

@muaf8374 5 месяцев назад

From dev to production. Good tutorial.

@prosperzegue6735 2 месяца назад

I don't often comment tutorial or any RU-vid video but this Next.js tutorial video's quality is very high from A to Z. Thank you so much. You are amazing !!!

@ByteGrad 2 месяца назад

Glad it helped!

@vicez_ 6 месяцев назад

So thankful; Posted at the exact moment I needed it.

@TheLondekZdroj 6 месяцев назад

I am so looking forward to checking out your upcoming Next.js tutorial.

6 месяцев назад

Wow, this is really nice overview! Thanks!

@mabillama 6 месяцев назад

This is great value. Thanks for the effort and effective communication

@AlirezaGarshasbi-kr1on 4 месяца назад

it is short, straight and educative loved it thank you❤

@looming_ 6 месяцев назад

Eagerly awaiting your next course!

@JeanDidier 5 месяцев назад

Appreciated the last deployment part. Thank you 🙏

@jbundziow-pf8me Месяц назад

Nice explained core concepts. Thanks for the tutorial. Nice format!

@sahaneakanayaka3394 6 месяцев назад

Your tutorials are so amazing and helping a lot ... Thanks

@JosephMaramba 6 месяцев назад

I thoroughly enjoyed this, superb quality

@user-mp4de7iv3k 18 дней назад

wow that was anmazing tutorial, both next js stuff and how to deploy thing on server. Thanks a lot. subscribed !!

@nasssty284 6 месяцев назад

Clear and understandable, just like all your other videos... keep up and tank you !

@ianc6418 6 месяцев назад

thanks man. just starting with nextjs and react so this is great.

@MrGuitarguru95 4 месяца назад

Wonderful overview! Thank you!! 🎉

@asfandyar8088 6 месяцев назад

Thank you very much sir. All of your lectures are amazing!!!

@geianmarkdenorte9874 2 месяца назад

I like it! short and compact knowledge shared. Thank you

@mosatsoni4324 5 месяцев назад

Awesome video with great examples and clear explanation!

@Nurpie 5 месяцев назад

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.

@sagarbsable 13 дней назад

Great Explaination man, on point.

5 месяцев назад

You just delivered the holy grail I was looking for, Thanks a lot!!

@akramnarejo6221 2 месяца назад

After watching for a few seconds I double checked my player speed settings. literally you're very smooth and conveying 100%.

@khaledsanny4817 6 месяцев назад

Waoh.... It's such a quality tutorial... I am literally unable to not understand almost "EVERYTHING" about NextJS.... +1 sub 😂💪

@dovahkiin3362 6 месяцев назад

im excited about the react next course

@techlearner-hs3ft 11 дней назад

I wish you could make another video covering app router versus pages router, focusing on their folder structure. thx for the very clear explanation😁

@developerisa 22 дня назад

the video i was looking for. Simple !

@CarlosReyes-ku6ub Месяц назад

DUDE, this content is SAVAGE, respect ++ subscribed

@HunterBBQ 3 месяца назад

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

@oludamolaijimade9018 2 месяца назад

I needed to pause this video to find out the genius behind it. I love this tutorial and I am definitely getting your course.

@ByteGrad 2 месяца назад

Awesome, thanks! :)

@deepmane5845 6 месяцев назад

after watching so many videos of NextJs I found you just finished the video I can say All Clear

@diegofelipe91 6 месяцев назад

I need this new next's course!!

@captainnoyaux 5 месяцев назад

Wow, awesome video, thanks !

@joantsyn7578 14 дней назад

thx for good explanations!👍

@vanhungnguyen7543 2 месяца назад

Useful video. Thanks

@salahiddinediouri280 6 месяцев назад

Great share , thank you for another good video as always

@udaym4204 3 месяца назад

best video on nextjs thanks BytGrad

@MdNaimurRahmanHera 2 месяца назад

This is an awesome course. Thanks

@amanrubey 4 месяца назад

My God I absolutely love your channel!

@miriammulders2341 7 дней назад

I am really impressed by the quality and the conciseness of your tutorials. Everything is so well explained and to the point. As if you can read my thoughts. One question though. I haven't seen you talking about Route Handlers, in the special route files that NextJS offers. It seems an essential concept in NextJs, so why did you skip it? Will it be in your course though?

@ByteGrad 7 дней назад

Thanks! They’re in the course yes, mostly used for webhooks these days

@0xAndy 6 месяцев назад

The caching explanation was 👌🏼

@medouadjihboudraa7706 6 месяцев назад

best explanation i have ever witnessed

@youssefaserrar2001 6 месяцев назад

Bro you are the goat of NextJs

@reiniervarkevisser 6 месяцев назад

Thanks for this nice post.

@anzo.p Месяц назад

The best kind of tutorial

@KrokodilShnap 5 месяцев назад

This video is awesome! Thank you

@user-gu1lc7wl2c 6 месяцев назад

Thanks so much!!!!!! Pretty great video!

@OldemiroAmericoBaloi 2 месяца назад

This is just amazing.

@najneindustrijaliziraniji 4 месяца назад

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

@hurleywflow2227 6 месяцев назад

Love it 😊

@lidlplayer007 3 месяца назад

Nice video thanks for your work ❤

@iuashrafi 5 месяцев назад

great content !! thankyou

@prashlovessamosa 6 месяцев назад

Thank you.

@salamandr4111 5 месяцев назад

such a great video!

@alexg7282 6 месяцев назад

Very usefull ! Thanks a lot

@nogafouz2174 6 месяцев назад

thanks alot you are super teacher

@phronessys 4 месяца назад

thank you, so much better than the docs

@KevinRamirez-vw5kv 3 месяца назад

You sir are awesome.

@userre85 Месяц назад

Even sat through the sponsor segment.

@pedrofigueiredo5548 6 месяцев назад

i was impatiently waiting for youir next video (no pun intended ) amazing as always

@ByteGrad 6 месяцев назад

Haha great!

@collinsk8754 5 месяцев назад

Excellent 👍👍!

@Beardyman5617 Месяц назад

Finally!! Thanks

@gyros9162 6 месяцев назад

definitely put this into bookmarks

@rami_atallah 4 месяца назад

This video is amazing

@paweczajkowski2176 5 месяцев назад

U have very pretty diction and Your language is very clear.Its soo important for people from other countries . greetings

@nademkhan931 6 месяцев назад

Excellent

@TYTAX_HOME_GYMS 5 месяцев назад

My english is not perfect so I had to slow down video till 0.75 :) To understand everything. Great tutorial.

@georgejoseph2601 5 месяцев назад

what a banger tutorial

@jorden123 3 месяца назад

I really like your explanation about those core subjects, and I got some questions: 1. It looks like it's always going to be redundant to have the PostgreSQL commands right in the components, that's why I think a better solution would be to wrap them up in an MVC pattern with business-logics and modules. What do you think? 2. From a DevOps engineer perspective, how would you scale it? It would be much easier to scale it if we have the "server" apart from the "client" and have them communicate by REST-API. That way you can scale the server as much as you want (which is more likely to be under a heavier load than the "client"). I'm currently working on a side project that is using Next.js in the client side with some server-actions that use "REST-API" and call another server that handles the DB, implemented with MVC design-pattern. In the server side, all of my DB modules are being re-used by different business-logics that can be complicated, therefore MVC saves the day by making it a little easier.