Тёмный

How to Build a Fullstack Next.js App (with Storybook & TailwindCSS) 

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

This video is a follow up to my "How to Build Scalable Architecture for your Next.js Project" video:
• How to Build Scalable ... .
We will be building a fullstack application on top of that base we set up. If you did not follow the previous video you can either sync with the public repo and follow along, or set up your own Next.js, Typescript and Storybook project base to work from.
A written version of this tutorial is available at the following link:
dev.to/alexeagleson/how-to-bu...
The repository for this tutorial to build on top of is:
github.com/alexeagleson/nextj...
0:00 Introduction
3:39 Project Setup
5:02 Installing Tailwind
16:07 Front End Scoping
23:05 Search Component
45:54 Header & Footer Components
56:20 Primary Layout Component
1:08:37 Search Result Component
1:15:21 Results Page
1:23:16 Back End Scoping
1:27:04 Create Mock Database
1:31:12 Next API Routes
1:43:18 API Testing
1:46:03 Static vs Dynamic Pages
1:59:04 Update the Search Component
2:03:32 Tailwind Themes
2:07:39 State Persistance Between Pages
2:20:38 Summary

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

 

21 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 93   
@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 👍👏✨😊
@AlexEagleson
@AlexEagleson 2 года назад
Glad its helpful, I hope to find time to create more content soon!
@MrBumbo90
@MrBumbo90 2 месяца назад
@@AlexEagleson We are waiting for more man. You have helped me a lot. Thank you!
@brandonsayers9521
@brandonsayers9521 Год назад
Some really quiet lofi background music would bring this from a 10/10 to an 11/10. Another great video, Alex.
@MrTaraskoro
@MrTaraskoro 2 года назад
You had my curiosity in the previous video. Know you have my attention.
@joshbaker5566
@joshbaker5566 2 года назад
Another reason I love Canadiens, Alex's RU-vid Channel! Merci Beaucoup, my dude!
@GameDSS
@GameDSS 2 года назад
Your channel is a true hidden gem, my friend!
@AlexEagleson
@AlexEagleson 2 года назад
Cheers!
@coding7430
@coding7430 2 года назад
literally, i feel like the youtube algorithm surprised me with great content for the first time ever
@AlexEagleson
@AlexEagleson 2 года назад
@@coding7430 Thank you, I'm glad it has helped!
@adimaralimuddin96
@adimaralimuddin96 2 года назад
this type of video is just too hard to find. and we are all greatful for this. a really big thanks and appreciation for your works.
@AlexEagleson
@AlexEagleson 2 года назад
You're welcome!
@ingles-tv
@ingles-tv Год назад
Dear Mr Eagleson, there's so much noise, it may take time to get a solid subscriber base, but please persist, you will get there! your content and no nonsense style is top draw young man. Excellent work!
@JoaomdvFerreira
@JoaomdvFerreira 2 года назад
Love your content ❤. I have been searching alot for NextJs courses and you just nailed it. I'm just excited to see you working around next-auth on the following videos. Thank you!!
@rayusaki88
@rayusaki88 Год назад
What a goldmine your channel is! Thank you so much Alex for your contributions to the dev community! Kudos 🙌🏻🙌🏻🙌🏻🙌🏻🙌🏻🙌🏻
@riverplate2537
@riverplate2537 2 года назад
Alex, this content is gold! I hope you keep posting videos man!
@andreroodt4647
@andreroodt4647 Год назад
Fantastic tutorial. I don't often follow tutorials until completion but this one I did and I got some real value out of it. Thanks for the time and effort.
@kaiserslacht
@kaiserslacht 2 года назад
You published this at the right moment sir, perfect timing. Great video
@AlexEagleson
@AlexEagleson 2 года назад
Glad it's helpful!
@matthewweidner6734
@matthewweidner6734 2 года назад
I've been looking for a solution for next/storybook/tailwind issues for days and you've finally solved it for me! A thousand million thanks, great video!
@codingtraining0102
@codingtraining0102 2 года назад
​No one does kind of these contents but you did. This is absolutely brilliant. Love it❤❤
@john-reynolds
@john-reynolds Год назад
Unreal quality content here, thank you Alex!
@jamatultalukder9486
@jamatultalukder9486 Год назад
Your contents are amazing. They dig deep and well explained. There is no one out here in youtube to provide such rich and insightful tutorials. Please make more tutorial on this topic. I am learning a lot from you.
@MyRiki96
@MyRiki96 Год назад
Awesome video! Please keep posting!!
@coding7430
@coding7430 2 года назад
hey bro, your videos are awesome, please don't stop uploading because this is quality content and there are not a lot of people on youtube who share this knowledge
@jasonma1904
@jasonma1904 Год назад
Finished your last video and looking for this 2nd one ATM. I want to say it again. The base project setup tutorial I have ever seen on RU-vid.
@codyziebko7713
@codyziebko7713 2 года назад
Between watching the first video and this relevant video, you have increased my skill level from a 2/10 to a 6/10. You are doing an amazing job! This really helped... The linting and all the standard practice you introduced to me will not be lost! :D THANK YOU!
@AlexEagleson
@AlexEagleson 2 года назад
Glad it helped!!
@hamidmehmood6728
@hamidmehmood6728 2 года назад
@@AlexEagleson sir waiting for more video 🤩
@JRandallHunt
@JRandallHunt 2 года назад
This is incredibly helpful thank you. I'd love to see one of these for MUI as well
@adamkrim511
@adamkrim511 Год назад
Amazing content, like the first video of this series ! Just finished this video and I feel ready to start my own code on my project :) I saw you suggested a list of future ideas you have for this series. I like this because even if you didn't yet release the tutorial I know what is the best production way to do internalization is i18next for exemple. And I can go by myself implement it :)
@ahkimheng
@ahkimheng 2 года назад
ur tutorial is so great, thank you so much 🥰😍
@AlastairBatz
@AlastairBatz 2 года назад
Was setting up this same stack for a tech interview and... almost perfect timing! I'll have to make your setup and copy/paste what I'd done over it. Much slicker than mine, hope it nets me some nice points in the interview! Thank you!
@AlexEagleson
@AlexEagleson 2 года назад
I recently did an interview and used this same setup and it went over really well, hopefully it does for you too!
@AlastairBatz
@AlastairBatz 2 года назад
@@AlexEagleson glad to hear it! thank you! hope it pans out! will be back to update ;)
@asimalqasmi7316
@asimalqasmi7316 2 года назад
Great job, thanks a lot for sharing this precious knowledge.
@alou2499
@alou2499 Год назад
Should definitely continue this as a series!
@niconeiman
@niconeiman 2 года назад
Hi Alex, many thanks for the rich content. A true gem in a sea of noise! Your videos are very informative and quite well explained. Please do let me know if you are creating a Patreon's page or any donations channel to support you. Cheers and looking forward to your next video ....
@skillpoints
@skillpoints 2 года назад
Genuinely sick
@railbatyrshin7349
@railbatyrshin7349 2 года назад
Awesome 👍👍👍
@jeramiahcoffey103
@jeramiahcoffey103 Год назад
Great content! Please post more full stack industry level tutorials.
@utkarshseth3082
@utkarshseth3082 2 года назад
thanks bro for making this video this help me in setup tailwindcss for storybook
@BrainOfJS
@BrainOfJS 2 года назад
thank you so much sir That's so much pretty good have a nice day Alex Eagleson
@vonghesjonovan
@vonghesjonovan Месяц назад
Still an amazing content! thanks
@rammehar5531
@rammehar5531 2 года назад
very nice video, it is worthful for so many people if you create auth flow with external api using axios, redux toolkit
@hamidmehmood6728
@hamidmehmood6728 2 года назад
Thanks sir Alex 😍.
@jacklong2182
@jacklong2182 2 года назад
thanks for this tutorial
@KerimWillem
@KerimWillem 2 года назад
Good job!!
@ylmazcandelen3121
@ylmazcandelen3121 2 года назад
great video hope you get time to make videos on other topics you mentioned too
@zoki5388
@zoki5388 Год назад
Hopefully Alex will have some free time to make more videos, I wouldn't mind paying subscription. I'm coding this in nextjs13 and storybook7 🦉
@mohammaddarbandi6285
@mohammaddarbandi6285 2 года назад
Thanks a lot. it was very helpful. ❤❤
@yousafwazir3167
@yousafwazir3167 2 года назад
Amazing
@MrBumbo90
@MrBumbo90 2 месяца назад
Amazing videos. We are waiting for more. One small note: tailwindcss doesn't have "border-1". The smallest is "border-2". So "border-1" doesn't really do anything. Anyway, I am really hoping you find the time to make more videos.
@VictorKane
@VictorKane 2 года назад
I wholeheartedly share in the kudos for this thoroughly socially useful team-first professional approach over the tiresome ¨cool¨ (and ultimately abusive know-it-all) approach, because you are truly sharing, at a moment when many of us need this. My specific concern is over the super-creative base templates. I was wondering if the Typescript language could afford any help here in terms of automatic or class inheritance of some kind instead of manual search and replace, although of course it would probably have to be compositional and/or prototypical inheritance. Thanks!
@AlexEagleson
@AlexEagleson 2 года назад
Thank you! Much appreciated. I think it absolutely could be an option for at least part of it. Getting stories to work in an inheritance-like model could be tricky, but i'd certainly be interested to see any approaches that have tried. Since class components aren't the standard anymore there may be a sensible want to compose new component out of a base component. I'd definitely have to give that some thought
@SpriteTheDude
@SpriteTheDude Год назад
very helpful videos, I would love to see an update vid using next 13 app dir and storybook@next
@sicario55
@sicario55 2 года назад
Long for deep dive technical vids are the new new
@tigrislaesus1245
@tigrislaesus1245 Год назад
I really find your tutorial helpfull and straight to the target...we get theoretical concepts as we code via your tutorials... I wouldd however be rellay gratefull if you tell me how to implement "react-intl" langauge locale with language switcher in the toolbar of storybook... I do not want to use the addon rather simply add this langage switch feature and use "react-intl" for langage support in Storybook.
@KerimWillem
@KerimWillem 2 года назад
Hi there! I've used your videos yet again in my new job, and it's paying off big time. It has helped me to feel more comfortable as a developer. Thank you, I really appreciate the content Maybe a bit off topic but I wanted to ask you. Something I would like to learn, is how to debug better. Now I mostly use plain old console logs. Do you use the debugger a lot? If so, do you have some good advice on the matter?
@AlexEagleson
@AlexEagleson 2 года назад
I think I also could probably get better with debugging. The very first thing that I reach for in my toolkit is still a simple console.log, and I find that 95% of that time that helps me identify the issue quickly. For more complex issues I do occasionally reach for the debugger and try to step through the code watching the values of variables change. There are definitely times when I've been able to use that to identify weird behavior I would not have noticed or expected otherwise The last tool I find helpful is the React dev tools for the browser. I use Firefox but i assume they're similar on Chrome. Being able to right click on an element in the DOM inspector and have that mapped to a component which I can see the same and state of is very helpful, particularly when I am working with other people's code. A combination of the above 3 usually gets the job done, but like I said, console.log is still a perfectly valid tool to use for me if it can tell me the answer in seconds and let me move on Another option worth looking at is a launch.json script for VSCode. check out nExt's docs for how they recommend you set it up: nextjs.org/docs/advanced-features/debugging
@KerimWillem
@KerimWillem 2 года назад
@@AlexEagleson thanks!
@ekanejulius4222
@ekanejulius4222 Год назад
Thanks so much for this content, really helped me in a hackathon. But please if I observed very well, The navigation from the search page to the results page was slow compared to navigating from the results page to the actual Wikipedia page (Which is heavier). I understand it's because of Dynamic rendering but is there a way to reduce load time for SSR?
@mohamedyoussef8835
@mohamedyoussef8835 Год назад
Awesome video ++++++++++ 😃
@almost5198
@almost5198 Год назад
thanks bro
@jimmybe
@jimmybe Год назад
i would love to see the search results for broccoli, thank you.
@yousafwazir3167
@yousafwazir3167 2 года назад
Are you gonna be making more like this?
@AlexEagleson
@AlexEagleson 2 года назад
I'd definitely like to! Just a matter of finding the time these days, but that's the intention
@astrajingga99
@astrajingga99 Год назад
Good video Alex, but I am newbie in next js. Can you explain how to using next auth in scalable project? Thank a lot
@madhavnagpal1860
@madhavnagpal1860 Год назад
In our project, nextjs app ( dev build is very slow) i tried to find a way to improve it but didnt find something, would be nice if you can add specific tutorial regarding it, ( also in another app - lerna, storybook - similar issue)
@georgestatefield
@georgestatefield Год назад
17:56 What I can read about... or where I can find any handy topics or repos which represents attaching a db instance to nextjs as docker containers? So that the db would have a prewritten data (such as a default admin user with some properly stored strong password e.g. bcrypt hash or so, not a plaintext record) Do I understand correctly that the express service woulb be not neccessary in this case? Thanks for sharing a video!
@Lakorthus
@Lakorthus Год назад
Alex I having an issue trying to use cypress and Jets ts supported. My commintint and eslint are angry when I try to push my changes. Could you help me with this when you have time? Thanks in advance again for such a great content.
@CodeWithRaihan
@CodeWithRaihan Год назад
in .nvmrc should I write node js current version i'm using or lts/fermium?
@PumpedChef
@PumpedChef 2 года назад
Is there any plan for the third part with real db, Auth and internationalization?
@shivansharjit7385
@shivansharjit7385 Год назад
How can we manage ssr along with redux in next js
@HomoSapi3s
@HomoSapi3s 2 года назад
Tailwind does not work with storybook on my project. Does anyone have the same problem as well ? I got pretty much the same project setup as in the video.
@ashron4472
@ashron4472 Год назад
Would you do NuxtJS series?
@gabrielmedeiros9806
@gabrielmedeiros9806 2 года назад
Can I use ts extension on storybook directory?
@AlexEagleson
@AlexEagleson 2 года назад
I don't believe so (I could be wrong) but even if not, you can add // @ts-check to the top of your storybook config .js files to get type checking from your IDE
@dazecm
@dazecm Год назад
Trying to get Storybook working in my Next.js 13 app created with create-next-app@latest but just having lots of errors. I'm assuming storybook@next version 7 instructions means Storybook just doesn't like the latest version of next.js. Super frustrating :/
@dazecm
@dazecm Год назад
Finally got things configured. It seems StoryBook is a little uncooperative if you're using pnpm package manager and not npm or yarn. Using pnpm version 8 or greater and also StoryBook version 7.0.2 or later resolved these issues.
@blyatMail
@blyatMail Год назад
please continue this tutorial, how to manage with redux or something else
@devstuff2576
@devstuff2576 2 года назад
I don't understand how one can say they are building a scalable app with no support for internalization!
@bubbanstix841
@bubbanstix841 Год назад
why didn't you use useRef instead of useState. you didn't need to use onChange event so it makes more sense to use useRef. I'm just learning react so it would be great to benefit from your experience.
@hjman2934
@hjman2934 2 года назад
HI Alex where are you?? make more real world video please
@AlexEagleson
@AlexEagleson 2 года назад
I'm right here! I make videos whenever I have spare time, it's just hard to come by spare time sometimes. Hopefully another one soon :)
@hjman2934
@hjman2934 2 года назад
please make a video about how create components. for example how use ui frameworks and things like this.
@devstuff2576
@devstuff2576 2 года назад
I don't understand how one can say they are building a scalable app with no support for internalization!
@howuseehim
@howuseehim Год назад
Where are you?
@AlexEagleson
@AlexEagleson Год назад
Right here!
@howuseehim
@howuseehim Год назад
@@AlexEagleson Good, first of i hope you 're doing well, seconde, why you are not posting next typescript videos anymore or web dev content, third, forget about the last point I have seen your articles so I guess it's okay 👍
@AlexEagleson
@AlexEagleson Год назад
@@howuseehim mostly finding time to be honest, recording and editing are very time consuming. I'm working mostly in Rust at the moment and also taking care of a new baby, so extra time is very hard to come by! Thanks for checking in though :)
@howuseehim
@howuseehim Год назад
@@AlexEagleson congratulations 👏
@Lakorthus
@Lakorthus Год назад
Alex great stuff please Keep posting, your videos are simply one the best experience for learning! Can you consider doing the Auth Video? 🥲
Далее
How NextJS REALLY Works
28:25
Просмотров 141 тыс.
ЧУТЬ НЕ УТОНУЛ #shorts
00:27
Просмотров 6 млн
У тебя проблемы?
00:20
Просмотров 485 тыс.
Storybook 7 Crash Course - React Typescript
28:23
Просмотров 43 тыс.