Let's go ahead and let's set up our next JS application. First of all make sure that you have Node.js installed, specifically 18.17 or higher than that. You can check that quite easily by going into your terminal and simply running a command node-v. As you can see I have a version 20.9 which means that I am okay to proceed with this installation. If you don't have node installed or if you have a lower version you can simply click on this link here to open the Node.js installation page or you can Google Node.js and once you're on this page I recommend that you install whatever it is long-term support at the time you're watching your video.
After you've done that go ahead and confirm Node.js v again and make sure you have the appropriate version. Now we can go ahead and actually install our Next.js application. So let's go ahead and copy this right here and let's go inside of our terminal and simply paste that function and after that give your project a name. So I'm gonna call this video Twitch like this. Go ahead and press ENTER, select YES for the TypeScript option, YES for SLINT, YES for Tailwind, No for source directory, yes for the app router and no for customizing the import alias.
And now just wait a couple of seconds for this to initialize. After it's been initialized you can see that we have a success message here and a location of our project. What we have to do now is open that project so I'm going to click open here and there we go I have a folder video twitch exactly as I've named my project. If you get this pop-up feel free to press yes right here and let's briefly take a look at our project structure now. So we have an app folder which has globals.css and inside of here we have some predefined code you can see we have this root, We have this color scheme here, we have this body element here and we have Tailwind directives so we can actually use it inside of our project.
Besides that we have a layout file which is kind of like a skeleton for our pages and views. We're going to talk about this a bit later. Right? And here is another important file page.tsx. So page.tsx is an actual route.
Right? And let's go ahead and run this project so we can see exactly what's going on here. So let's go inside of our terminal here and do npm run dev. After you've run this application, go ahead inside of your localhost 3000 and you should be seeing a screen similar to this. It might be in light mode for you, for me it's dark mode because I use that as the default mode on my laptop.
For you it might be light, it doesn't matter. Great, what I want to do now is I want to see how I can modify this page. So let's go inside of the app folder page.tsx right here and I want to remove everything that's rendered inside. I don't need any of this big text here. Instead, I want to write a simple paragraph Hello Twitch clone.
Like that. And now as you can see I have a very small text here so I'm just going to zoom in so you can clearly see it here what I want to do now is try out whether our tailwind has been successfully configured in here So what you can do is give this paragraph a class name of text red 500 and font bold. Once you save you can see that my Tailwind is correctly configured So this is now a red text with a bold font. And if you're wondering how come I have this little color box and how come when I hover on classes, I can see this useful pop-up which tells me exactly what is the weight of this bold class, that is because I have an extension called Tailwind CSS IntelliSense. So make sure you search for Tailwind, select the first one and install this package right here.
Great! So now that you know how this works, what I want to do next is install ShatCNUI which is going to be our component library which we're gonna well it's not exactly a component library it is more of a collection of components where we can copy and paste components that we need inside of our project. So what I want you to do is just save this file, make sure everything is saved. You can collapse all of these things, go inside of your terminal here and shut down your application. So make sure your application is not running while you do the next steps.
Then what we're gonna do is install Shazian UI. So there we go as I just corrected myself. So Shazian is not a component library, it is a collection of reusable components that you can copy and paste inside of our application. So let's go ahead and install that for Next.js. We've already created our project so we can skip this step.
Instead we can go immediately into the step 2 which is running the CLI. So I'm gonna copy this command for npm. I'm gonna go inside of my terminal here and I'm just gonna paste it. So this is what it looks like and you can just press enter. And now we have to match the options from our initial configuration to this configuration.
So we selected yes for TypeScript when we configured our project. So make sure you select yes for TypeScript here as well. It's asking us which style we would like to use. I highly recommend that you go with the default option because that is what I'm gonna be using. If you select New York, it's gonna look slightly different and you're also going to have some different packages installed.
So for the sake of following this tutorial select the default option and just press enter. For the color go ahead and select neutral. It's asking us where is our global CSS file and you can clearly see that it is right here in the app folder globals.css so this is correct. Don't worry if the text is cut out so this is just a place holder you can press enter you can see that once I pressed enter it's been correctly found here. Now it's asking whether we want to use CSS variables for colors.
Select yes here and here's the thing we have to modify. So it's asking us where is our tailwind.config located and for me it's asking where is tailwind.config.js located and in here I have a placeholder again for .js if you have it for .ts by chance if you're watching this into the future it could be that this has been modified and you don't have to do anything here but for the rest of us which have this little issue here we have to modify this to target the .ts file and not .js file. It's not going to be a problem if you press enter here you're just going to have one unnecessary file So let's go ahead and resolve that. So very easily you can see in our file explorer here that I don't have tailwind.config.js, I have tailwind.config.ts. So I simply have to tell this command line interface to target that file instead.
And instead of clicking enter here what I'm going to do is press the tab option and then you can see how this placeholder now turned into text and I can delete .js and enter .ts and just press enter. The alias for components is correct you can press enter here same for lib utils and now it's asking us whether we want to use react server components so the answer for that is yes because we are working with app router in this project and now you have to confirm all of that config so just press enter or Y and wait for a second for all of that to install. Perfect and now let's go ahead and run our project again to see what has changed. So let me just refresh this and For me what's changed is that I went from dark mode to light mode. So if you were already on light mode I'm not sure that you're actually gonna see any difference but if you were like me and on dark mode now everything is light by default, right?
So what I want to practice now is how to add a component from ShadCN library inside of our project. We can do that quite easily by going inside of the components here. So I'm just going to zoom out a little bit. Go ahead and find the component you like from this chat CNUI library for example button component and what we're gonna do is we're gonna run this installation command so npx chat CNUI latest add button so go ahead and copy this for npm Let's go back inside of our terminal here. You can either shut down the app and run the command or you can click on this little plus icon here so you have two terminals running.
And inside of this second one I'm gonna paste this. So npx chat-cnui add latest add button and just press enter like this and that's going to install the button. That is it. We now have our very own button component. So again, make sure you have at least one terminal running here and let's take a look at that button component.
So inside of our project we now have a components folder, UI folder and inside button.dsx folder right here and you can see how this is literally copying and pasting some code inside to enable us to have a button and it is built on top of Redix UI. What's great about this is that it gives us complete ownership and control of our button. No matter how heavy we want to modify our button, we can do that because we have the source code to that button. You can see that we have the exact sizes in pixels. Everything we need from borders to roundedness to colors to variants.
We can modify and rename anything we want here. So ShadCN is perfect for building your own component library which is what we're going to be needing for our Twitch clone. So let's go ahead now inside of our app folder, inside of page.tsx right here and instead of rendering a paragraph I actually want to import that button component and I can do that by importing it from add slash components slash UI button. So exactly the place we were at. And inside I'm gonna right click me like this and we can remove this image import.
We no longer need that. So let's revisit our localhost and there we go. So I of course zoomed in my page. Yours is probably much smaller than mine, but this is what that button looks like. And let's go ahead and play around with it a little bit.
So we can give it a size of small, for example, and now it's a bit smaller. We can enlarge it by giving it a size of large. We can also change the variant for example let's give it a variant of destructive. Now it looks like a danger button something we would use to delete a record and we can also play around with ghost variants and some other variants that it has. Right?
But here's the cool thing. Let's go ahead and let's revisit our button component. So UI button right here. Inside of this button variants which you're seeing right here inside of this object where we just have all of those variants listed, you can clearly see the exact CSS that is applied every time you add one of those variants to your button. And the cool thing about it is that nothing is stopping you from adding your own.
For example, let's write custom and let's write text white BG blue 500 like this. So make sure you add a little comma here so you don't have an error and then custom text white BG blue 500 and save the file. Go back inside of your button and now when you try in your variants here, there we go we have an auto completion for our new variant custom and when I save the file there we go it has my reusable variant here so that's why this Shadsean component is so cool because it truly gives us complete ownership of our components. Let's head back inside of this button and now let's just remove that custom variant. We are of course later gonna add some of our our variants but this was just for trying it out and once you remove this and save and go back to page you can see that now we have an error here because this no longer exists.
Great! So you've just learned the basics of setting up your Next.js project, working with Tailwind and also how we're gonna use chat-cn to add all the necessary components we need. Great, great job.