So let's get started and let's set up our project. Here on the right side I've prepared the Next.js documentation and installation instructions. And here on the left side I've prepared my Visual Studio code, which is going to be my editor of choice for this tutorial. So the first step is to confirm that you have the necessary system requirements to run Next.js. So make sure that you have node 18.17 or later.
So let's go ahead quickly inside of our terminal. So if you use Visual Studio Code like I do, you can go into the lower left corner and you can select the terminal option from here. And then you can simply write node-v and you're going to get the version of your node. If you have lower than 18.17 you have to upgrade your node and you can do that simply by clicking on this link right here or use the link into the description to go to Node.js homepage and install long-term support. Now let's go ahead and let's set up our project using the automatic installation command right here.
So I'm going to copy this command and we're going to paste it inside of our terminal again. But before we press enter, we have to give our project a name. So let's do the following. Write the command as follows. So npx create-next-app add-latest and then go ahead and give your project a name so I'm gonna call this auth tutorial and now let's go ahead and answer some questions so we are gonna be using TypeScript in this project so make sure you select yes You can also select yes for S-Lint.
Make sure you select yes for Tailwind CSS because we're going to be using that to style our components. Select no for the source directory. And very important, select yes for the app router. So we're going to be using server components so make sure you select yes for that. And lastly it's asking us whether we want to customize the default import alias.
I recommend that you select no because I'm going to select no. I'm going to leave it as it is. And now just wait for all of those to install. After your project has been installed you can go ahead and open it in this location right here. So I'm gonna go ahead and do that.
I'm going to click on open right here and there we go I have a folder called Auth tutorial. I'm going to click open and if you get this big model you can feel free to press yes I trust the autos and inside of here you're gonna have a couple of config files like Tailwind config, TS config, Next config but also the app folder and inside of the app folder you're going to have a page.tsx, layout.tsx, and globals.css file. Before we run the app, I want to add one more thing inside of this project, and that is a ChatsyNUI. ChatsyNUI is going to be our, well, not exactly a component library, but as it's written here, a collection of reusable components that we can copy and paste inside of our apps. So go ahead and visit ShatCN UI, you can use the link in the description or go to ui.shatcn.com And now what we're going to do is we're going to go ahead and follow the installation instructions.
So once you go to the installation here, make sure you select next.js for the framework option. And now let's go ahead and see what we have to run. So you can see that we've already run this command. We already created our project so no need to do this again. The second thing we have to do is open our project inside of Visual Studio Code and then run this command right here.
So I'm gonna copy this for npm and let's go back inside of our terminal. Make sure you're inside of your project and run the following command npx shatcnui add latest init like this. And now we're gonna have to answer a couple of questions as well. So again it's asking us whether we are using TypeScript or not. Since our project is using TypeScript it makes sense that our components will also use TypeScript.
So select yes. For the style go ahead and select New York style and for the color go ahead and select slate color. It's asking us where is our global.css file If it's telling you app slash globals dot CSS, that is correct. So you can just press enter. It's asking us whether we want to use CSS variables for colors.
You can select yes here. It's asking us if we're using a custom Tailwind prefix. You can just leave it blank. So just press enter. It's asking us where is our Tailwind located and here's a little trick here so this is actually an incorrect placeholder here because if you take a look in our project we have tailwind.config.ts but not .js So what you have to do is press the tab key and then modify this to go to .ts and simply press enter.
And you can leave the import alias to be exactly as it is, at slash components. So just press ENTER and same thing for libs. And it's asking us whether we're using React Server components. We know that the answer is yes, because we selected the app router option in the beginning. And finally confirm all of those options.
And now wait a second for all of those things to install. Great! After Shatzion has been initialized inside of our project you're going to see a couple of changes. So primarily you're going to see a new lib folder with the utils inside with a very simple cn function. We're going to be using this throughout the project to dynamically add classes.
Next we have a components folder which for now is completely empty but later here is where our buttons are going to be, our models, our dialogues, our drop-downs, everything else. And inside of the app folder, inside of globals, you're also going to notice a change but if you didn't open the file from before you're probably not going to know what changed exactly but it doesn't matter all you have to know is that now we have ShadCN inside of our project and we can now follow the components from that package. Great! So now let's go ahead and let's actually run our project. So let's go back inside of the terminal here and let's do npm run dev.
This will start the project on localhost 3000. So let's go ahead and visit our project. Go to localhost 3000 right here and you should be seeing a similar landing page. Something like this, depending on whether you're zoomed in or zoomed out. Great!
So what I want to do now is clear this entire screen. So because I know how routing works inside of Next.js I know that I can find this file inside of the app folder inside of page.vsx. Don't worry I'm gonna go ahead and explain in the next module how I know that this is the exact page that I have to modify. So we are gonna have a small little crash course on routing inside of Next.js. Of course, if you're already familiar with that you can just skip or speed up that part.
So go ahead inside of the app folder page.tsx right here and go ahead and select everything inside of this return function and simply remove it. So starting with the main element right here all the way to the bottom, select everything and simply press delete. Great! And then you can go ahead and write a little paragraph here and just write hello Alth like this and you can remove this import for the image like that. Let's go ahead and refresh this page and there we go we now have helloAlf right here.
Now let's go ahead and test our Tailwind a little bit. So I'm gonna go ahead and collapse this and give this paragraph a class name of font-semi-bold and that will make the font bold as you can see right here. And you can see how when I hover on this I have a little tooltip which explains me which class name, sorry, which attribute has been given with this class name. If you're not having this you can go ahead and go inside of the extensions and write Tailwind CSS in Tailwind sense, select the first one and install. And that's gonna help you with writing Tailwind.
You can also see that when I write some classes I also have auto-complete. So if I'm not sure which one exists I can use the auto-complete option like this. And one cool thing is that when I give my paragraph a color, for example text green 500, you can see how I have a little box to indicate which color it is. Great! So make sure that your tailwind is working like that and the next thing I want to try out is how to add a component from Shazian UI inside of our project.
So Shazian UI is not like your usual component library because, well, as you've just read from the introduction, ChatScien is not a component library. It is a collection of reusable components that we can copy and paste inside of our apps and it's based on the Redux primitives. So let's go ahead and find a component that we are going to need. First of all, I already know that we are going to need the button component. So go ahead and find the button component right here.
And in here we have the option to manually add it to our project or we can use the command line interface. So let's go ahead and do that. I'm going to copy this command right here. I'm going to go ahead inside of my terminal here. And if you want to you can shut down the app or you can just open a new terminal.
For myself I'm just going to shut it down. And go ahead and write npx chat-cn-ui at latest add button and press enter and now that is going to initialize the button inside of our project so if you've shut down your app make sure you run npm run dev again so you're running on localhost and now let's go ahead and look inside of our components folder and in here you will see the UI folder with button.tsx and this is the cool thing about chat-cnui instead of storing the component inside of node modules like most component libraries do this one is inside of our components folder and we have full access to the TypeScript, we have full access to the props, we have full access to DisplayName, we have full access to ComponentName, to ButtonVariants, we can change every single class name in here, we can add new variants, If destructive, outline, secondary, ghost and link are not enough we can go ahead and add a third one to be whatever we want and modify it and style it how we want. Same thing is true for sizes. If we need an extra large size we can go ahead and simply write an additional class name for that.
So that's why I love ShadCNUI. It is a true library. Well, I don't know if they prefer to be called a library, but it is the best solution to write your own component library inside of your project. Great! So just make sure that you have this little button here and now go back inside of the app folder page.tsx right here and let's go ahead and import that.
So whenever I import something I'm going to be using the import alias. So I'm going to start with the at sign and this is the equivalent of me being in the root of my application. So the next folder I can go into is components slash ui and then I can find my button. And now I know that I have to import the button export like this. Now let's replace this paragraph with that new button here and let's write click me.
Let's go ahead and revisit our localhost so just refresh right here and you should be seeing a button which says click me. Yours might be a little bit smaller if you're not zoomed in like I am. And now you can go ahead and play around with the properties that this button has. For example, you can change the size to be large, you can go ahead and change the variant like this. For example, let's give it an outline variant and there we go.
And let me just show you how easy it is to modify this. So if you go back inside of your components UI button right here and if you go inside of the variants, go into the single variant object right here find the last one which for me is link and you can simply go ahead and add your own variant. For example, I'm going to call this custom and I'm going to say BG Sky 500 and text white like this. So just a very simple new variant here. Make sure you have a little comma here after the link variant and then what you can do is go back inside of your app folder page and take a look at the variants now you can see how it auto completes our custom variant here and when I select it, there we go, my custom variant is here so that's why I really like this package and I think it's going to be of great use for us inside of this auth project.
So just go ahead and remove this custom variant we're not going to need it and now you can see how we immediately have an error here so you can remove that from here as well. Great! So I hope that this kind of introduced you to Next.js and our component library. If you want to you can explore all the other components which Shazian UI has because we are going to be using quite a few of them here but don't worry we're gonna go through all of that together in the next module I'm going to be explaining how routing works inside of Next.js so if you are familiar with that you can speed up or skip that part. Great, great job!