NextJS Course For Beginners - Routes, Fetching, SSR, SSG...
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- NEXTJS FULL BEGINNER COURSE. In this video I will go over the basics of nextjs for beginners.
Code: github.com/machadop1407/nextj...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
TimeStamps
-
00:00 - Intro
05:08 - Setup and Folder Structure
13:16 - Routes, Dynamic Routes, Link
22:40 - Head Component
24:46 - Navbar and CSS Module
35:20 - 404 Error Page
38:16 - API Requests with GetServerSideProps, GetStaticProps
-
#nextjs #coding - วิทยาศาสตร์และเทคโนโลยี
![โอ้มายก๊อด! ไม่ถึงชั่วโมงหมดเป็นแสน 😅 [cc] แดนแพทตี้ SS2 | EP.42 |](http://i.ytimg.com/vi/OH2ShXfO6tA/mqdefault.jpg)
This has been one of the best tutorials I've watched, very clear and not too long either
Perfect timing
I always specifically look for videos from you when I'm trying to learn something in the web space. You're amazing. Thank you!
Melhor timing impossível kkkkkkkkkk, ótimo trabalho, Pedro!
Luving it! Always love a good refresher, there’s always something new to learn. 👍🏻
Thank you for this Pedro. I'd love to see more on NextJS, especially displaying "real time" data on screen without interaction (clicks/refreshes).
começo com o like, depois vejo o video, conteúdo sempre nota 10 Pedro
Pedro I just wanna say that I LOVE your channel, I've learned a lot thank you 🙏🏼
Awesome video pedro. Looking forward to the next part of it
Great tutorial. You're going places man.
Well to be honest i just started learning NextJS.
Thank you so much for this Pedro!
Hahaha the timing is perfect :)
Hi John! How is it going? Are you working with Next js?
I wish I could like this video more than once. Cool stuff man. Thank you for your effort. You just got yourself a loyal subscriber.
Thank you Pedro for making this Nextjs video!!! I have been working with reactjs for quite some time, and that SEO issue really bothered me from time to time. So I recently started learning Nextjs, and this is a very nice beginner tutorial, really appreciate it! And I will be more grateful if you could make more videos about Nextjs❤
Hey! You are my life savior man, I am working on next js project which is totally new for me, well not totally cause I know react js but it is new, and guess what!!!!! got your video by luck. Literally you explained the things so well, really easy to catch it.
It will be great help if you can explain more about next js in you next video. Looking forward to it.
Loved the tut mate, a tut on next with typescript would be amazing, love learning from you!
I’ve already learned react and typescript so I’m ready for that next step! That next js step 😉
Really explained Nextjs better than other videos. I so much love your content, you are doing a great job. Can you do complete app(frontend using Nextjs and a CSS franework and backbend using Express)
From South Africa I give big thanks Pedro ❣🔥
Thank you so much Pedro. Please, keep making NextJS videos.
love your vids bro, definitely one of the most underrated software development channels out there. can you do a vid about design patterns?
Keep em coming man - this content is gold! Please follow up with a video on how to use next with firebase api
i like the video man! hopefully we get more next videos from you!
Hey, thank you for making this video, I appreciate it!
Great video, thanks Pedro! 👏
Greate video, clear and simple! loved it!
Thanks a bunch! It helped me to brush up on my Next.js knowledge 🙌
great as always pedro!
excellent video. I really appreciate if you continue the nextjs videos
Really cool Pedro, thanks a lot for this class.
Great Content as Ever...I am loving it specially related to MERN Stack...Keep it up and Thanks for such wonderfull stuff.
Great refresher! Thanks man
Great tutorial man. Keep it up!!!
Please make a part 2, this was great!
This is big. Thanks Pedro
thanks for the beginner course, waiting for another nextjs tutorial, especially about Hooks
Great tutorial! I read the docs on the website and this really helped me understand better. I've also been looking at Next-auth. Can you maybe do a video on that some time?
Great video, keep up the good work and more NextJS please
Pedro seriously, man, keep making videos! You explain things very well!
Does firebase auth work the same way as react?
amazing video, i learned so much! thank you!
Love your videos and, as always, this one was also 🔥 thanks Pedro!
A quick comment, I'm getting ads every 4-5 minutes, which didn't use to happen before on any of your videos. Maybe you changed a configuration or something, but it felt like way too many ads.
You've been very helpful to my learning journey. I'm grateful ✊
Amazing. Thank you! 🔥🔥🔥
need more courses for next, very impressive!
The following day I started learning Nextjs I received notification on your crash course on Nextjs you are literally on my mind. Pls I would like your next video to be how to implement login and registration system with next J's, express and mongodb and if you can also include password recovery system
Thank you! for making a very helpful introductory video on NextJS! I will be trying to replicate your application also to learn a bit about algorithms and have something when applying to jobs. Do you recommend other specific projects that could be helpful when applying to jobs in the future?
Thanks for this awesome tutorial man. So much love from South Africa🤝. I would much appreciate it if you would make another Nextjs tutorial that uses persistent state management such as Redux, although my current favourite is Zustand🤓.
This video is amazing. Could you please do a beginner video for NODE JS
Thanks man, i believe this one will be good , just as your other content , thank you mate. You the man!!!!!!!
I hope it is! I plan on making more nextjs content in the future too!
@@PedroTechnologies Amazing , I look forward to it.
basically functions as an anchor tag in Next?
Amazingg
I'd love to see how interacting with the backend through your own API works with Next, as well as database interaction just to see how that all changes.
Another thing I'd love to see is you taking us through how to build that sorting algorithm app. Doesn't have to be for all the algorithms, I'm sure the bulk of us can figure the rest out if you just do it for the bubble sort or something, it just seems like a fun project.
Yes that was definitely missing from this. It's a major point of the platform and an advantage over plain React. SEO is not the only thing. For many apps (as opposed to websites), SEO is not important.
Thank you, bro. Your videos are simple and straight forwards with sample usage.
Questions can come in⬆️..
wow liked the way you explaining..
"The future of React" was spot on with React introducing Server-side components
Super helpful!
Sanctae Urbis Romae! What was I doing in my life that I didn't know Next.js??? Great video!
Questions can come in⬆️..
Like this video, easy to understand.
Correct me if I am wrong, Next JS uses SSR with Hydration, which is a combination of SSR in the beginning for better SEO followed by CSR later for better caching and user interactivity.
well explained 😊
Thank you so much pedro😃😃
Great video. I stayed away from REACT JS because SEO is very important for my job. Now that NextJS seems to provide a way to include SEO element, I'm going to start looking ino this.
Questions can come in⬆️..
waiting for your next video 🔥🔥🔥
That intro music always gives me goosebumps 4:50 😎
Pedro é foda!!!!
Pedro is the king!
Great video.
How do you set up your terminal for auto competition?
Maaaaaan, I just started working with Next in a Start up. This is really handy.
Glad I could help!
@@PedroTechnologies Você é brasileiro Pedro? Seus tutoriais são muito bons.
I'm literally your fangirl :))) Great tutorial! I tried NextJS last year and got as far, but it felt really confusing overall. Couldn't get MaterialUI to integrate right. I gave up for lack of time with that project and just used ReactJS.
Hahaha i appreciate the support! Hope you like the video
Material UI offers a repo with Next JS configured so you should be good to start from there...or it might be the other way round, you know what I mean, hope that helps, Material UI is very nice!
Great material !! You're the best #PedroTech. We are w8 for more about Next.js. See you later
More NextJS please :)
Great video. Pedro make a video about route protection in next
Awesome tutorial about next
Great video, would be great if you can create videos for advanced topics in next JS like authentication, thanks.
your random spaces after > are killing me, godly tutorial tho
waww next js ❤️
Such an awesome tutorial. You forgot to make a link in the nave for the coins. I just implemented it with some css.
I have indeed enjoyed this video. I can't be grateful enough.
How would we implement a separate Layout for logged in users.
pedro is my best teacher
Small question, do we have to use "styles" name each time we import CSS file. Why can't we use something else like, for example page specific name.
thanks for your tutorial, very well explained ,a quick question about .links a { , why not just use .links to set up margin-left?
humm, pls keep going bro
Pedro, I really liked this video. Could you please add another video using typescript with next please ? that would be really helpfull :)
Perfect turtorial
Pedro. Thanks. Can you make more of nextjs please? Talk about apis and also node.
Hi, Pedro. It is great course. Could you give us more course about NextJS
Awesome 🙂
If we are using static props what if the API data changes after we build the application does it change or fetch the new data from the API or does it still uses the old version of data which was present at the build time
nice dude.. hey how to show snippert for npx in your terminal?
let me hope it will be as good as the other ones
Hey Pedro
I have a question
as ssr code first runs on server than the generated html is sent to browser
so do we have to have a backend running all the time for running the next code on server
Wow thank you
This is a long shot, but you should make another more advanced nextjs tutorial.
Thanks for the video!!! 🔥🔥
Bro don't you think you should start DSA course??
Might make a video on DSA!
Hey @pedro can you make a video on creating a dynamic XML sitemap using React
Can I setup a website with a million static pages ? Or can I use some non static rendering based concept because I heard it’s not meant for large pages rendering
Thanks a lot ❤ and also make video on nextjs with pure redux not redux-tool-kit
pls help people boost their DSA skills. Anways, thanks for the course :)
Ive made DSA vids on the past, I might make more. But I feel like most of my audience is more into React, I will try making a DSA video though
@@PedroTechnologies Great work man! React is so cool and I like it as It makes me eat but realised that we need to boost our DSA skills if we want to get far and also it will become more easy to learn newest coming frameworks and libraries like React. You are our life saver. So, I guess you will plan that for us :)
Except framer-motion, any clue to create page transitions?
can we get a video on you'r react sort visualizer?
brilliant
Olá Pedro: how do I deploy my Next js app to my URL at my ISP? All I’ve seen is Vercel deployment. Obrigado in advance…