Next.js For React Developers | Everything You Need To Know

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

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

50% 1

I'm pretty sure many of you already heard and somehow knew about the greatest framework of the 21st century, Next.js! Next.js is a fully sophisticated and very fast framework for React applications that gives you everything you need from Routing to Production builds and SSR with hybrid SSG! In this video, we'll go through the transition process of moving from old CSR React (single page apps) into working with Next.js and better understanding of Server-Side Rendering (SSR) or Static Site Generation (SSG), as well as, get deeper into different topics of Next.js and how it works behind the scenes.
⭐ Timestamps ⭐
00:00 Intro
01:18 Next.js (SSR/SSG) vs React (CSR)
07:15 Setting up Next.js Project
08:30 Next.js Basic Project Structure
09:56 Next.js for React folks
11:24 Next.js is a framework with a set of standards
12:49 Manipulate the Header
13:45 Routing
15:50 Next.js Data Fetching and Props
21:08 User Interactions
23:40 SSR vs SSG in the real world
26:40 Do Data gets updated when using SSG
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone

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

9 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@valhalla_dev Год назад

I've been doing React dev for a couple years and started seeing the benefits of SSR/SSG, especially for data vis. I started looking into Next, and this was a fantastic explainer for it. You're the bomb!

@nikitaalekseev991 2 года назад

Awesome! Well structured and concise video!

@dalyryl 2 года назад

This was kind of topic every developer needs, this is a question were interviewers would like to hear from the applicant. Thanks for this coderOne

@capscode. Год назад

This video is amazing and you have covered all the differences, really very helpful and thank you soo much…..

@pyrotaze 10 месяцев назад

Best NextJS tutorial video I've seen. Great work.

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

Thank you so much for simplifying it so well!!

@thequang9234 Год назад

one of the best NextJS video ive seen !

@itsbrgv Год назад

NextJS should include your video in their documentation page!!! saves a lot of time reading the pages!!!

@adm7r 8 месяцев назад

wonderfully explained. thanks.

@tango8205 Год назад

Love your stuff! Big help!

@wailuthman5679 Год назад

very helpful explanation the best video on this topic Thank you for the effort mate.

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

Awesome content i have in next js 11 years back on a small project this helps me to understand all types of rendering concepts

@code2475 Год назад

really good video...highly appreciate your efforts !!!

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

Before seeing this video I didn't know about the SSR but I had an issue of loading huge data and now I will get the speed that needed to load my site. So, now I got interest why I should learn NextJs.

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

Amazing video, thank you!

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

Thanks a lot for this excellent tutroial

@EnterpriseKnight 2 года назад

What's the addon you're using to highlight the intentation columns for the brackets?

@dharshinipriya5775 2 года назад

Nice one. Please upload many videos on NextJs

@anilkatakam2738 10 месяцев назад

Thanks! very helpfull

@undergroundmaster8 Год назад

Thank you a lot!

@programmingwithnit5308 10 месяцев назад

Thank you brother

@socialdamage 9 месяцев назад

If you would have this setup for a dynamic page project with a headless CMS. Which one would perform better? How can i measure this actually? React + EsBuild ( Lazy loading / Splitting ) -VS- NextJs

@Abe-fb2lj 2 года назад

It’ pretty concise explain! Thank you! BTW, what’s your vscode theme?🤣

@davidgershkovich4800 Год назад

Drag the volu for the setuper track that you're recording into all the way down.

@nimethgampaha8036 Год назад

awesome

@juampy4366 2 года назад

i think it works perfectly when your app is kinda small like a vlog, website and maybe small ecommerce, but when you need somet scalable it doesnt really work well.... at least when i tried to apply hexagonal architecture over the nextjs"backend" i couldnt, it just have small options when you try to develop a consistent backend by layers.... and also i cant find some info about it

@itgiants5218 Год назад

so did you use something else other than next.js

@jesuschrist1501 Год назад

that doesn't make any sense, how on earth does rendering on server side not doable in large scale projects?

@yasminamran5 Год назад

This is great. Would you please do a vedio ( or just an article) toshow how to create multiple memory game with next as toy did with react and tic-tac-toe. If you would I would qpretiate it very much

@entonbabameto6335 Год назад

Early on, You ntion a tutorial You've made, concerning the content setup. I can't seem to see it in Your description though?

@clippy5394 Год назад

where can i find source code?

@user-ki7qf6gn6w Год назад

years! Let know your questions!

@chesterxp508 Год назад

GoodJob!

@mehdihassanpoor396 11 месяцев назад

❤

@aquarium3948 Год назад

good video. However next.js is SSR but not really SSG because it can't even export an optimized image

@omarshref4803 Год назад

I feel like plain react is faster 😅

@uziboozy4540 2 года назад

Use Remix.

@Michaeltje01 2 года назад

Can someone explain me the advantage of using nextjs if you're proficient with webpack and CDNs? How does this work if you want your website served close to the user everywhere in the world?

@Chefpaolo69 Год назад

It helps bot from Google to read your website. So good for seo

@aki1840 Год назад

Necshgees

@boonya41 Год назад

React provides Suspend and lazy for a couple of years already. So you are not required to load all the application at first visit anymore

@josh0n 7 месяцев назад

Yes but that is only one problem that NextJS addresses (small file sizes, content on demand), it also addresses the open graph problem: if you rely on client-side JS to set your meta tag info - page description, image, etc (everything that shows up on Facebook, etc. when you link to a page) - then it will not work :(

@greenshaheen6716 2 года назад

why typescript

@gime1945 2 года назад

Better question why not. Positives out weight negatives

@dalyryl 2 года назад

error handling, variable handling, and better code practices. Also saves you a lot of time before building your project

@greenshaheen6716 2 года назад

@@gime1945 we are not playing positive negative game here.many students know JavaScript not typescript and i think typescript is not necessary to learn not at all. thats why I asked why ts

@scarefloor 2 года назад

@@greenshaheen6716 Dude asked why typescript, someone listed out all the benefits of typescript and he said "we are not playing positive negative game here" wtf?

@greenshaheen6716 2 года назад

@@scarefloor dude typescript is optional. understand this

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

Tf is yaddayaddayadda

@BattleGn0me Год назад

he should avoid making a video when fresh off a cocaine bump. Does he get bonuses for syllables per second?

@ExpatTraderFX Год назад

what type of english do you speak man? holy shit all im hearing is a bit of this and that and a bunch of god damn slurppy english..its driving me mad lad