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.
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.
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 !
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.
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 don't know that I've ever posted a comment on a RUclips 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.
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 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.
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 👍👏✨😊
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?
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
I don't generally comment on RUclips 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!
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!
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.
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!
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
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.
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
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.
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.
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.
@@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.
@@Badadodadoop 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: ruclips.net/video/oNlMrpnUSFE/видео.html
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!
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.
![YoungBoy Never Broke Again - Missing Everything [Official Video]](http://i.ytimg.com/vi/dTYeMZGzOzw/mqdefault.jpg)
Keep posting, very few people go into this type of depth and your explanations are good!
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.
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.
never been happier with a tutorial
I had to switch from Django to Nextjs for this project and you just saved me weeks of research. RUclips doesn't deserve you.
The best explanation that I have seen on the setup of a project.
The BEST setup of Nextjs project video I have ever seen on RUclips. Thank you.
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 !
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.
High-end content on this topic. No doubts.
I watched 10 minutes and you just tell me a ton of things that i must config or change in my project. Thank you
Hell yeah, your videos rock dude. I'll be keeping up on your new releases!
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.
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
I don't know that I've ever posted a comment on a RUclips 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.
thank you for this amazing video!
Wow!! just wow! thanks a lot for this tutorial, I learnt many things! Thank you so much!
I have rarely found a video and a teacher of your calibre sir, please continue doing this great work, thank you so much
packed with information, i think this is the must have information for the beginner. Everything is described in easy language
Fantastic tutorial. Underrated, this deserves a lot more.
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!
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
This content is absolutely golden, you've really taken this seriously, it's very impressive.
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!
Thank you so much! Creating startup project following your tutorial. Waiting for new ones
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!
keep posting advanced Next topics. cuz these are HOT
this is awesome, mate!
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 👍👏✨😊
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.
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
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!
I don't generally comment on RUclips 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!
Great tutorial! Looking forward to all the things you mention at the end of the video!
Really want to thank you for this incredible tutorial, it's massively improved the setup I was using before!
Glad it helped!
Oii this was brilliant. great content with good explanation. Keep posting 👏
Thank you for this detailed explanation! Fantastic content.
Wow, just amazing. This is the kind of content we NEED! ❤🙏
great tutorial, it will help to structure a professional application. 👍
Thank you , helpful indeed.
These tutorials are amazing, please keep posting them, really helps us who are still learning! Thank you so much.
You're welcome!
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!
Great idea, I should def add those, thanks!
This. Is. Superb. Please do more.
Thank you so much sir! it really helps me a lot, keep posting please.
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!
Instant subscribe. Thank you for teaching more advanced configs
i am back. and I will tell for the second time that this video is awesome!
this is by far the best channel on this genre
keep the good work!
This tutorial goes above and beyond. Thank you, it really was helpful.
Glad it was helpful!
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.
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 :)
я не англичан и не француз, но ролик оказался полезным для меня, спасибо, узнал действительно для себя много нового
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!
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 :)
Exactly what I needed! Thank you very much
Great video! Love the section on husky. It’s a great tool!
Thank you for making this tutorial.
pure gold this video.. thanks for taking your time to explain us!! Greetings from Peru!
Greetings from Canada!
Thanks for this amazing tutorial! Hope you continue the series. Love from Brazil!
Thank you very much. From France 🇫🇷 :)
You're welcome from Canada!
Really nice overview that is hard to find anywhere else!
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!
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.
Finally, got the quality content. Thank you brother. ❤️
pure gold pls i know its alot to ask but can you keep posting , thanks from argentina
thank you for sharing your wisdom with us
Glad it helped
Amazing work, thank to share your knowledge!
You are really great keep creating videos You are some of the few people who create so great videos !! keep it up
This was amazing. Everything explained slowly and in great detail
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.
Great Video! The type of depth your going into is incredible. Helped me out a lot. Keep it up!
Happy its useful, thanks!
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.
Video code and blog rock, great work dude!
Very helpful and nice done... calm, on point and a bunch of useful knowledge... thank you so much!
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.
I want more videos from you, it's just amazing 💎
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.
One of the best videos I have seen, keep it going 👍
Your content is amazing! Already learned a lot watching for 15 minutes. Thank you very much, your work is highly appreciated.
Glad it helped!
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.
@@Badadodadoop 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:
ruclips.net/video/oNlMrpnUSFE/видео.html
Thanks for the video
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!
This is an amazing tutorial, really loved it!
Cant express how great these videos are
This is amazing. Please make a video using NextJS & Dockerfile too.
Thanks for the tutorial!
great explaination ! thanks man !
Thank you I have learn a lot with this I hope to see more in the future
Hei! Thank you for this amazing, unique type of tutorial.
You're welcome!
That was amazing, thank you man
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 just amazing, AWESOME!!!
This is an amazing tutorial. Can't wait to see more from you. Thank you very much!
Super helpful info. Thanks
Amazing video, thanks for sharing.
Amazing Detailed guide, thank you