I cannot thank you enough for this. I am a junior software frontend guy and was tasked to start and build a nextjs app for production. This gave me such a great bird's eye view for how to start one. I shall remain forever grateful. Thank you. We need more of your guidance and ways to build rock solid software. Thank you for spending time and teaching us beginners.
Great stuff. Really useful for someone who is at an intermediate level and wants to start looking at the architecture around code, rather than just the code. Tip for next time: please zoom in at least one stage. The typeface is a little small, and unreadable on mobile.
Phew ! WOW ! One and half hours I can't move anywhere ! This is out of the world ! Thanks for sharing this great content, please keep sharing stuff like this !
watch this video after 2-3 beginner projects and then you will feel like a pro developer immediately looking at your base setup. thanks man, this is huge.
I still refer back to this video. It is very helpful. I mean, you have to look up specifics when following this because versions have changed and this video is old. But its still good to set up a directory correctly for an application.
We really need more of this type of tutorials instead of all the other tutorials where they only go over the most basic stuff and then you get into a company and you realize you know nothing and all those videos were useless for a company environment.
I don't leave many comments but had to stop by. Thank you very much for this tutorial. It was amazing in terms of explanation, tempo, and content. I've left the layout and sidebar to do myself as practice. I've already done a deploy so I know how to do that part. Learned a lot thank you one more time.
This video is a miracle from heaven. I wanted to start a project on Next.js but I wanted to avoid technical debt as much as possible. And I came across your video that explains everything cleanly in an hour and a half. I followed along and everything is well explained, perfect English and not too fast so cool for foreigners. Merci beaucoup, from France
Hey man time in prob 20 years of living and watching yt. For someone loving to learn in life, you are a real good teachers. Far better than all the profs and phds i experienced. Real gj keep going, i will stick to learn cs with your channel and content! Greetings from Freiburg/Germany
Please keep posting. I have never ever found real production stuff like this level in my path of learning. It is going to be a huge support for my new job. Thank you very much 👍👏✨😊
I don't know that I've ever posted a comment on a CZcams video, but this has to be, hands-down, one of the greatest tutorials I've ever seen. The thorough explanations really speak to your industry expertise. This is exactly what I've been searching for as a developer will no industry expertise who wants to be able to scale project teams. Fantastic work, Alex! Hope to see more from you soon.
I don't generally comment on CZcams videos, but I found this video a HUGE help. Absolutely incredible, great depth, pace, text version available, repo available... I am looking forward to get started on the next video. Honestly, this should be required viewing for anyone starting out with Next.js in production. Keep up the great work!
Really helped me, thanks! And for anyone experiencing the ‘hostname "i.pravatar.cc" is not configured under images in your `next.config.js’ error, make sure to downgrade your next dependency within the package.json to version 12.1.4 There is a bug in version 12.1.5 that makes it not play well with Storybook.
@@piyawatmahattanasawat196 I had the same issue as well. I set my @types/node to version 17.0.31, @types/react to version 18.0.0 and version @types/react-dom to 18.0.3. This seemed to do the trick for me
This was such a refreshing tutorial to watch. Most people do not go into this level of depth for the project setup without a bunch of camera cuts or just saying 'clone this starter repo' with no explanation of why. Very well done. I noticed you havent posted anything new in about 7 months. Are you still planning to make more content on this channel?
Amazing tutorial. Thanks so much for this, Alex!!! It would be nice to see some more topics for the new project - state management, logging, error boundaries, CSS themes, maybe using existing design system for the components, fetching library suggestion, caching, branching and CI/CD strategy, testing.
This video is perfect and it helped me a lot creating new big projects the right way! The only thing that's missing is the the timestamps for chapters just like your newest video on creating a full stack app. Thank you!
hell of a single video to learn a lot of thing on production level Practice. Thank you so much. It rare to find this kind of video in one place. Keep it up
That's great feedback, thanks! Most of my do's and don'ts that I recommend have come straight from mistakes and things I've used using this stack and similar in production with other devs, so the goal is definitely to share as much of that experience as possible.
This was fantastic. I've built more than a few Next.js applications, big projects with many developers, and I learned a ton from this video! I will share this with my team, looking forward to more!
Jeez. I don’t comment a lot but I must say: This is awesome. I’m on my phone right now just following this at 5AM and I stay fascinated, will be rewatching it tomorrow to actually implement it into a new project I’m planning onto. Was planning a solo project but why not just make it future proof? great stuff to learn as an intermediate developer to up your game. Such awesome stuff to keep things clean and efficient. You’re awesome and do a great job at explaining. Indeed the text could be a bit bigger but you already got that from the other comments. It wasn’t too bad as you explained it all well and I was able to understand what you were typing/pasting anyways
Really digging the project environment tips such as CI and directory structure. I use pnpm and wanted to avoid NPM npx command. The line in the husky file I needed was pnpm -s dlx commitlint --color --edit $1. Works great and keeps my commit messages on form.
SUCH A VALUABLE CONTENT :* I'm sure people here just like are certainly interested in buying your course on Udemy or something. I would love to learn a lot and not just react other things you know.
@@AlexEagleson Could you perhaps have video breakpoints to show which parts of the video target which topic. Like you do have good structured content but having video timestamps and breakpoints allows you to go back and forth to bits you want if you need to go back. Other than that the video is good.
@@AlexEagleson For my app I'm going to use Strapi (headless Node.js CMS) as my back-end. Are the best practices you proposed also applicable to Node.js? I would love to see a video where you do the same thing, but then with a back-end project.
@@KerimWillem Yes absolutely. I also use Node and Express for a couple of my other projects. The concepts are the same. I think there's even a plugin to use Express middleware in Next.js. My rule of thumb is that if my front-end and back-end are totally coupled, as if the backend is ONLY use by my Next front end then Next APi routes are more than enough If my backend is going to be consumed by any other services then Node/Express is a better choice to separate it One other thing you might want to consider if dealing with high traffic and using Vercel, is that deploys API routes on lambda functions, which is great for speed and availability, but might end up costing a lot more than simply hosting your own Node server. All depends on your needs in that area. Ultimately in terms of best practices, I like to follow the same kind of patterns described in this video: czcams.com/video/oNlMrpnUSFE/video.html
Thanks for this! More content like this please! I think a more zoomed in look at the code would help as well. Q: Has anyone attempted this with pnpm? I'm going to and I'm curious about any pitfalls, if any.
PNPM should make no difference here. It is just a package manager... However, from my experience PNPM is not worth it... Many things are harder: GitLab/GitHub Actions example, finding resolution for common issues, Cloud service support... All for what? Less 30s installing your packages? After using PNPM on multiple projects over the last year, I just went it good old regular NPM and I am not looking back.
Thanks for the tutorial, not very often i see such much detailed project-setup, i have one suggestion that in the next-js app router the layouts gets replaced with the new app router thing
what a great vid Alex!!! in a world of tutorials for beginners your knowledge is a true gem. Please keep posting videos for middle+ devs. Quick question - what do you think about plopJS for automation of template creation?
I learned alot from this tutorial. I couldn't stop myself to comment and appreciate your efforts to explain all steps in detail. Liked it Loved it . Hoping to see more stuff with Nextjs 13.
Alex, this was amazing!! I just started with React and am definitely not familiar with TS at all, but overall this is exactly what I was looking for! Super awesome and thanks a million!
The video is nothing about "Scalable Architecture" in Next.Js, it is more a general setup of a React app, so only the FE part. Where Next.js can do much more, it's just a clickbait title.
Please don't make such kind of quality content, otherwise there will be issues:- 1. I am straight, but i will fall in love. 2. Other content creator's have to delete channels. 3. Once you are trending, CZcams have to manage there storage facility. Love your content. You earned each comment.💕
Keep posting, very few people go into this type of depth and your explanations are good!
I cannot thank you enough for this. I am a junior software frontend guy and was tasked to start and build a nextjs app for production. This gave me such a great bird's eye view for how to start one. I shall remain forever grateful. Thank you. We need more of your guidance and ways to build rock solid software. Thank you for spending time and teaching us beginners.
Great stuff. Really useful for someone who is at an intermediate level and wants to start looking at the architecture around code, rather than just the code.
Tip for next time: please zoom in at least one stage. The typeface is a little small, and unreadable on mobile.
Hell yeah, your videos rock dude. I'll be keeping up on your new releases!
This content is absolutely golden, you've really taken this seriously, it's very impressive.
Phew ! WOW ! One and half hours I can't move anywhere ! This is out of the world ! Thanks for sharing this great content, please keep sharing stuff like this !
watch this video after 2-3 beginner projects and then you will feel like a pro developer immediately looking at your base setup. thanks man, this is huge.
The best explanation that I have seen on the setup of a project.
packed with information, i think this is the must have information for the beginner. Everything is described in easy language
I have rarely found a video and a teacher of your calibre sir, please continue doing this great work, thank you so much
never been happier with a tutorial
Oh my god! Finally, I found something useful on this topic. I really like how you explain everything in depth. Please keep posting.
Thanks a lot!
I still refer back to this video. It is very helpful. I mean, you have to look up specifics when following this because versions have changed and this video is old. But its still good to set up a directory correctly for an application.
We really need more of this type of tutorials instead of all the other tutorials where they only go over the most basic stuff and then you get into a company and you realize you know nothing and all those videos were useless for a company environment.
I don't leave many comments but had to stop by. Thank you very much for this tutorial. It was amazing in terms of explanation, tempo, and content.
I've left the layout and sidebar to do myself as practice. I've already done a deploy so I know how to do that part.
Learned a lot thank you one more time.
Glad it helped!
This video is a miracle from heaven.
I wanted to start a project on Next.js but I wanted to avoid technical debt as much as possible.
And I came across your video that explains everything cleanly in an hour and a half.
I followed along and everything is well explained, perfect English and not too fast so cool for foreigners.
Merci beaucoup, from France
I had to switch from Django to Nextjs for this project and you just saved me weeks of research. CZcams doesn't deserve you.
Oii this was brilliant. great content with good explanation. Keep posting 👏
I watched 10 minutes and you just tell me a ton of things that i must config or change in my project. Thank you
The BEST setup of Nextjs project video I have ever seen on CZcams. Thank you.
Hey man time in prob 20 years of living and watching yt. For someone loving to learn in life, you are a real good teachers. Far better than all the profs and phds i experienced. Real gj keep going, i will stick to learn cs with your channel and content! Greetings from Freiburg/Germany
Kind words, thank you!
Please keep posting. I have never ever found real production stuff like this level in my path of learning. It is going to be a huge support for my new job. Thank you very much 👍👏✨😊
High-end content on this topic. No doubts.
Fantastic tutorial. Underrated, this deserves a lot more.
I don't know that I've ever posted a comment on a CZcams video, but this has to be, hands-down, one of the greatest tutorials I've ever seen. The thorough explanations really speak to your industry expertise. This is exactly what I've been searching for as a developer will no industry expertise who wants to be able to scale project teams. Fantastic work, Alex! Hope to see more from you soon.
These tutorials are amazing, please keep posting them, really helps us who are still learning! Thank you so much.
You're welcome!
Really want to thank you for this incredible tutorial, it's massively improved the setup I was using before!
Glad it helped!
Thank you so much! Creating startup project following your tutorial. Waiting for new ones
I don't generally comment on CZcams videos, but I found this video a HUGE help. Absolutely incredible, great depth, pace, text version available, repo available...
I am looking forward to get started on the next video.
Honestly, this should be required viewing for anyone starting out with Next.js in production.
Keep up the great work!
Really helped me, thanks! And for anyone experiencing the ‘hostname "i.pravatar.cc" is not configured under images in your `next.config.js’ error, make sure to downgrade your next dependency within the package.json to version 12.1.4
There is a bug in version 12.1.5 that makes it not play well with Storybook.
i tried to downgrade next version in package.json to 12.1.4 it works in storybook but now I have a problem with typescript instead :(
@@piyawatmahattanasawat196 I had the same issue as well. I set my @types/node to version 17.0.31, @types/react to version 18.0.0 and version @types/react-dom to 18.0.3. This seemed to do the trick for me
THANK YOU THANK YOU THANK YOU! I have spent almost 2 days on and off trying to figure this out it was driving me nuts.
in tthe CatCard create two variables >>>
const CatCard: React.FC = ({ tag, title, body, author, time }) => {
const srcGuy = `i.pravatar.cc/40?img=3`;
const srcCat = '/time-cat.jpg';
return (........
then pass it through a "Loader"
srcCat}
src={srcCat}
height={400}
width={600}
alt="card__image"
unoptimized={true}
/>
srcGuy}
src={srcGuy}
width={40}
height={40}
alt="user__image"
unoptimized={true}
className={styles.user__image}
/>
I hope that make sense :)
learned a lot in this video, had no idea about commitlint
This was such a refreshing tutorial to watch. Most people do not go into this level of depth for the project setup without a bunch of camera cuts or just saying 'clone this starter repo' with no explanation of why. Very well done. I noticed you havent posted anything new in about 7 months. Are you still planning to make more content on this channel?
More tutorials please! I love your style. So down to earth, and explain things so nicely. Need more guides like this online for sure.
Thank you for this detailed explanation! Fantastic content.
Amazing tutorial. Thanks so much for this, Alex!!! It would be nice to see some more topics for the new project - state management, logging, error boundaries, CSS themes, maybe using existing design system for the components, fetching library suggestion, caching, branching and CI/CD strategy, testing.
i am back. and I will tell for the second time that this video is awesome!
I just finished this video! How cool it would be if you continue these really practical tutorials! Looking forward to more videos from you. Thank You
keep posting advanced Next topics. cuz these are HOT
This video is perfect and it helped me a lot creating new big projects the right way!
The only thing that's missing is the the timestamps for chapters just like your newest video on creating a full stack app.
Thank you!
Great idea, I should def add those, thanks!
Another fantastic video, can't wait for the next one!
Thanks for covering topics so thoroughly and with super modern tools and practices.
You're welcome! Thanks for watching
Can't wait for the Prisma & Supabase, as well as the i18n and mono repo modules :)
hell of a single video to learn a lot of thing on production level Practice. Thank you so much. It rare to find this kind of video in one place. Keep it up
Glad it helped!
я не англичан и не француз, но ролик оказался полезным для меня, спасибо, узнал действительно для себя много нового
Great tutorial! Looking forward to all the things you mention at the end of the video!
Thank you for making this tutorial.
Instant subscribe. Thank you for teaching more advanced configs
Amazing work, thank to share your knowledge!
thx for this. alot of tuts adays are just greenfield toy apps so this is refreshing to see.
That's great feedback, thanks! Most of my do's and don'ts that I recommend have come straight from mistakes and things I've used using this stack and similar in production with other devs, so the goal is definitely to share as much of that experience as possible.
Man am I lucky to find your channel?
this is quality content at it's highest!
please do keep up with the good work by all means!!!
Glad it helped!
Wow!! just wow! thanks a lot for this tutorial, I learnt many things! Thank you so much!
This was fantastic. I've built more than a few Next.js applications, big projects with many developers, and I learned a ton from this video! I will share this with my team, looking forward to more!
Thank you!
Wow, just amazing. This is the kind of content we NEED! ❤🙏
This tutorial goes above and beyond. Thank you, it really was helpful.
Glad it was helpful!
Jeez. I don’t comment a lot but I must say: This is awesome. I’m on my phone right now just following this at 5AM and I stay fascinated, will be rewatching it tomorrow to actually implement it into a new project I’m planning onto. Was planning a solo project but why not just make it future proof? great stuff to learn as an intermediate developer to up your game. Such awesome stuff to keep things clean and efficient. You’re awesome and do a great job at explaining.
Indeed the text could be a bit bigger but you already got that from the other comments. It wasn’t too bad as you explained it all well and I was able to understand what you were typing/pasting anyways
Thanks for the kind words! Cheers.
0:00 Introduction
1:52 Project Initialization
5:04 Engine Locking
8:03 Git Setup
10:28 ESLint
16:21 Prettier
19:12 Git Hooks (Husky)
29:52 VS Code Config
37:37 Directory Structure
39:52 Storybook
53:35 Creating a component template
1:03:27 Using the component template
1:13:25 Layouts
1:23:45 Deployment
Oh wow, thank you very much! Added to the description. Cheers friend.
@@AlexEagleson No worries at all! Thank you for the excellent tutorial
This. Is. Superb. Please do more.
pure gold pls i know its alot to ask but can you keep posting , thanks from argentina
Exactly what I needed! Thank you very much
Thank you so much sir! it really helps me a lot, keep posting please.
Great video! Love the section on husky. It’s a great tool!
this is by far the best channel on this genre
keep the good work!
great tutorial, it will help to structure a professional application. 👍
This helped me improve my Eslint rules. Thanks for sharing Alex.
Also found your advice on setting up prettier and husky. Great stuff 👌
Really digging the project environment tips such as CI and directory structure. I use pnpm and wanted to avoid NPM npx command. The line in the husky file I needed was pnpm -s dlx commitlint --color --edit $1. Works great and keeps my commit messages on form.
Really nice overview that is hard to find anywhere else!
You are really great keep creating videos You are some of the few people who create so great videos !! keep it up
Fantastic tutorial! Thank you very much for sharing your knowledge.
pure gold this video.. thanks for taking your time to explain us!! Greetings from Peru!
Greetings from Canada!
SUCH A VALUABLE CONTENT :* I'm sure people here just like are certainly interested in buying your course on Udemy or something. I would love to learn a lot and not just react other things you know.
This was so helpful thank you very much
You're welcome!
@@AlexEagleson Could you perhaps have video breakpoints to show which parts of the video target which topic. Like you do have good structured content but having video timestamps and breakpoints allows you to go back and forth to bits you want if you need to go back. Other than that the video is good.
@@yousafwazir286 Good suggestion, I'll see if I can get them added and I'll make sure they're on all future videos
This was amazing. Everything explained slowly and in great detail
Watched the whole thing. Learned a lot and thanks to you I've setup the environment for the refactor of my app. Thanks a bunch, I subbed 🙏
Glad to hear! Good luck with your app!
@@AlexEagleson For my app I'm going to use Strapi (headless Node.js CMS) as my back-end. Are the best practices you proposed also applicable to Node.js? I would love to see a video where you do the same thing, but then with a back-end project.
@@KerimWillem Yes absolutely. I also use Node and Express for a couple of my other projects. The concepts are the same. I think there's even a plugin to use Express middleware in Next.js.
My rule of thumb is that if my front-end and back-end are totally coupled, as if the backend is ONLY use by my Next front end then Next APi routes are more than enough
If my backend is going to be consumed by any other services then Node/Express is a better choice to separate it
One other thing you might want to consider if dealing with high traffic and using Vercel, is that deploys API routes on lambda functions, which is great for speed and availability, but might end up costing a lot more than simply hosting your own Node server. All depends on your needs in that area.
Ultimately in terms of best practices, I like to follow the same kind of patterns described in this video:
czcams.com/video/oNlMrpnUSFE/video.html
great explaination ! thanks man !
One of the best videos I have seen, keep it going 👍
Thank you very much. From France 🇫🇷 :)
You're welcome from Canada!
Thanks for this! More content like this please! I think a more zoomed in look at the code would help as well.
Q: Has anyone attempted this with pnpm? I'm going to and I'm curious about any pitfalls, if any.
PNPM should make no difference here. It is just a package manager... However, from my experience PNPM is not worth it... Many things are harder: GitLab/GitHub Actions example, finding resolution for common issues, Cloud service support... All for what? Less 30s installing your packages?
After using PNPM on multiple projects over the last year, I just went it good old regular NPM and I am not looking back.
This is amazing. Please make a video using NextJS & Dockerfile too.
Thanks for the tutorial, not very often i see such much detailed project-setup, i have one suggestion that in the next-js app router the layouts gets replaced with the new app router thing
what a great vid Alex!!! in a world of tutorials for beginners your knowledge is a true gem. Please keep posting videos for middle+ devs. Quick question - what do you think about plopJS for automation of template creation?
Great Video! The type of depth your going into is incredible. Helped me out a lot. Keep it up!
Happy its useful, thanks!
Very helpful and nice done... calm, on point and a bunch of useful knowledge... thank you so much!
this is awesome, mate!
Your content is amazing! Already learned a lot watching for 15 minutes. Thank you very much, your work is highly appreciated.
Glad it helped!
I want more videos from you, it's just amazing 💎
This video was awesome! You really taught us how to set a proffessional configuration. I hope to see the backend courses with next. Thank you!
Thanks for this amazing tutorial! Hope you continue the series. Love from Brazil!
I learned alot from this tutorial. I couldn't stop myself to comment and appreciate your efforts to explain all steps in detail. Liked it Loved it . Hoping to see more stuff with Nextjs 13.
thank you for sharing your wisdom with us
Glad it helped
Thank you I have learn a lot with this I hope to see more in the future
Alex, this was amazing!! I just started with React and am definitely not familiar with TS at all, but overall this is exactly what I was looking for! Super awesome and thanks a million!
Video code and blog rock, great work dude!
The video is nothing about "Scalable Architecture" in Next.Js, it is more a general setup of a React app, so only the FE part. Where Next.js can do much more, it's just a clickbait title.
Thanks for warning
Cant express how great these videos are
Finally, got the quality content. Thank you brother. ❤️
Amazing video, thanks for sharing.
Can't wait the videos about Auth (exactly how to implement JWT with refresh tokens) and i18n.
This is an amazing tutorial, really loved it!
Please don't make such kind of quality content, otherwise there will be issues:-
1. I am straight, but i will fall in love.
2. Other content creator's have to delete channels.
3. Once you are trending, CZcams have to manage there storage facility.
Love your content. You earned each comment.💕
thank you for this amazing video!
Thanks for the tutorial!
Really helped this a lot, Alex! Thank you so much ;)