In this chapter, we're going to set up our Next.js project, confirm our environment, get familiar with the file structure and versions of our project, and set up our component library. And finally, create a GitHub repository for this project. So let's start by setting up our Next.js project. If you head to the documentation page of Next.js and click on the installation tab you will find the system requirements. The minimum Node.js version is 18.18 and these are the supported operating systems.
So first things first, let's confirm we have a proper node version installed. You can go inside of your terminal and you can run node-v. And While you are here, also confirm these two commands. You should not be getting errors for any of these three. If you get errors for any of them, it is time to upgrade or reinstall your node.
You can do that by visiting the official Node.js website. If you have a version which is lower than 18.18 you're gonna have to upgrade as well. Keep in mind that if you are on Linux or some different operating system your versions of npm and npx may be different but as long as you're not getting any errors and you have a correct node version you are good to go. So now let's go ahead and let's actually install our Next.js application. See in here we have an automatic installation CLI command.
So I'm going to go ahead and copy it but I'm not going to run it immediately. I will slightly modify it. Instead of using add latest I'm going to write the exact version 15.3.4. So instead of latest I'm going to do 15.3.4. Why am I doing this and do you need to do this?
The reason I'm doing this is because I don't know when my viewers will come across this video. This might be a month from now, six months from now, or a year from now. And depending on that, there might be a lot of new breaking changes introduced in the latest versions. So if you want to, you can use the latest version. That's perfectly fine.
But if you want to avoid any breaking changes, meaning that you're watching this video far into the future, like six months from now or a year from now, and you just want to code alone, I'm giving you the option to use the exact version that I had at the time, right? So this is the latest version at the time of me making this tutorial. So I'm gonna go ahead and use this version. I'm going to create a project called a vibe. I'm going to select yes for TypeScript, yes for SLint, yes for Tailwind and I'm also going to select yes for the source directory.
Be careful here because I think that the default value might be no so use the arrow keys to select yes and press enter. Same thing for the app router make sure you select yes here. Yes for TurboPack but only for NextDev in my case. And I'm not going to customize the import alias so this will be the only no option for me. And now let's just wait for our dependencies to install.
After our dependencies have installed you're gonna see a success message like this. What you have to do next is you have to enter this directory with your terminal. So let's go ahead and do change directory vibe like this. And once you're inside of here you can run the ls command to see a list of files inside. Before we run this project I want to set up our IDE, the place where we are going to write some code.
For me that's gonna be VS Code. So I'm gonna go ahead and select open and I will select my new vibe project. Inside of here you should be seeing a similar or the exact same file and folder structure. So first let's confirm our versions. I'm gonna go inside of package.json.
You can see that I have TurboPack here because I selected TurboPack yes. You can see that I have React 19. You can see that I have Next 15.3.4. You can see that I use Tailwind version 4 and TypeScript version 5. And these are probably the most important versions for this project.
Of course, if you are watching this into the future and you want to use whatever are the newest versions for you, you absolutely can. You don't have to worry about this then I am simply showing this for those people who want to use the exact same versions as me. Great so about the config files I have a TS config, a post CSS config, next config and an Slit config. You might notice that Tailwind config is missing. That is because we are using Tailwind version 4 which no longer introduces a Tailwind config.
Inside of the source folder I have an app folder. Source folder is quite important, make sure you have it. So inside of the app folder here I have a favicon, globals, layout and page. You can quickly visit them if you want to. And inside of my public folder you can see that I have some SVGs here.
Great. So now let's go ahead and let's install ShatCNUI into our project. First of all let's mark these as completed. Now let's go ahead and set up ShazzyNUI. So by visiting ShazzyNUI and going into the introduction you can see that even though we are going to use it as our component library, ShazzyNUI is actually not a component library.
Instead it is how you build a component library. It is basically a collection of open code components with composition pattern that you can simply add to your project. So let's go ahead and go inside of the installation and select next.js. Let's pick our package manager here, let's copy the command. Make sure you are doing this inside of your project, so again you can run ls to confirm you are inside.
And once again instead of using latest I'm gonna go ahead and show you which version I have so for me that is 2.7.0 so let's go ahead and run the command my apologies instead of latest 2.7.0 init if you get prompted to install, you can select yes. I'm going to be using neutral for my color here. And there we go. Just like that, we have initialized the chat scene UI into our project here. You can see how it verified the framework, Next.js, and it validated the Tailwind config it found version 4.
Perfect. You can see it also installed some dependencies, modified our global CSS and created one file. So we can now go ahead and visit all of those things here. You can see that I now have CLSX, Lucid React and I believe also Tailwind Animate CSS. I think that's the new package that came from ShatCNUI.
And TailwindMerge is new as well, I believe. Great, so those are the packages that ShatCNCLI added. Now let's go ahead and look at our lib file utils instead of the source folder. In here we have a cn function which we're going to use throughout our project whenever we need to safely merge or add dynamic tailwind classes. And it also modified the globals.css by adding a bunch of variables which we can now use to build our project a theme.
It also added dark mode rules as well. Perfect. So now let's go ahead and let's learn how to add a component. So for example, let's go inside of our components here. Let's select a button component.
And let's go ahead and select a CLI option for the installation. And let's go ahead and copy this to clipboard and I'm gonna use 2.7.0 add button. And just like that we have added a component to our project. If you get prompted with the option to use Legacy Peer Depths or Force, you can select any of those two options, but if you're using the same versions as me, I'm pretty sure you will have the exact same experience. It should just work straight out of the box.
But if you get any errors or any decisions to make, you can select legacy peer depths. If you don't have that choice, perfectly fine, you can just continue. Great, so now we can go inside of source components, UI, and you can find a button.tsx. And you can see that it's using some of these new packages that it added before. And it also uses the CN, which it initialized before.
So the cool thing about ShadCNUI components is that they are open code, meaning that it's not bundled in a Node.js package. It is actually available for us to modify and build as much as we want. So now let's go ahead and let's run our project. So npm run dev, you will see dash dash turbo back here. And then you can open the localhost 3000 to see your app.
Now let's go ahead and let's modify source app page DSX so we can see some changes here. Go inside of page here and let's learn how to actually write a page component. So I'm going to remove everything and the important thing here is that your components need to be using default export, right? So the name doesn't matter. This can be called home or it can be called page.
I like to use the page convention. And now in here, I can just write, hello world. And once I save, you will see the change, hello world. If this is your first time using Visual Studio Code, if you have a little circle here it means the file is unsaved so just hit save and then it will be updated. And here's what happens if you don't do a default expert.
It will not be able to find the page. So that's why default expert is important here. But the name itself does not matter. But of course you can't use some reserved things, right? You should not be able to call this error, right?
Because error is already reserved. Great. So now let's go ahead and let's test out our tailwind. So I'm going to go ahead and add a class name here, text bold. My apologies it is font bold I forgot.
There we go and now my font is a bold. But let's try changing the color text rose 500 and now I've changed the color. You might notice that I have this little color icon and when I hover over my classes I can see the inner CSS it is applying. If you want to see the exact same thing you can go ahead and install Tailwind CSS IntelliSense package. It will be quite useful in this tutorial.
Great! Now let's go ahead and let's remove this and let's add a button from components UI button. Let's go ahead and give it some children and let's close it. And just like that you have a button here. And now I'm going to show you a quick way you can enter the button inner code.
You can use command or control and then click here and that will take you to the actual source components UI button, right? So it will be quite useful for you to learn this shortcut because I will use it quite often in the tutorial so you don't get confused how I got there that fast. Another shortcut you should learn is command space, my apologies, command P or ctrl P depending if you are on Windows. And then once you open this bar you can search for button and press like this. I'm gonna be using this quite extensively in the tutorial so it would be good that you learn this as well.
So once you're inside of the button here you can see that we can have some variants like destructive. Let's go ahead and try it out. Once you add it, you can see that the destructive variant is now active. But what happens if you go inside of the code and change this to danger? You can see how it immediately breaks and we have to change this to danger.
So what we've just done is we've changed the inner code of the button to our liking. Instead of destructive it is now called danger. So let's bring that back now and let's try creating a new one. So new and let's go ahead and try something fun like background purple 500 text white. And if you go ahead and try now you will see that you have the new option and just like that you created your own variant.
So that's the power of ShadCN UI. And now that we confirm the button is working let's go ahead and let's add all of the other components. The reason I want to add all other components is so that it's easier to follow along in this tutorial. You obviously don't need all of them and you can clean them up later but it's just going to be easier for us to have all of them at our disposal and then simply choose which ones we want to use instead of having to install and wait. So I'm gonna go ahead and shut down my app and I'm gonna run npx chat-cnui 2.7.0 dash dash all and this will add every single component to our project.
And you can see how it added all of these components but it skipped the button because it already exists. Perfect. So now we can go ahead and inside of your source components UI you will see all of these various components here. You now probably have a lot of unsaved files here, my apologies not unsaved, uncommitted files. We're going to explore what that means in a second.
So let's go ahead now and let's do the last thing that we need which is create a github repository. So I'm going to go ahead and go inside of my github and I selected new repository here. Now just a quick note, you don't have to do this. So yes, Following this step right here, creating a GitHub repository, branching out, doing commits, and opening pull requests, it's completely optional. It is simply for those who want to learn how to follow a proper Git workflow.
If that is not something of interest to you, you don't have to do it at all. Right? So I'm going to create a new repository called Vibe and I'm going to set it to private and I'm going to create a new repository here. And then I'm going to go ahead and copy these three lines because we need to push an existing repository here. But before we can do that, we have to stage our changes.
So we have 53 unstaged changes now. So let's go ahead and add a plus here. And now all of them are staged. And now let's add a commit message. So I'm going to go ahead and do 01 setup.
Basically, my commit messages will match my chapter. And then I'm just going to commit. And then what we're going to do is we're going to go ahead inside of our project, and we're going to run those three commands here Wait a second. And now if you go ahead and refresh your repository, you can see that you have your project available right here and now in here, you no longer have that button publish a branch because now you have access to your remote origin main, meaning that this is no longer a local repository, this is now a remote branch on a remote repository. Perfect!
So that marks the end of this chapter and now we are ready to start setting up our database. Amazing job and see you