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

Пікірлер: 58

  • @valhalla_dev
    @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!

  • @dalyryl
    @dalyryl2 жыл бұрын

    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

  • @nikitaalekseev991
    @nikitaalekseev9912 жыл бұрын

    Awesome! Well structured and concise video!

  • @itsbrgv
    @itsbrgv Жыл бұрын

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

  • @capscode.
    @capscode. Жыл бұрын

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

  • @pyrotaze
    @pyrotaze9 ай бұрын

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

  • @abiabiram2910
    @abiabiram29104 ай бұрын

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

  • @srinivasnahak3473
    @srinivasnahak34736 ай бұрын

    Thank you so much for simplifying it so well!!

  • @gohilkrishnapalsingh6647
    @gohilkrishnapalsingh66472 ай бұрын

    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.

  • @adm7r
    @adm7r8 ай бұрын

    wonderfully explained. thanks.

  • @thequang9234
    @thequang9234 Жыл бұрын

    one of the best NextJS video ive seen !

  • @wailuthman5679
    @wailuthman5679 Жыл бұрын

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

  • @EnterpriseKnight
    @EnterpriseKnight2 жыл бұрын

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

  • @code2475
    @code2475 Жыл бұрын

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

  • @tango8205
    @tango8205 Жыл бұрын

    Love your stuff! Big help!

  • @doomnationalist
    @doomnationalist6 ай бұрын

    Amazing video, thank you!

  • @dharshinipriya5775
    @dharshinipriya57752 жыл бұрын

    Nice one. Please upload many videos on NextJs

  • @socialdamage
    @socialdamage9 ай бұрын

    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
    @Abe-fb2lj2 жыл бұрын

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

  • @kamrant8915
    @kamrant89152 ай бұрын

    Thanks a lot for this excellent tutroial

  • @davidgershkovich4800
    @davidgershkovich4800 Жыл бұрын

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

  • @entonbabameto6335
    @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?

  • @undergroundmaster8
    @undergroundmaster8 Жыл бұрын

    Thank you a lot!

  • @anilkatakam2738
    @anilkatakam273810 ай бұрын

    Thanks! very helpfull

  • @programmingwithnit5308
    @programmingwithnit530810 ай бұрын

    Thank you brother

  • @juampy4366
    @juampy43662 жыл бұрын

    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

    @itgiants5218

    Жыл бұрын

    so did you use something else other than next.js

  • @jesuschrist1501

    @jesuschrist1501

    Жыл бұрын

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

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

  • @clippy5394
    @clippy5394 Жыл бұрын

    where can i find source code?

  • @user-ki7qf6gn6w
    @user-ki7qf6gn6w Жыл бұрын

    years! Let know your questions!

  • @aquarium3948
    @aquarium3948 Жыл бұрын

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

  • @nimethgampaha8036
    @nimethgampaha8036 Жыл бұрын

    awesome

  • @mehdihassanpoor396
    @mehdihassanpoor39611 ай бұрын

  • @chesterxp508
    @chesterxp508 Жыл бұрын

    GoodJob!

  • @uziboozy4540
    @uziboozy45402 жыл бұрын

    Use Remix.

  • @omarshref4803
    @omarshref4803 Жыл бұрын

    I feel like plain react is faster 😅

  • @Michaeltje01
    @Michaeltje012 жыл бұрын

    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

    @Chefpaolo69

    Жыл бұрын

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

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

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

  • @aki1840
    @aki1840 Жыл бұрын

    Necshgees

  • @greenshaheen6716
    @greenshaheen67162 жыл бұрын

    why typescript

  • @gime1945

    @gime1945

    2 жыл бұрын

    Better question why not. Positives out weight negatives

  • @dalyryl

    @dalyryl

    2 жыл бұрын

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

  • @greenshaheen6716

    @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

    @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

    @greenshaheen6716

    2 жыл бұрын

    @@scarefloor dude typescript is optional. understand this

  • @omer_fayyaz
    @omer_fayyazАй бұрын

    Tf is yaddayaddayadda

  • @BattleGn0me
    @BattleGn0me Жыл бұрын

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

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