NextJS 13 + Chakra UI (using typescript) - Project setup

welcome back everyone today we are going to learn how to set up our next JS 13.4 with typescript and chakra UI okay as you can see I have an empty folder open it inside my visual studio code so I'm gonna start by running the typical command I'm going to open my console paste it and I want to do this in this current directory so would you like to use typescript yes for this project as linked no problem Tailwind no because we will be using shocker UI Source directory no app router for sure so the app folder the app router customize the default now okay so let's just wait until this finishes so now that the installation has finished it let's just clean up a little bit our initial files okay so let's go inside up first we don't need this this file can go away our globals I'm going to clean everything inside it okay and we shall go to our root page we can delete these two Imports and inside the return I'm gonna get rid of this Main okay and this is it for the moment okay that out of the way we can continue and now start installing chakra UI inside our project so I'm inside the official documentation I'm going to click get started and then I'm going to scroll down look for next JS this framework point and I'm going to be following this okay so you need to install this but I'm gonna just mention you mention the following for this specific project I will go with this bit only why is that because this emotional react emotion style it actually are packages that relate to CSS stuff and we won't need them as we will be using shakary Y so I'm actually a bit confused why this is kind of recommended for the installation if chakri Y is going to replace the typical CSS so and also framer motion this is for you to framework motion is is [Music] um the way you animate your website your application so you don't need that I mean I don't need that for this specific tutorial so I'm going to go just with this two packages that actually relate to what I'm trying to do so you need to make sure that you have what you need in case you need more so in the older version of nextgs we add the page uh the pages folder but now we have the app folder the app directory which means this needs to be a little bit different the configuration okay and I'm gonna mention right away that when you use some sort of providers as far as I know you always need to use use client okay we know that we are using the latest next.js version and for that reason of course all the components are server-side components by default but UI needs to be a client-side component otherwise it will not work so I'm just gonna copy this and create this file providers.tsx inside inside app so row providers dot ESX I'm gonna paste all of that okay cool what else now we need to use the providers to wrap our children so the content of your app and for that we need to go inside layout firstly import the providers so you can use them of course and then use them to wrap the children cool so now let's go and create a route inside our project we're going to call this route out to so all the routes have the usual syntax which is Page dot JS or in this case TSX for typescript right and RFC I don't need this and this is going to be called um how to guide okay so firstly let's let's just run our development server npm run them and see if this is all working Okay so the root is working we definitely see ohm so top left corner good let's test our route and we call it this route how to how to let's check for any errors looks like we have no errors which is fine which is great cool so now we need to use chakra UI to do a bit of styling so I'm gonna go to my auto page and I'm actually gonna first of all as I said chakra needs to use client okay after that I'm gonna copy few imports from Chakra all the components that I need and in this return I'm just gonna copy paste the content there's no point to spend time explaining you these components because you can simply Google them but as you can see it is working okay cool so this is all working and this means we successfully install it Y in our next next GS project using typescript Okay cool so now we have our next JS 13.4 project using typescript and shockery Y and this works no problems no errors all good but the thing is if you want to use metadata you have several routes and you want to use metadata how are you going to do this so this is time for a confession I try to use metadata on on this page and I couldn't why is this because metadata cannot be used in conjunction with use client but for you to use sharply y you need to use use client in case you are using the latest next.js version as I'm showing you here so I tried several ways and I couldn't make it work using the latest next JS version I couldn't use metadata here in this page so this is kind of a confession and the challenge okay so can you figure out a way to make this work can you figure out a way to use what we have here and also add specific metadata for this page while using the latest next JS version so this is the challenge in the future I will possibly try to do this again but trust me I spent long long minutes trying to figure out this and I couldn't so if you can great let me know in the comments share with the other viewers because if people decide to go with next and why chances are that they also need to use some metadata even static metadata so if you know a solution please leave that solution in the comments below thanks for watching I'll see you on the next video bye

Channel: The JavaScript Way

Views: 1,831

Keywords: nextjs, typescript, chakra ui, nextjs 13.4 project, nextjs project setup

Id: yVGnOuq0iZM

Length: 10min 41sec (641 seconds)

Published: Wed Jul 26 2023