Next.js in 100 Seconds // Plus Full Beginner's Tutorial

Learn the basics of Next.js in 100 Seconds! Then build your first server-rendered react app with a full Next.js beginner's tutorial. fireship.io/courses/react-nex...
#react #webdev #100SecondsOfCode
Next.js Docs nextjs.org/
Source Code github.com/fireship-io/nextjs...
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

[@mattskelton7471]

Is it just me, or is it hard to keep up with the rapidly evolving front-end world?

[@maevshadowsong]

u r not alone

[@mokv9889]

Backend dev here who is trying to enter the frontend world. It's a disaster.

[@jakub7048]

@everyoneAbove: lol it's reckless to catch up with all these unnecessary technologies, just focus on react and master it

[@gabrodriguesc]

@@jakub7048 this

[@mikelisrael5627]

😂😂

[@brintmontgomery8323]

These 100 sec. videos are pure gold if a person (like me) has never run across the topic at hand.

[@simracingsemantics9821]

I'm in my capstone class right now and deciding what languages and frameworks to use in our project we've just been sharing these videos with each other as like a "pitch". never even knew any of them watched these videos but we all do apparently

[@SaraSohail-en2me]

Bruh

[@mohamedsalimbensalem6118]

@@SaraSohail-en2me xd

[@kocraft137]

I just love the "Beyond 100 seconds" stage. You have nice pace in your video

[@codinginflow]

I'm rewriting my website from vanilla React to NextJS and I love it so far. Many things are much better thought-out.

[@hiteshchalise3988]

It is good to see your name crop in the comment section of youtube videos every now and then. :)

[@FidelGuajardo]

Jeff has a special talent for teaching and if he does his own videos, then he also has the skills for doing excellent videos!!! I consider him to be one of my top 5 all-time best tech teachers. Thank you, Jeff.

[@LouisDuran]

who are some of the others in the top 5?

[@LouisDuran]

PS. Jeff's videos are awesome

[@GreenZapperZ]

@@LouisDuran I gotta say, Web Dev Simplified (Mainly JavaScript) and Kevin Powell (Only makes videos on CSS) both make really good educational programming videos. Highly recommend them if you haven't seen them already.

[@sirinajberi9433]

Short, rich, straight to the point video ! just what I needed, thanks !

[@muhammadsami479]

Rust in 100 seconds 🔥🔥

[@akrbor]

Yes!

[@Fireship]

Someday, I've been slowly learning Rust for the past 2 years.

[@architbhonsle7356]

Bruh Rust... In 100 seconds.... 🙂

[@Nexus-rt1bm]

YESSSS

[@darkfire2703]

Hahahahaha good one mate 😂

[@rosecancode9455]

I feel like I just learnt a new tech. Thanks so much. I just heard next today and I already have a comprehensive understanding of it after watched this.

[@mulwelimushiana8388]

Been watching Nextjs tutorials all over the internet but this is by far the best I have ever seen 🔥🔥🔥🔥

[@SuprunAlexey]

Next js is the best way to create fast site in a few hours. You need just basic knowledge of JavaScript and react. 💡💡💡

[@unomas9686]

Какими судьбами ?

[@hijazi479]

Not basic but intermediate level knowledge of react

[@gamerdude736]

Nuxt.js: am i joke to you

[@CruzMonrreal]

Best is highly subjective, especially since text files would work just as well for Static Sites...

[@saintshing]

Is there a reason to learn Gatsby over Next?

[@justintaddei]

Exactly what I needed! I just started a project with Next.js yesterday

[@nate1988]

Seems like I'm going to be doing at my React projects as Next.js now. I really can't see a reason not to default to using it. Great video -- it's been nice coming back over the months and going from confusion to understanding.

[@david_sanchez]

1 reason to not default to Next is when building something like a CRM. Web indexers don’t need (and shouldn’t have) access to the private data in a CRM web app. In cases like this, a client-side React app is perfectly sufficient.

[@vitorgouveia5378]

The first time I heard about next.js was YESTERDAY, and TODAY you bring me this video, I'm starting to think you really read some minds

[@juancarlosqr]

Joining fireship for the Next.JS & Firebase course!!! 🔥🔥🔥 Can't wait!

[@Anto-xh5vn]

@@godwinebikwo6544 I would be surprised if anyone actually helped you :)

[@abedabdesselem9491]

Thanks for the tutorial, well explained and straight forward, helped me a lot since I just started working on web development

[@Felipe-pb9gu]

it would be great if you include SWR in this course, I think is a good match with next/firebase, makes caching and other things a lot easier. Vercel hosting is a nice feature too.

[@1_PieceOfCode]

2:24 I was not going to try it now but this line did it for me. love you work man

[@mehedihassanome4688]

I find this guys voice highly therapeutic, for some reason its enjoyable...

[@leanprogrammer]

Impatiently waiting for the full course 😃

[@stapia505]

Literally after deploying my next js app sweet timing!!

[@NabilTharwat_]

I'm about to make a video (in Arabic) about building a Next blog and this just motivated me more! Informational and straight to the point, as always!

[@Kharismyafi]

Like the videos, just want to add, SSG can be used for highly dynamic sites, see the entire genre of Jamstack development but basically you can use API calls to display new data on static pages. (static sites could also use js to do animations and 'non static' stuff)

[@Gohel95]

Thanks, Man... That was a quick and crisp introduction. 💕💖💕💖

[@tylersustare]

Love it! Ruby on Rails in 100 seconds 💎

[@SirDamatoIII]

No way, I have been digging into this the past week. Would love NuxtJs as a Pro Course.

[@JayPerf]

amazing work, as always - thanks Jeff!

[@mitch7w]

Great intro to the framework. Thanks!

[@auchucknorris]

perfect! after dabbling with wordpress, one thing i thought was actually an improvement on react was how the server created the page before sending it out.

[@PapaFranciscoOk]

im starting to fall in love with this channel

[@codeSTACKr]

🔥🚀

[@harshilparmar9076]

@@nooonde check codedamn

[@muhammadfaizan5969]

This is amazing, for experience developer we just need short intro, this was so helpful

[@technicalfriend15]

Was looking for this and your video dropped in notifications.

[@jamesmalarkey7437]

That's what I was looking for. Thanks so much.

[@manavendrasen]

Loving the 100s + tutorial vids!!

[@MaxProgramming]

What a surprise I got! I requested it and I got it! Thanks Fireship!

[@StEvUgnIn]

🔥

[@punsmith]

I really Angular, but you Jeff took some of that apprehension that I had for React. Now I can at least work with both and now I feel like I can tackle next.js too.

[@MiniKodjo]

we started from client-side rendering (static pages) to all server-side with PHP to all client-side with JS frameworks and now back to server-side rendering

[@Moochers]

Started learning JS about a month ago. I understood about 20% of this video and stopped about half way. Still have a few weeks left in my course then a few more weeks more to complete my react course. This is just a reminder to myself to see if understand more next time I watch this.

[@duppy404]

Well it's been 8 months do you understand the tutorial now?

[@AlanAndradeC]

This is incredibly useful. Thank you !

[@AryanLokar]

thank you for this clear and easy to understand video, i hope i can see nextjs internationalization and nextjs for eCommerce in your courses

[@Philson]

Best few minutes of my life.

[@vladalexandru1570]

Now I know which is my next course. I started one on Udemy, but I'll switch to this one for sure :)

[@kucukaslanmuhammetmustafa7337]

Thanks i knew about Michael Hill! He was my professor in Oxford and told us FBC fund!

[@dedodiy3887]

Best new year's gift ever

[@razorjhon2622]

This is alot better than 2 hour courses !

[@exactzero]

The best web development framework out there!

[@EnglishRain]

dude i love you so much, you explain soooo well

[@PauloGriiettner]

I’m actually planing to learn NextJS for my next project, but I’ll wait for your course, because the application will use firebase as back end and server side rendering on front end

[@BrianZhang11]

thanks, very informative and time efficient way of learning :)

[@911madza]

Talking about quality Fireship produces 👌 Vercel should consider embedding this on their Nextjs landing page 💯💯

[@oofin357]

thanks for awesome tutorial bro, keep up the good works.

[@prasadk-oi9qr]

Looking forward to see your Next.js course ✋

[@RenaldyPratama]

Thank you so much for this video! 🔥

[@andrew_schaeffer]

wonderful explanation of NextJS Thanks!

[@codenamegrant]

Excellent Video, the Beyond 100 sec, was really informative

[@Filip_M]

Haha "I'll see you in the NEXT one" nice one!

[@jonnathanmoreno5538]

Thanks for putting up together this video I learned the entire concept in less than 12 mins while I was on Next.js website for hours trying to understand it...smh

[@AnthonyAnalog]

100 Seconds is the best quick burst tutorial structure on the internet.

[@__greg__]

This is a great overview 🙌🏽

[@ahmadsalih6844]

MANNNN!! you are doing amazing, keep it

[@Mr.Andrew.]

I'd be interested in finding out how to serve part of a site in next and another part in React. As for modern webapps in a privacy aware era, there are many things you'd want to exclude from web crawlers without destroying seo optimization.

[@mrala]

the more react stuff, the more useful channel :)

[@SamFromaway]

Great video as always. What I would be interested in a course is to learn how the hydration with next exactly works. Especially in regards to the script __NEXT_DATA__ and how to integrate css libraries like Material UI and Chakra. 😁

[@Fireship]

Hydration is also weird when dealing with realtime firebase data, I'll cover that in the course

[@SamFromaway]

@@Fireship Cool thanks :D

[@danielcallaghan6892]

im drunk and this makes no sense ! woooooooooooooooooooo!

[@simspettway4706]

You're the man. Thank you for this!

[@oiojin831]

Best summary ever

[@MiketheNerdRanger]

I don't think I know enough about each component to be excited about this.

[@hatrez3679]

I've written my own frameworks until now. This actualy is close to what I've implemented. I've never used React, Vue nor Angular. I will give this a try the next couple of days.

[@tymcfarland8158]

Only devs would put a "//" in their youtube video title...

[@aleksamatic9558]

This is what i was looking for!

[@parthpuri2000]

First time someone properly explained client side rendering...

[@iamlande3979]

next.js and firebase would be a candy even if it is a simplest CRUD, I'd definitely buy it

[@ErikKubica]

your voice is so calming. i dont even care what you say :D it's like Zack from jerryrigeverything

[@kettenbach]

I see what you did there at the end, I'll see you on the Next one. 😀👍

[@OrestisPantazos]

Excellent video!! Well done!!

[@collax2613]

Now we need the same but with nuxt.js ;)

[@RobertoDuransh]

ok im really interested in this next course... oooh pls cover hooks with examples ;)

[@GaelGendre]

Now it has changed with Next.js 13: routes (4:03) and dynamic route (5:15) check the docs

[@mohammedreda1104]

so awesome i hope next video be crud on it with big project so can we dig deeper

[@djlee0721]

Looking forward to the course! Take my money!

[@alperalkan2000]

dude thank you for all of the high quality videos man, keep it up, you are doing great!

[@Yuki-ef2rw]

good video, thanks for the tutorial

[@ninjaasmoke]

Whoa, Imma learn Next

[@erkinkurt6799]

Awesome content again! Thanks

[@hajimohammed968]

Thanks Jeff. How does implement real-time data fetching in next with firebase? Also, how do we deal with cloud functions? And would deploying to vercel be the better choice?

[@nitrous1001]

just when I was writing my own Next.js app too!

[@maacpiash]

"Thanks for watching, and I will see you in the *next* one."

[@HarikrishnanKK]

Awesome! I am a pro subscriber of fireship & the only thing I havent seen you touching till now is, Testing :) .. Any chances of seeing a full pro course in angular testing? :D That would be invaluable !

[@thomasmiller2747]

oh my god so helpful. Thank you

[@carsend7412]

love the videos. kind of curious....do you think a regular SPA app made in the vue-cli, CRA, or angular-cli is a way of the past? Like would there be any reason to keep making those? Nuxt/Next and the SSR wave I've been trying to understand, but keep going back and forth if this like makes traditional SPAs obsolete. Especially in like internal apps where something like SEO you don't care about.

[@Sivx76]

Amazing explanation!

[@PaulSebastianM]

Love the icon theme you're using. Which is it?

[@jayanths1221]

Three Js in 100 seconds

[@sahajsrivastava2705]

+1 duh

[@wotizit]

DONE AND DONE

[@karsongrady]

I NEEDED THIS

[@user-mk8he1ex3m]

Very helpful, thanks

[@Khl8122]

I watch every videos on YT at 2x speed. But there should be a 0.75x speed to watch fireship.io videos. Anyway, 100 seconds never disappoint.

[@pupdoggify]

Lol, that was a funny little trip from server-side to client-side over the last 10 years...only for kiddos to go back to big daddy in server land!

[@LongJourneys]

For me the biggest reason I use Firebase is authentication. It was a bit of a pain to figure out how to keep authentication persistent on page reload with Vue/Nuxt; so if you could do a walkthrough on that with Next, that would be cool.

[@stunna4498]

well i use angular and to keep authentication persistent i would save the user token on the browser and everytime the user refreshes the page i would ask the server to get the current user from this token and all would work fine in my experience ofc

[@thanatosor]

have they fixed auth with Vue/Nuxt now ?

[@danielchettiar5670]

@@stunna4498 Where do you store it on the client side? Cookies or storage?

[@stunna4498]

@@danielchettiar5670 yeah i store the token in the storage of the browser( client side). Everytime you make a request to the api u send the token. If the server responds with a 401 (Unauthorized) i redirect the user to the login page.

[@qwerty-or1yg]

Just started watching some tutorials for next.js yesterday. Please do gatsby.js as well.