Next.js in 100 Seconds // Plus Full Beginner's Tutorial
HTML-код
- Опубликовано: 13 сен 2024
- 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/co...
#react #webdev #100SecondsOfCode
Next.js Docs nextjs.org/
Source Code github.com/fir...
Install the quiz app 🤓
iOS itunes.apple.c...
Android play.google.co...
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
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. :)
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
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.
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.
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?
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 😂
🔥🚀
@@nooonde check codedamn
Joining fireship for the Next.JS & Firebase course!!! 🔥🔥🔥 Can't wait!
@@godwinebikwo6544 I would be surprised if anyone actually helped you :)
Short, rich, straight to the point video ! just what I needed, thanks !
What a surprise I got! I requested it and I got it! Thanks Fireship!
🔥
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?
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!
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.
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.
I find this guys voice highly therapeutic, for some reason its enjoyable...
Best few minutes of my life.
Only devs would put a "//" in their youtube video title...
Now it has changed with Next.js 13: routes (4:03) and dynamic route (5:15) check the docs
im drunk and this makes no sense ! woooooooooooooooooooo!
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
Best summary ever
Love it! Ruby on Rails in 100 seconds 💎
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
Impatiently waiting for the full course 😃
Was looking for this and your video dropped in notifications.
Been watching Nextjs tutorials all over the internet but this is by far the best I have ever seen 🔥🔥🔥🔥
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.
why is the folder structure of my next app completely different? has nextjs really changed that much in 3 years?
Yes
Yep same for me... >.
next.js and firebase would be a candy even if it is a simplest CRUD, I'd definitely buy it
Talking about quality Fireship produces 👌
Vercel should consider embedding this on their Nextjs landing page 💯💯
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
Next js is really god level framework for react apps I will use that I'll my projects
Exactly what I needed! I just started a project with Next.js yesterday
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
I just made a letterboxd clone with Next.js and it's pretty cool, though I stored a JWT in the client side, so I stupidly couldn't use most of the SSR functionalities, so the best way yo do authentication with Next.js is to have something like a JWT in a cookie so you can fetch user information during the SSR process.
Switched from Next.js to Sapper/Svelte and never looked back. It gives me the giggles when I see React / React-based frameworks tutorials lately...
Tell me more
Giggles? When Sapper is about to be deprecated. Yep, giggles.
@@exactzero About to != is deprecated. I am still using it until Svelte Kit is ready and stable.
@@exactzero React is also about to be "deprecated" by other JS libraries in some point in time, but that doesn't stop you from using it, does it?
@@StEvUgnIn I like those more because I am more productive when compared to React. Also, they provide smaller bundles and they have the "use the platform" approach, so there is no "Virtual DOM diffing", making apps feel faster while running.
2:24 I was not going to try it now but this line did it for me. love you work man
Looking forward to the course! Take my money!
Now we need the same but with nuxt.js ;)
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)
im starting to fall in love with this channel
Love the icon theme you're using. Which is it?
Thanks for the tutorial, well explained and straight forward, helped me a lot since I just started working on web development
Thanks, Man...
That was a quick and crisp introduction.
💕💖💕💖
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!
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.
Question: Next.js + React ≈ Angular Universal?
Yes, that's about right
a full stack project using Nextjs, tailwindcss, react-query, RestAPI, Mongodb
This is alot better than 2 hour courses !
Hey. Love your work. Great videos.
Can you please do one on Nest.js
It's a really underrated node framework.
Nest is awesome, I'll cover it more in the future
100 Seconds is the best quick burst tutorial structure on the internet.
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 !
"Thanks for watching, and I will see you in the *next* one."
Help me out here. We are going back to server side rendering? Generating static HTML and giving it to the client? So is this similar to how we built web apps like a decade ago?
Great intro to the framework. Thanks!
Finally you are going back to Ruby on Rails with extra steps... Many developers moved to React and client side, just to move again to server side rendering with Next.js. Why not just use a traditional framework like Rails or Laravel? I don't see any advantage
This is amazing, for experience developer we just need short intro, this was so helpful
No way, I have been digging into this the past week. Would love NuxtJs as a Pro Course.
Nuxt.js next? :D
I would wait for Nuxt 3 ☺️
Three Js in 100 seconds
+1 duh
DONE AND DONE
Loving the 100s + tutorial vids!!
NestJS Next please. 🦁❤️
Had to read this one twice despite knowing both Next and Nest lmao
nestjs is awesome framework !
I will love to nestjs as well
@@rohankapur5776 At least you don't use Next, Nest and Nuxt...
@@PhatOof 😂 I could NEVER
Best new year's gift ever
Thanks i knew about Michael Hill! He was my professor in Oxford and told us FBC fund!
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.
First time I've learned a thing before you did a 100 secs...oops
Same!
Literally after deploying my next js app sweet timing!!
Haha "I'll see you in the NEXT one" nice one!
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.
This was a great tutorial, but one question I have is how do you implement components with it? Are pages the only way to lay out UI? Is there less encapsulation with Next? An example would be if I want a specific UI feature to be shown on multiple pages, and it has its own functionality, do I have to Implement a copy of this on each page or can I create 1 component, import it, and render it on multiple pages?
Good question. Each page needs a `default` export, but you can create a top level directory like `lib` to share in multiple pages. So no, you don't have to duplicate implementation details.
You can create a component that holds (just an example) a footer and a header. In order to have these on every page you go to the _app.js file in pages and wrap your app content in that component. One single import and every new page will now have that component containing a footer and a header.
You work the same way as in regular React by creating components that you can import anywhere.
I don't think I know enough about each component to be excited about this.
Would be interesting to hear a comparison with Nuxt
dude i love you so much, you explain soooo well
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
The best web development framework out there!
Elixir in 100 seconds 👀 ? 🔥 🔥
First time someone properly explained client side rendering...
That's what I was looking for. Thanks so much.
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.
So SSR is exactly what a lets say php server would do right?
The big difference is how it transitions (or hydrates) from server to client. Only the initial page load is rendered from the server.
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?
thank you for this clear and easy to understand video, i hope i can see nextjs internationalization and nextjs for eCommerce in your courses
I see what you did there at the end, I'll see you on the Next one. 😀👍
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.
In regards to performance, is Next comparable to Svelte?
MANNNN!! you are doing amazing, keep it
...so basically Next.js is PHP you can write in Javascript. Got it!
This is how I understand it
SSR is easily the most overly complex and overly expensive thing pushed by hype.
I rather use lambda edge or cloudflare workers to alter the metatags of the index.html file, no need to render everything server side and manage tons of complexity around it.
amazing work, as always - thanks Jeff!
awesome video. thank you!
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.
4:35 he really writes "hi mom". 🥰
Now I know which is my next course. I started one on Udemy, but I'll switch to this one for sure :)
thanks, very informative and time efficient way of learning :)
Great nextjs video!
the more react stuff, the more useful channel :)
We use next.js for our projects for more than 2 years now and I can't recommend that more.