Let's get started by configuring Next.js inside of our project. In order to run Next.js you're gonna have to install Node.js or alternatively you can install Bun which is something I'm gonna be using for this tutorial. Bun is a new JavaScript runtime with significant performance improvements over the existing Node.js. But if for whatever reason you want to use Node, you can do that. Let's go ahead and run the automatic installation command.
As you can see, they are using the npx command. But since I just said that I'm going to be using bun, I'm going to be using the alternative bunx. You can choose which one you want to use. Let's go ahead inside of our Visual Studio code and let's open up the terminal. Inside of here I'm going to run npx create next app at latest and then I'm going to give my app a name.
In this case I'm going to call it finance tutorial. Let's press enter and let's go ahead and set up the configuration. We're going to be using TypeScript, we want SLint, we are going to be using Tailwind, but we are not going to be using the source directory. We are going to be using the app router and we are not going to change the default import alias, meaning we're going to leave it at the at sign. Now let's wait a second for all of this to install.
Great! After you get the success message, go ahead and open up your project. I'm gonna go ahead and press on finance tutorial and you should be greeted with a message similar to this at least inside of Visual Studio Code and you can safely press yes. For the app structure you should see something like this. An app folder with a layout and page inside, public folder and some configuration files.
Depending on whether you used bun meaning bunX or you used npx you are or not going to see this bun lock file. So I am using bun, so I have this file. If you don't have this file, that's completely fine. It just means that you're using Node or NPX. Both are completely fine for this entire project.
Great. Now before we run our app, I want to install our, well, not a component library, but let's call it a command line interface which is going to help us to build our component library. So why am I explaining this in that way? Well, that's because I don't want to call this a component library because the moment you click in the documentation you have a sentence which says this is not a component library. Instead, it's a collection of reusable components that we can copy and paste into our apps.
So that's perfect for our use case because we want to build our own component library. Let's press on the installation, let's select Next.js right here. We've already run this command so no need to run this. But now we have to run the following npx chatcny latest init or if you're using bun it's going to be bunx for you. So let's go ahead and copy this command.
Let's head back inside of our terminal and I'm going to run bunx-chatcny-latest. My apologies for this. Like this. So bunx-chatcny-latest. And it or you can use npx if you're using node.
I'm going to be using the default style and I'm going to select the slate color. I'm going to be using css variables for colors. Let's wait a moment for this to install. Great! After you would install this, you should see some new folders such as the components, which should be completely empty, and the lib, which now holds the utils file.
Inside of here, you're going to have a cn method, which is going to be very useful for when we want dynamic tailwind classes but without conflicting the styles. Now we are ready to run this project. Let's go ahead inside of the terminal. If you're using Node you're gonna run npm run dev But if you're using bun you're gonna run bun run dev. Both should start the project on a localhost 3000.
So let's go ahead and open the project. And there we go. You should be seeing the Next.js landing page. Now let's go ahead and let's add a button component from Shazam library. I'm gonna go ahead and find the button component and in here you should see the installation instructions right here.
So whenever you click on here you can select whether you want to copy it as an npm, yarn, pnpm or bun instance. So since I'm using bun, I'm going to be copying the bun installation instructions. So let's head back inside of our terminal here. I'm gonna go ahead and open a new one and I'm gonna run the command. You can also use a simpler version so this is what was copied from here but you can just do bunx chatsenui at latest add button.
This is simpler. Or you can use npx chatCNUI latest add button. There we go. So just ensure you have your project running here. Let me zoom in a bit.
And in here, in the components, you should now see the UI folder which holds the button component. So this is the key difference between ShadCNUI and all the other component libraries. So ShadCNUI inserts the code of the button inside of your project. So in here I can change whatever I want. If I don't want these classes I can modify them here.
If I want to add another variant I can do that easily. So let's go ahead and try this out. So just make sure you have your localhost running and Let's go inside of the app folder. The app folder is where our client and server routing is going to live. More specifically, the page and layout files.
So the page is a reserved file name in Next.js, which indicates a route. Next.js uses file and folder based routing. So if you have a page file purely inside of the app folder, which is not surrounded by any additional folders, this represents the root page. So that's why we can find this page right here in this code. I'm gonna remove this import and then I'm going to entirely clean the return method and I'm gonna write a new one.
Inside of here I'm very simply gonna add our button component from components UI button and I'm gonna say click me. Let's save and there we go. We now have a button which says click me. And now we can access all the props which we just looked at a moment ago. So we have class name, variant, size, as child and some other props which are extended from the button HTML attributes itself.
And we can also try out these attributes here. So how about we give it a variant of destructive. That's gonna change the button to red. And here's a cool thing. If you want to, you can add your own variant.
For example, blue BG blue 600 text light. Now if I go back, you can see how TypeScript is going to automatically recommend blue to me. And there we go. Now the button is blue. You can always remove this variant.
And when you go back, you're going to get an error. This was an intro of our project and the technology that we are going to use. Next, we're gonna learn how to build our landing login page, how to set up authentication and we're going to get introduced to Hono which is going to be our library for building the API.