Let's get started by creating a Next.js application. In order to do that, we have to meet specific system requirements, as outlined on their installation page. As you can see, Next.js requires Node.js with a minimum version of 18.18. In order to confirm what version you have head inside of your terminal and run the command node version. If you get an error or if you get a version lower than 18.18, it is time to upgrade or install.
You can do that by clicking on Node.js link within the Next.js installation page or simply googling Node.js download. As you can see, the latest long-term support version is 22.20.0 and this is the easiest way to set up nodejs on your system. Once you've done that go ahead and run this command again. I would highly recommend that you are on the same node version as me. And while you're here, also double check that you have npm and npx.
If you're using the same node version as me, you will definitely have these installed as well once you install Node.js. Keep in mind that versions of npm and npx can be different depending on what operating system you are on, so it doesn't matter that they are exactly the same as mine. They can be different versions. What's important is the node version and that you don't get errors for running any of these three commands. Once you have confirmed you have that let's go ahead and install next.js.
As you can see we have a command which we can use to bootstrap creating a next.js application but we are going to slightly modify it. As you can see they are using the at latest tag, which is perfectly fine. But in my case, and more specifically in your case, I don't know when you are watching this tutorial. For that reason, I want to make this tutorial in a way that you can follow regardless of when you are watching this. So the exact latest version at the time of me making this tutorial is 15.5.4.
So I would highly recommend that you write 15.5.4 and this way you will be using the exact same stable version that I am using and you won't have to tackle with any breaking changes that might have been added. So yes, don't worry if at the time that you are watching Next.js is on a higher version, right? The way I'm building this tutorial is so that it works for 15.5.4. If you want to upgrade later, I would recommend that you do that after you finish the tutorial. It will make it much more easier for you to follow along.
After you've done that, let's go ahead and give this project a name. So I'm going to call this NodeBase, the name of our project. Let's go ahead and install this Create Next app and let's select Yes for TypeScript We can select any linter you prefer, it will not change the project whatsoever. For example I'm going to choose Biome For Tailwind CSS make sure you select Yes Make sure you select yes for the source directory as well. In case this is your first time seeing this install wizard, you can use the arrow keys to choose between yes or no.
So make sure you select yes. Same for the app router, same for turbo pack and select no for customizing the import alias. And now let's just wait for this to install Once the project is installed you will see a success message like this. So then go ahead and immediately change directory inside of your newly installed project, nodebase. Now let's go ahead and do a simple ls just to confirm that we are in the correct repository.
You should have a readme, a biome file, node modules, public, source and some package config files. Perfect. Now that we have set that up inside of our terminal Let's also set it up inside of our IDE. I'm gonna be using Visual Studio Code, but you can use any editor you prefer. So let's go ahead and open this project.
I'm gonna go ahead and select Notebase and click Open. If you get a prompt like this, let me show you exactly how it looks like, you can select yes. Now let's go ahead and just quickly review our code. So our file structure looks like the following. As I've already mentioned by running the ls command we have some config files, we have the node modules folder, public and the source folder.
What's important is that you have the same structure as I do, which is almost 100% bound to happen if you used the exact same version as me. So that's why I'm telling you to use the same version so you don't have any surprises here. You should have the source folder, you should have the app folder and inside you should have a favicon, globals, layout and page. So let's go ahead and run this project now. In order to run our project all we have to do is go inside of our terminal and do npm run dev since we selected turbo pack we will have much faster developer builds and you will see dash dash turbo pack right here and then you will see where to access your page on localhost 3000.
So let's go ahead and go to localhost 3000 and once you refresh you should see nextjs here. Depending on if your system is in light mode or dark mode, you obviously might see this as a white background. So let's go ahead and try and change something. I'm going to go inside of page.tsx within the app folder here and I'm going to remove everything and instead I'm just going to write const page like this, return, let's add a simple div, hello world and export default page and let's save this file. As you can see I just have a plain hello world text.
Let me zoom in a bit so you can see it right here. So what happened? Why did this work? How did I know which file to modify? What happened here is that I went inside of the app folder which is basically the router of the Next.js application and I selected page.tsx which you can imagine as the root file of this project.
Page is a reserved file name within Next.js so if this was called something else it would not work, It would not be recognized as a page. The second important thing for you to know when working within Next.js is beside the reserved file name which is page you also have to do a default export. For example, if I forgot to do a default export and instead did this, you will see that I will encounter an error. The default export is not a react component in forward slash page. So that's why I did export default.
So make sure you do that as well whenever you are creating pages. Perfect. Now that we have this, let's go ahead and quickly test if Tailwind is working within our project. So I'm going to go ahead and give this div a class name, text red 500, and it immediately turns red. So now you've probably noticed that I have this cool little color indicator here.
And not only that, when I hover over classes, I can see the exact underlying CSS and I can even see the hex color and this specific value right here. So why do I have that? And it's actually super useful. If you're using Visual Studio Code, go ahead inside of your extensions here and search for Tailwind. Inside of here you will find Tailwind CSS IntelliSense.
If you're using Tailwind, please install this, it will make your life that much easier. So besides that it also offers you auto-complete. For example, if I want to add font bold or extra bold I can just do this and there we go. Once I save, it turns bold. So besides that, it will also kind of hint you if you're using an invalid Tailwind class.
If I accidentally add a typo here, When I hover over, nothing happens. But whenever I hover over a valid Tailwind class, I can see the underlying CSS. So using that little trick, you can always check if you made a typo or not for what you think is a Tailwind class. Perfect. So our tailwind is actually working.
The reason our tailwind is working, I'm not sure if you even like notice that it's working, but I meant to say is previously tailwind required a config file which we cannot find at the moment. That's because we are using Tailwind version 4 as you can see. So Tailwind version 4 if you're not familiar is well an upgraded version of Tailwind which simplified a ton of things one of them being no more config file which is absolutely amazing. You don't really have to worry about this, I'm just making sure that you are aware what tailwind version you are using, but if you install the app by using 15.5.4 you will have the exact version as I do. So yes, another thing to check is the package json.
Just double check that you have the same dependencies as me so you don't get any frustration and having trouble follow along. The biome part or slint part isn't really important That's really for your own linting preferences. Perfect. So now that we have that, let me go back and see what I've outlined here. So, so far we have set up the environment, we set up Next.js app, but we didn't set up ShadCNUI.
So what is ShadCNUI? I like to say that ShadCNUI is a component library, but that's actually not true. ShadCN is much more than that. So as per their definition, ShadCN is a set of beautifully designed components that you can customize, extend and most importantly build on. Start here and then make it your own.
That's exactly what Shazian is. Let's go ahead and click get started and let's select Next.js. In here I'm going to go ahead and select npm because that's the package manager that I am using. So before we run this again instead of doing that I'm just going to go ahead and do something else. So I'm going to go ahead and select latest dash dash version.
This way you will see the exact latest version at the time of me making this tutorial. So instead of running latest init, I will run 3.3.1 And I would highly recommend that you do the same so you don't have any surprises if some components were deprecated or drastically changed. Even though ShadCN really, really takes care of backwards compatibility. And there's a little bug in my command here it is not shatcn ui it is just shatcn make sure you don't do the same mistake and make sure you're doing this inside of node base directory so before I run this command ls make sure you see these things and once you've convinced yourself that you're inside of here go ahead and run npx shatcn 3.3.1 init. Let's go ahead and allow it to install the packages and once it's done that it will add a couple of changes, a couple of new files, folders inside of our project.
So when it comes to which color you would like to use it really doesn't matter but if you want your project to look exactly the same as mine select neutral. And the rest will be found automatically. You can see it recognized the next.js, it found version 4 tailwind config, it found the import alias, basically no problems at all setting up chat C and ui. Perfect. So what I would recommend you do is just restart your server here just in case because this was a lot of hot reload because of all the files that have been added here so you can see now instead of my source control here I have a lot of new files.
So I have components.json, I have a bunch of new files in my package.json, I have changes in my globalist.css, I have changes in my page, okay that's us, we did this, and I have a new utils file. So let's go ahead and just quickly go over these and I will try to explain what they are. So starting from the obvious new folder lib and inside we have utils.cs. So this will probably be the most used function in this project and I can immediately show you how it's used. So head inside of app page.dsx and instead of writing class names like this, imagine you had something dynamic.
For example, const something and set it to true and go ahead and open curly brackets around here and then add CN from libutils. So that exact function that I just showed you. And this is our import alias. So this is so you don't have to do this. It doesn't make too much sense now because we are very shallow, but imagine you are in a deeply nested folder.
You would keep having to do this and this and this until eventually you found libutils or you can just use the import alias which kind of teleports you to the root of the project. So make sure you added this and make sure you have wrapped your class name like this. And looking at it, nothing really changes. Let me just refresh here. So nothing really changes.
And yes, if you were in dark mode and had a black background, after adding chat CNUI, you will now have a white background. So yes, that's perfectly fine. So Nothing really changed regarding the class name for our hello world text, right? Even though I just wrapped it in this CN library. Well, yes, because by default, it can do just that.
Just normally parse your Tailwind class. But imagine you had a bunch of dynamic options for this class. For example, if something is true, in that case, change the text to green 500. And you can see that now it works. So technically, yes, you could have done this using template literals.
But trust me, we're going to have a bunch of these things, right? There will be if something is equal to, I don't know, maybe, right? And basically a bunch of these options, each of them having their own class name, and it just gets so much easier to work with CN instead of template literals. Right, so I just wanted to quickly explain to you what the CN is. Perfect.
So right now that's the only thing that ShadCN added, but what it actually added is kind of its config and its registry. So what I like to do now is I like to add all ShadCN components. So let's shut down the app for now and let's go ahead and do npx ShadCN 3.3.1 add dash dash all. So Instead of adding individual components, I'm going to add all of them. Chances are we are not going to use them all, and you can definitely clean this up later.
The reason I like to add all of them is A. You can explore and play around with all of them and B. I kind of forget the chat-cn version during my tutorials, So it's just kind of a hassle having to remember the version every time I want to add a component and have to worry if I entered an incorrect version. So this way, in the beginning of the tutorial, we just added all components. Here they are, and we will be able to use them.
So go ahead and do npm run dev and now inside of your source file you will see a new components and then UI folder. And inside of that UI folder you will see all the components that we will be able to use. And you will also find a hooks folder which has the useMobile hook. And this hook is simply used, I think maybe in the sidebar. Let's see.
Was I correct? It is useIsMobile. There we go. So yeah, it basically created some hooks as well. So you should have 60 new changes if you are using any source control to track that.
So let's go ahead and just add a simple one to see this work. So I'm going to go ahead and very simply import button from components UI button and I will render a button here. And let's go ahead and say click me. Let me go ahead and give this a class name, height full, minimum height of screen, minimum width screen, flex item center and justify center. Let's refresh this.
Every time you restart your Node.js server make sure you hit refresh. There we go. So we have a nice button here. So what's the catch with chat-cn? How is this different from material UI or anything like that?
Well, here's the thing that I personally like the most. If I want to modify this button, I could just add a class name and modify it the way I like. But I can also do this. I can literally go inside of Source, Components, Button, and I can see the entire code inside. So for example, inside of my root page here I have a variant prop and you can see that it auto completes the type safety for example outline.
What if I don't want to call it outline? What if I want to call this border? Usually you'd have no way of changing that within material UI or something like that. But in here you have the code. You own the code.
So if I want to go inside of the button, find the button variants, find outline and change this to border. You can see that immediately type safety is broken because now it will recommend border. And there we go. Works again. So I will bring this back to outline now simply because that is the correct and the better name I was just demonstrating right.
But the cool thing is you can add anything here. You can add new sizes. You can modify existing sizes. You can change the roundness. You can change the shadows.
Whatever you like or don't like. It's almost like a perfect foundation. Not almost. It is the perfect foundation for building your own component system. And that's what we will be doing in this tutorial.
We will be making our own component library with the design that matches our entire app. And the easiest way to do that is with chat.cn UI. And it is extremely well supported within the Next.js environment. Amazing. So I think this kind of is a very good start.
I would recommend that you maybe import some more components here, perhaps go to chat-cn-ui here, head inside of the components and just, you know, play around. There's a bunch of them here. For example, the calendar. Well, I mean, it makes no sense for me to go individually into all of them. But yes, there is a very good amount of this components.
And when you see this blue buttons, it means they are new components. For example, field is completely new. Or let's go ahead and look at empty. We now have empty states that we can do using chatCNUI, which is exactly the field that we actually will be using in this tutorial. All right, cool.
So we just added chatCNUI, we have that ready. And now let's go ahead and create a GitHub repository so what I'm gonna do is I'm gonna go ahead and head to github.com and create a repository so after you went to GitHub you will see a little plus button here and click new repository. And then in here, let's go ahead and call this, I'm going to call it NodeBase like that. I will set this to private and I won't add anything else, right? And let's just go ahead and click create repository.
And now in here you have two options. The first option is create a new repository from the command line, or push an existing repository from the command line. Our case is the second one. We already have a repository, it's just local. So let's go ahead and do the following you can see we have 60 uncommitted changes here and I want you to be careful now so if you're using Visual Studio Code you can use this interface to commit but in case you aren't you can use git commit commands right I think it's a little bit easier to follow the tutorial when I do it visually.
So go ahead and click inside of the source control here and find the plus button which says stage all changes. Be very careful not to accidentally click the discard all changes, right? Make sure you click stage all changes. And once you've staged all changes, what I like to do here is I like to name my messages after my video chapters. Obviously, this is not how you would do it in production.
In production, you would actually describe what you did, but in my case, I call this chapter 01 setup, so my commit message is a 01 setup, and I will then click commit. Now the problem is this is only committed locally. So this doesn't exist in this GitHub repository. But only once you've done that, once you have no committed changes, can you go ahead and copy these three lines from the new repository you've just created. Let's shut down our app here.
You can see how I have zero uncommitted changes and I will very simply run those three commands right here. So let's go ahead and add them. There we go. Go ahead back here and refresh. And here we have our project.
01 setup and we have another commit from the initial create next app. Perfect. So inside of our source folder you can see we have components and everything we did during the setup chapter which is add all of those components. Amazing! Great!
I'm very satisfied with this. I believe that marks the end of this chapter. Feel free to play around with the components. In the next chapter we're going to start exploring the layout and some more things about this project. Amazing, amazing job and see you in the next chapter.