So let's get started and let's set up Next.js inside of our project. So first of all confirm that you have the necessary system requirements. You can do that quite easily by running this command in the terminal and seeing what it prints out for your current version. Next let's go ahead and run the automatic installation right here. So I'm going to go inside of my terminal and I'm going to paste that command.
Let's go ahead and give our project a name. So for me, this is going to be a board video tutorial. For you, it can be whatever you want. For the option of TypeScript make sure you select yes because we are going to be using TypeScript throughout this tutorial. Same thing for the S-Lint, same thing for Tailwind CSS and for the source directory make sure you select no because we are not going to be using the source directory inside of this project.
And the most important of all make sure that you select yes for the app router options because we are going to be using react server components and the new app router inside of this tutorial. You can customize the import alias if you know what you're doing otherwise you can just leave it exactly as it is the at sign so just select no. And now let's go ahead and install all of these packages. After the packages have been installed go ahead and open the repository which you can see right here. So I'm gonna go ahead and click open and I'm gonna select the new folder which was just created.
If you get this prompt you can feel free to click this yes I trust the authors. Inside of here you should have the app folder with favicon, globals, layout and page.tsx inside. You should have pre-installed node modules, you should have some config files like tailwind, TSConfig, PostCSS and NextConfig. Before we run this project I want to add our component library inside. For that we're going to be using ShadCNUI.
But ShadCNUI is not a component library per se. It is a collection of reusable components that we can copy and paste inside of our application. Which is perfect for us because we are not going to need all of these components here. Instead, we're only going to need a couple of them and we're going to have to modify them to fit our design. So let's go ahead and go inside of the installation here and let's click on the Next.js and as you can see we already have the Next.js project so we don't have to run this command right here.
Instead we can just run the command line interface inside of our new project. So go ahead and copy this command or you can simply write out what you see on my screen. Make sure you're inside of your new project, go inside of the terminal here and let's go ahead and do npx chatcn-ui add latest init like this. Go ahead and select the style which you want to use. I recommend that you choose the default style because then you're gonna have lucid icons installed as a dependency.
If you select the New York style you can still work throughout the project with that but you are gonna have to use different imports for the icons which I will be using in this tutorial. So I recommend that you do the same thing that I'm doing and select the default style. And for the color it really doesn't matter I'm gonna select the slate as the base color and for the CSS variables select yes and that should automatically detect that we also have the TypeScript inside of our project and completely set up a Chatsy and UI for us. Great And now we are ready to do npm run dev which should start our application on localhost 3000. So I'm gonna go ahead and refresh here and you should see something similar to this.
There we go. Perfect! Now let's go ahead and let's clean this up and let's add a first component from this Shazam package so we can actually see how exactly we're gonna work with components and how we're gonna build our own component library. So the first thing I want to do is I want to go and find this page right here where we have the text next.js. Inside of next.js there is something called file and folder based routing.
So if you want to find this root page you have to look for the file named page. Since we don't have any other routes inside of this project because we just initialized it we know that it has to be this file right here. So if you're coming from single page application or react world this would be the equivalent of an index inside of a router. Go inside of this page.tsx right here. You can select everything which is inside of this return function and simply remove it like this so we have a clean slate to work with.
And let's go ahead and just add a little paragraph here. Hello board. And let's go ahead and remove the import image. Since we no longer need that. And once you save this you can refresh and you should see Hello Board right here.
Perfect! So what I want to do now is I want to add a component from Shazzy and UI. We can do that by going inside of the components here. And let's find the button for example. In here we can see how it's going to look like.
If you chose the New York style you can see that it looks slightly different but I'm working with the default style. And now we can choose how do we want to install it. We can do it manually by installing the Redix and then by adding this inside of our project or much simply, much more simpler we can just run the CLI command like this. So let's go ahead inside of our project here. Let's go inside of the terminal.
You can shut down the app or you can open a new one and go ahead and run npx chat-cnui add-latest-add-button and this will add the new component inside of your project but not in the way that you're used to. So usually when we install component libraries, all we have is a node-modules file, right? And then we import from that package. That is not the case with chat-cnui. Instead, this has now been added to our components folder, ui-button.tsx.
And in here you can see the exact code which is used for this button and you can see how it has all the types we need, it has the variants predefined, it uses tailwind, everything that we need and it's also of course accessible, everything which you would want in a component library button. So how do we import it? Go inside of page.tsx and let's go ahead and remove this and let's add the button from add slash components UI button and I'm gonna right click me now let's go inside of localhost 3000 and see that button and there we go it's right here and you can play around with it and you can take a look at the source code and you can see exactly what you can change So we have the variant and we have the size. So if you try and give it a size of small you can see how it gets smaller. If you go ahead and give it a variant of destructive you can see how it becomes destructive.
And here's the cool thing. Since we have the source code available, nothing is stopping us from actually adding our own variant or adding our own size or modifying the class names for already existing variants. For example, I can add success here. I can give it a text primary and BG green 500. And then I can go inside of page.tsx and change the variant to be success.
And you can see how that changed the button right here. So that's how we're going to use ShadCNLibrary to add our own components and to slowly modify them and style them according to our design. And you can see how the moment I removed that success variant from the source code of the button it also throws an error here. Great! So that this was a small introduction into our framework Next.js and also our component library chatcny.
In the next chapter we're going to do a small demonstration of how routing works inside of Next.js and then we're gonna start by adding authentication to our project.