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

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

[@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]

Awesome!
Well structured and concise video!

[@dalyryl]

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]

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

[@srinivasnahak3473]

Thank you so much for simplifying it so well!!

[@thequang9234]

one of the best NextJS video ive seen !

[@adm7r]

wonderfully explained. thanks.

[@itsbrgv]

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

[@tango8205]

Love your stuff! Big help!

[@wailuthman5679]

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

[@abiabiram2910]

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]

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]

Amazing video, thank you!

[@kamrant8915]

Thanks a lot for this excellent tutroial

[@EnterpriseKnight]

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

[@dharshinipriya5775]

Nice one. Please upload many videos on NextJs

[@anilkatakam2738]

Thanks! very helpfull

[@undergroundmaster8]

Thank you a lot!

[@programmingwithnit5308]

Thank you brother

[@socialdamage]

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]

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.

[@juampy4366]

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?

[@nimethgampaha8036]

awesome

[@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]

❤

[@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]

Use Remix.

[@Michaeltje01]

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]

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]

why typescript

[@gime1945]

Better question why not. Positives out weight negatives

[@dalyryl]

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

[@greenshaheen6716]

@@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]

@@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]

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