Next.js in 100 Seconds // Plus Full Beginner's Tutorial
VloĆŸit
- Äas pĆidĂĄn 4. 01. 2021
- 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 - VÄda a technologie
Is it just me, or is it hard to keep up with the rapidly evolving front-end world?
u r not alone
Backend dev here who is trying to enter the frontend world. It's a disaster.
@everyoneAbove: lol it's reckless to catch up with all these unnecessary technologies, just focus on react and master it
@@jakub7048 this
đđ
I just love the "Beyond 100 seconds" stage. You have nice pace in your video
These 100 sec. videos are pure gold if a person (like me) has never run across the topic at hand.
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
Bruh
@@SaraSohail-en2me xd
I'm rewriting my website from vanilla React to NextJS and I love it so far. Many things are much better thought-out.
It is good to see your name crop in the comment section of youtube videos every now and then. :)
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.
who are some of the others in the top 5?
PS. Jeff's videos are awesome
@@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.
Short, rich, straight to the point video ! just what I needed, thanks !
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.
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.
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.
Rust in 100 seconds đ„đ„
Yes!
Someday, I've been slowly learning Rust for the past 2 years.
Bruh Rust... In 100 seconds.... đ
YESSSS
Hahahahaha good one mate đ
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.
Joining fireship for the Next.JS & Firebase course!!! đ„đ„đ„ Can't wait!
@@godwinebikwo6544 I would be surprised if anyone actually helped you :)
Exactly what I needed! I just started a project with Next.js yesterday
Been watching Nextjs tutorials all over the internet but this is by far the best I have ever seen đ„đ„đ„đ„
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)
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
Thanks for the tutorial, well explained and straight forward, helped me a lot since I just started working on web development
đ„đ
@@nooonde check codedamn
Next js is the best way to create fast site in a few hours. You need just basic knowledge of JavaScript and react. đĄđĄđĄ
ĐĐ°ĐșĐžĐŒĐž ŃŃĐŽŃĐ±Đ°ĐŒĐž ?
Not basic but intermediate level knowledge of react
Nuxt.js: am i joke to you
Best is highly subjective, especially since text files would work just as well for Static Sites...
Is there a reason to learn Gatsby over Next?
What a surprise I got! I requested it and I got it! Thanks Fireship!
đ„
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
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!
Impatiently waiting for the full course đ
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.
Well it's been 8 months do you understand the tutorial now?
Love it! Ruby on Rails in 100 seconds đ
why is the folder structure of my next app completely different? has nextjs really changed that much in 3 years?
Thanks, Man...
That was a quick and crisp introduction.
đđđđ
amazing work, as always - thanks Jeff!
I find this guys voice highly therapeutic, for some reason its enjoyable...
im drunk and this makes no sense ! woooooooooooooooooooo!
Literally after deploying my next js app sweet timing!!
No way, I have been digging into this the past week. Would love NuxtJs as a Pro Course.
Loving the 100s + tutorial vids!!
2:24 I was not going to try it now but this line did it for me. love you work man
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?
Great intro to the framework. Thanks!
Best few minutes of my life.
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.
im starting to fall in love with this channel
That's what I was looking for. Thanks so much.
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.
Was looking for this and your video dropped in notifications.
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.
This is amazing, for experience developer we just need short intro, this was so helpful
Best new year's gift ever
MANNNN!! you are doing amazing, keep it
This is incredibly useful. Thank you !
This is what i was looking for!
thank you for this clear and easy to understand video, i hope i can see nextjs internationalization and nextjs for eCommerce in your courses
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. đ
Hydration is also weird when dealing with realtime firebase data, I'll cover that in the course
@@Fireship Cool thanks :D
Haha "I'll see you in the NEXT one" nice one!
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
dude i love you so much, you explain soooo well
This is a great overview đđœ
The best web development framework out there!
I NEEDED THIS
Talking about quality Fireship produces đ
Vercel should consider embedding this on their Nextjs landing page đŻđŻ
Only devs would put a "//" in their youtube video title...
Amazing as always!
Looking forward to see your Next.js course â
This is alot better than 2 hour courses !
Best summary ever
Now I know which is my next course. I started one on Udemy, but I'll switch to this one for sure :)
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.
Thanks i knew about Michael Hill! He was my professor in Oxford and told us FBC fund!
the more react stuff, the more useful channel :)
You're the man. Thank you for this!
Thank you so much for this video! đ„
thanks, very informative and time efficient way of learning :)
thanks for awesome tutorial bro, keep up the good works.
Now it has changed with Next.js 13: routes (4:03) and dynamic route (5:15) check the docs
100 Seconds is the best quick burst tutorial structure on the internet.
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
"Thanks for watching, and I will see you in the *next* one."
Excellent video!! Well done!!
Awesome content again! Thanks
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.
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
have they fixed auth with Vue/Nuxt now ?
@@stunna4498 Where do you store it on the client side? Cookies or storage?
@@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.
wonderful explanation of NextJS Thanks!
Excellent Video, the Beyond 100 sec, was really informative
Great nextjs video!
Now we need the same but with nuxt.js ;)
I don't think I know enough about each component to be excited about this.
Whoa, Imma learn Next
The video is amazing!!!đ„đ„
next.js and firebase would be a candy even if it is a simplest CRUD, I'd definitely buy it
Loved it :)
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.
I see what you did there at the end, I'll see you on the Next one. đđ
I would like to know, how to do state management in Next? Can Redux be used with Next?
First time someone properly explained client side rendering...
Would using Next and having this server side rendering give you a higher bill when cloud hosting? If so, how many times more expensive is server side rendering to client side rendering?
Amazing explanation!
thank you for the great video ! just wondering which theme is this on vs code ? can i get this in php storm ?
In static rendering, how does it differ from an old school website with a bunch of html pages? Here I am thinking about reqres cycle and page transitions.
Three Js in 100 seconds
+1 duh
DONE AND DONE
I built a blog with Next and it's awesome. I have an issue tho đȘ. When I click on a blog post it takes few seconds route to the post details page. Is there a way to display a loading screen?
just when I was writing my own Next.js app too!
best of the best!!! thx
oh my god so helpful. Thank you
Love the icon theme you're using. Which is it?