Тёмный

How to Build Scalable Architecture for your Next.js Project 

Alex Eagleson
Подписаться 6 тыс.
Просмотров 88 тыс.
50% 1

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
(Thanks to Henry Jaffers for the chapters!)
In this video tutorial I'll cover how to set up a Next.js project with a scalable configuration you can use to build production ready apps for your organization, or just for your own personal use.
We'll be be using Typescript, Storybook, code quality tools managed with git hooks via Husky, configuration your VS Code environment, debugging scripts, a sample component template, Next.js best practices and a deployment to Vercel.
Future tutorials will build on this covering topics like testing, internationalization, authentication, databases implementation, state management and monorepos.
The repository for the project built in this video can be found here (note there may be additional features added above and beyond the scope of this video over time):
github.com/alexeagleson/nextj...
For a written version of this tutorial please see the blog post this video is based on here:
dev.to/alexeagleson/how-to-bu...

Опубликовано:

 

8 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 261   
@mr.random8447
@mr.random8447 2 года назад
Keep posting, very few people go into this type of depth and your explanations are good!
@cowabunga2597
@cowabunga2597 Год назад
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.
@Crevulus
@Crevulus 2 года назад
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.
@SoothingRelaxation
@SoothingRelaxation Год назад
Fantastic tutorial! Thank you very much for sharing your knowledge.
@yohannesterfa9446
@yohannesterfa9446 2 года назад
never been happier with a tutorial
@adityadubey4578
@adityadubey4578 Год назад
I have rarely found a video and a teacher of your calibre sir, please continue doing this great work, thank you so much
@klutch4198
@klutch4198 2 года назад
Hell yeah, your videos rock dude. I'll be keeping up on your new releases!
@danieljayne8623
@danieljayne8623 Год назад
This content is absolutely golden, you've really taken this seriously, it's very impressive.
@facinorousgrim8883
@facinorousgrim8883 Год назад
More tutorials please! I love your style. So down to earth, and explain things so nicely. Need more guides like this online for sure.
@MrBox4soumendu
@MrBox4soumendu 2 года назад
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 👍👏✨😊
@1791lukas
@1791lukas Год назад
The best explanation that I have seen on the setup of a project.
@govindkarthikeyan
@govindkarthikeyan Год назад
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 !
@alexanderkim6657
@alexanderkim6657 2 года назад
Another fantastic video, can't wait for the next one! Thanks for covering topics so thoroughly and with super modern tools and practices.
@AlexEagleson
@AlexEagleson 2 года назад
You're welcome! Thanks for watching
@sacquer
@sacquer 2 года назад
Great tutorial! Looking forward to all the things you mention at the end of the video!
@jasonma1904
@jasonma1904 Год назад
The BEST setup of Nextjs project video I have ever seen on RU-vid. Thank you.
@layer7io
@layer7io Год назад
I don't generally comment on RU-vid 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!
@ati2757
@ati2757 Год назад
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
@trusht
@trusht Год назад
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.
@Mark00oo
@Mark00oo Год назад
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!
@user-mp5ir3wc9e
@user-mp5ir3wc9e 9 месяцев назад
High-end content on this topic. No doubts.
@joaopedrosouzarolemberg418
@joaopedrosouzarolemberg418 7 месяцев назад
I watched 10 minutes and you just tell me a ton of things that i must config or change in my project. Thank you
@allex204
@allex204 2 года назад
These tutorials are amazing, please keep posting them, really helps us who are still learning! Thank you so much.
@AlexEagleson
@AlexEagleson 2 года назад
You're welcome!
@azeek
@azeek Год назад
Fantastic tutorial. Underrated, this deserves a lot more.
@fredrikjohansson8083
@fredrikjohansson8083 2 года назад
Really want to thank you for this incredible tutorial, it's massively improved the setup I was using before!
@AlexEagleson
@AlexEagleson 2 года назад
Glad it helped!
@nicolaegeorge8688
@nicolaegeorge8688 Год назад
This was amazing. Everything explained slowly and in great detail
@KileyDorton
@KileyDorton 2 года назад
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!
@AlexEagleson
@AlexEagleson 2 года назад
Thank you!
@almostevil665
@almostevil665 Год назад
this is by far the best channel on this genre keep the good work!
@BOOGLE020
@BOOGLE020 2 года назад
Thanks for the tutorial!
@Warpgatez
@Warpgatez 8 месяцев назад
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.
@dpushov
@dpushov Год назад
Thank you so much! Creating startup project following your tutorial. Waiting for new ones
@adamkrim511
@adamkrim511 Год назад
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
@benjaminhoppe334
@benjaminhoppe334 Год назад
Exactly what I needed! Thank you very much
@HeyNoah
@HeyNoah Год назад
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!
@playboynation561
@playboynation561 Год назад
This video was extremely helpful! Thank you!
@ytdevs
@ytdevs 9 месяцев назад
Wow, just amazing. This is the kind of content we NEED! ❤🙏
@k.m.jiaulislamjibon1443
@k.m.jiaulislamjibon1443 2 года назад
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
@AlexEagleson
@AlexEagleson 2 года назад
Glad it helped!
@edmorel134
@edmorel134 Год назад
Thank you for this detailed explanation! Fantastic content.
@27sosite73
@27sosite73 Год назад
this is awesome, mate!
@brightsite7561
@brightsite7561 2 года назад
This video is pure gold
@andrewberezin2978
@andrewberezin2978 Год назад
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.
@iliatalebzade8751
@iliatalebzade8751 2 года назад
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!!!
@AlexEagleson
@AlexEagleson 2 года назад
Glad it helped!
@CoFloCipher
@CoFloCipher Год назад
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?
@baremetals
@baremetals Год назад
This is just amazing, AWESOME!!!
@Manish-pt4tn
@Manish-pt4tn 2 года назад
Thank you for making this tutorial.
@surjeetsingh5821
@surjeetsingh5821 Год назад
packed with information, i think this is the must have information for the beginner. Everything is described in easy language
@bbnowhat
@bbnowhat 7 месяцев назад
я не англичан и не француз, но ролик оказался полезным для меня, спасибо, узнал действительно для себя много нового
@luigibesani9090
@luigibesani9090 Год назад
This is an amazing tutorial. Can't wait to see more from you. Thank you very much!
@codaremeditar
@codaremeditar Год назад
Thanks for this amazing tutorial! Hope you continue the series. Love from Brazil!
@GlanceOnline
@GlanceOnline Год назад
I had to switch from Django to Nextjs for this project and you just saved me weeks of research. RU-vid doesn't deserve you.
@boxes7930
@boxes7930 Год назад
Amazing Detailed guide, thank you
@skillpoints
@skillpoints 2 года назад
Cant express how great these videos are
@botleydot
@botleydot Год назад
That was amazing, thank you man
@luisencastin1607
@luisencastin1607 Год назад
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!
@fxmdr82
@fxmdr82 Год назад
Amazing work, thank to share your knowledge!
@sincethatmoment
@sincethatmoment Год назад
Excellent video!
@vedantnn7
@vedantnn7 Год назад
This is an amazing tutorial, really loved it!
@Msnollan
@Msnollan Год назад
One of the best videos I have seen, keep it going 👍
@historybaazar
@historybaazar 2 года назад
great explaination ! thanks man !
@youtalky_com
@youtalky_com Год назад
This. Is. Superb. Please do more.
@thehomeschooldev6126
@thehomeschooldev6126 Год назад
Thank you , helpful indeed.
@mrvishav
@mrvishav 2 года назад
Finally, got the quality content. Thank you brother. ❤️
@nulblaze
@nulblaze 2 года назад
learned a lot in this video, had no idea about commitlint
@yurimuttidev
@yurimuttidev Год назад
Amazing video, thanks for sharing.
@SirJagerYT
@SirJagerYT Год назад
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.
@down__lo7359
@down__lo7359 2 года назад
Instant subscribe. Thank you for teaching more advanced configs
@RobertBMenke
@RobertBMenke 2 года назад
Great video! Love the section on husky. It’s a great tool!
@SumanPokhrel0
@SumanPokhrel0 5 месяцев назад
Very helpful. Thank you .
@for41
@for41 2 года назад
This tutorial goes above and beyond. Thank you, it really was helpful.
@AlexEagleson
@AlexEagleson 2 года назад
Glad it was helpful!
@ethansempa7501
@ethansempa7501 2 года назад
Mind blown. Great video
@chrislgr23
@chrislgr23 2 года назад
Great Video! The type of depth your going into is incredible. Helped me out a lot. Keep it up!
@AlexEagleson
@AlexEagleson 2 года назад
Happy its useful, thanks!
@vonghesjonovan
@vonghesjonovan 20 дней назад
thank you for this amazing video!
@erwin7427
@erwin7427 Год назад
Brilliant! 👏 Exactly what I was looking for so thanks and keep it up!
@samtufail3966
@samtufail3966 Год назад
Subscribed, Great Stuff Honestly. Loving it
@jacobwilliams2246
@jacobwilliams2246 2 года назад
Video code and blog rock, great work dude!
@paularosler949
@paularosler949 Год назад
Very helpful and nice done... calm, on point and a bunch of useful knowledge... thank you so much!
@pedrojunior4516
@pedrojunior4516 2 года назад
Amazing tutorial. Thanks for that.
@mr.artist486
@mr.artist486 Год назад
Wow!! just wow! thanks a lot for this tutorial, I learnt many things! Thank you so much!
@mitchlabrador
@mitchlabrador 2 года назад
Thanks! Great tutorial
@spacegrayrender190
@spacegrayrender190 Год назад
You are really great keep creating videos You are some of the few people who create so great videos !! keep it up
@namesare4fools
@namesare4fools Год назад
keep posting advanced Next topics. cuz these are HOT
@siruxsolutions
@siruxsolutions Год назад
Your content is amazing! Already learned a lot watching for 15 minutes. Thank you very much, your work is highly appreciated.
@AlexEagleson
@AlexEagleson Год назад
Glad it helped!
@nawti2371
@nawti2371 6 месяцев назад
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.
@juneroyd.quinimon495
@juneroyd.quinimon495 Год назад
Thank you so much sir! it really helps me a lot, keep posting please.
@rohitdalal3290
@rohitdalal3290 2 года назад
Really helped this a lot, Alex! Thank you so much ;)
@gmd9767
@gmd9767 2 года назад
Absolutely brilliant, I always wondered how this kind of stuff was done. You have truely made my day :-)
@BooksWeCanRead
@BooksWeCanRead 9 месяцев назад
Thank you so so so so much for this!!! Truly!! 🙏🙏
@gabrielmedeiros9806
@gabrielmedeiros9806 2 года назад
Amazing job!
@denniswolbert9319
@denniswolbert9319 2 года назад
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
@AlexEagleson
@AlexEagleson 2 года назад
Kind words, thank you!
@tikkiebest
@tikkiebest Год назад
Really nice overview that is hard to find anywhere else!
@dazecm
@dazecm Год назад
This helped me improve my Eslint rules. Thanks for sharing Alex.
@dazecm
@dazecm Год назад
Also found your advice on setting up prettier and husky. Great stuff 👌
@dazecm
@dazecm Год назад
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.
@wassimbelhadjrhouma2805
@wassimbelhadjrhouma2805 Год назад
Oii this was brilliant. great content with good explanation. Keep posting 👏
@howuseehim
@howuseehim Год назад
Thank you I have learn a lot with this I hope to see more in the future
@27sosite73
@27sosite73 Год назад
i am back. and I will tell for the second time that this video is awesome!
@shakapaker
@shakapaker Год назад
I want more videos from you, it's just amazing 💎
@almkimmolina7517
@almkimmolina7517 Год назад
Really good content! Can't thank you enough for this. I'm subscribed and hope to learn a lot from you in the future.
@halyapin
@halyapin 2 года назад
Super helpful info. Thanks
@jamilurrehmanamini4878
@jamilurrehmanamini4878 2 года назад
Great tutorial
@brandonsayers9521
@brandonsayers9521 Год назад
I don't know that I've ever posted a comment on a RU-vid 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.
@DGLcsGaming
@DGLcsGaming 2 года назад
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!
@AlexEagleson
@AlexEagleson 2 года назад
Great idea, I should def add those, thanks!
@leicodaya4660
@leicodaya4660 Год назад
pure gold pls i know its alot to ask but can you keep posting , thanks from argentina
Далее
How to Create and Publish a React Component Library
1:19:25
3M❤️ #thankyou #shorts
00:14
Просмотров 8 млн
100❤️
00:19
Просмотров 2,9 млн
How NextJS REALLY Works
28:25
Просмотров 139 тыс.
NextJS 12.1 SSR & SSG: Everything you need to know
31:18