Let's get started and let's install Next.js. In order to do that you're gonna need to have a node version of 18.17 or later. You can quickly check that by going inside of your terminal and running node-v. If you don't have a high enough version, you can visit the official website nodejs.org and you can install the latest long-term support version. For the package manager you have a couple of options.
As you can see right here in the automatic installation they recommend using NPX. NPX is not something you're gonna have to install separately because it comes installed with Node.js so you can go ahead and quickly check NPX here as well to confirm that you have it. But for this project I'm actually not gonna be using NPX. You can of course use NPX without any issue but I want to use BUN. So BUN is a, as you can see here, a bunch of things.
A fast JavaScript runtime, a fast JavaScript package manager. Basically it's an alternative to Node and it's been recently you know gaining some traction and I've tried it out and I found it to be very very useful for running scripts and for very very fast installation times. So if you want to you can use BUN. During this tutorial I'm gonna show you alternative commands depending on what you're using. So don't worry you can still use Node and NPX but if you want to try out something new you can go ahead and install bun.
Here are the instructions for Linux and here are the instructions for Windows in a PowerShell. So let's go ahead and let's install Next.js. So if you're using npx and node this is the command you are going to run. Since I'm not gonna be using npx, I'm gonna have to run a slightly different command. Instead of npx, I'm gonna be running bannex.
Create next app, add latest, so we have the newest version, and I'm gonna call this image AI. Now we're gonna have to answer some questions. So we're gonna be using TypeScript, so you can select yes. You can select yes for SLint, yes for Tailwind, and for the source directory, usually in my tutorials I select no. But for this project I want to select yes.
Also select yes for the app router because we are going to be working with server components. I will not be customizing the import alias so I will leave this option at no. And now let's just wait a second for this to install. After the project has been installed, you're gonna have this success message at the bottom and the path to your new directory. So let's go ahead and open this up before we do anything further.
I'm gonna click open here and I'm gonna select image AI and I'm going to click open. Inside of here you should have a completely blank new project. As you can see, we now have the source folder and inside of that we have the app folder. We are going to describe each of these files a little bit more in depth, especially what this is used for, what is the page, what is the layout in the next chapter. For now, I just want to focus on setting up all the things we need, all the packages, all the initial packages we need, so we can run our app on localhost 3000 and finally see some results here.
So before we run this app there is one thing that I want to add and that is ShadCNUI. So we're gonna be using ShadCN as our, well not a component library, but as a set of components which we can copy and paste and customize inside of our project. So if you go ahead and look at the documentation right here it clearly says that ShadCNUI is not a component library. It is a collection of reusable components that we can copy and paste into our apps, which is perfect for us because one of the goals which we're gonna have in this project is also to create our own component library. So that means we do not install ShadCN as a dependency.
There is no npm install shadcn or bun add shadcn right? Instead what we do is we set up the project initially and then we add components as needed. So let's go ahead inside of the installation here I'm going to select Next.js because that's the project we are working with. And we already run this command to run the project as you can see. So no need to do this.
We already have the project. Just make sure you have opened the project in your editor. And now we're going to have to run this. The CLI command which is going to initialize this inside of our project. And again, if you're using Node and NPX, this is the command you are running.
Otherwise, you can click here and you can select any other package manager. If you're using yarn, you can do yarn or pnpm. In my case, I'm going to be using bun, but all the other options work just as fine and don't worry, you can use them freely in your project. So what's important when running this command is that you are inside of this directory. So go ahead and open the terminal.
I have this prompt which I'm just going to skip. And inside of here just confirm you are inside this new directory which you've just created. So let's go ahead and run. Bunx –bun shatcny-latest-init or npx shatcny-latest-init or yarn or pnpm whatever is the equivalent. Now for the style we're going to use the default as the style right for the color I'm going to select slate I'm going to select yes for the CSS variables and that's it.
JetScene detected everything else inside of our project. So project initialization has been completed and you can now add components. Great. We're gonna test that out in a second. What I want to do now is I want to finally run my app.
So you can either do that by running npm run dev if you're using Node or you can do bun run dev. Like this. And here's a little secret. Bun actually still uses node in the background of this command, right? Because bun is not yet entirely ready to do this but I find it good enough especially with the fact that I can also use it as a package manager and I can also use it to run my scripts.
I just like to be consistent with one command. And what's cool thing about using bun actually is that you can interchange, right? So let's just confirm that this is working and I'll go back to what I was explaining. So there we go. We have our app running on localhosted 3000 right here.
And you've probably seen this screen a bunch of times if this is not your first time using Next.js. If it is your first time using Next.js, feel free to, you know, click around and visit the docs, learn templates, and maybe even try out to deploy this small small page. And just to confirm this, so I think that you can just as easily do npm run dev even though we used bun to initialize, right? So that's the cool thing about using bun as a package manager because you can easily switch if something happens to not work you can just go back and use npm nothing scary is going to happen. Great so we have this working I've shut down the app now which means if I refresh I should get the site cannot be reached now.
And before we move on forward I want to go ahead and I want to try out and add a component from ShadCNUI. So one component that we are definitely going to need is going to be the button component. So in here you can see a list of all the components here. I specifically want to focus on the button component and here we have the instructions. So you can always do the manual installation if you want to.
So ShadCM uses Radex in the background so you can do it manually or you can use the command line interface. So as always select the command and choose your package manager. If it's npm you're just going to be using npx. So I'm going to be using bun for this so let me go ahead and add that. In my experience when you run the bun command you actually don't need this.
So I've been doing my projects without this command but you know I guess it's a flag that does something. I'm not exactly sure what. And now that you've added this, if you go inside of your source, you should now have components with UI and button of DSX inside of it. And this is the cool thing about chat-cn-ui. So usually this kind of stuff would be hidden away from us in node modules, which I guess it's okay for some specific cases, but in case of building my component library, I find it more useful to have direct access to the source code of my components.
So everything you see here can be removed, changed, modified, whatever, right? We can do any kind of change here, we can do any kind of additional logic here, we can do renaming, anything we want. We can add different variants, we can go ahead and add different sizes, all of those things and we can also change the default look of our button if that's what we want. Let's go ahead and let's try out this button. So just confirm that you have it here and in order to render this button on that screen which we just saw a moment ago we have to find it in the app folder in page.tsx.
So I just want to quickly run my app so you can see the changes in real time. So bun run dev or npm run dev depending on what you're using. Let's go to localhost, let's refresh here. There we go. So the page.vsx is the root file, let's call it that, inside of our project for now.
So go inside of this page.vsx and for example let's remove the entire return method in here. And let's write a new one. I'm just going to write a div, hello world. Let's save that and there we go. If I zoom in, you're going to see the hello world text right here.
Great. And now what we can do here is we can remove the import for the image. We are no longer going to need it and we can import the button from at slash components UI button. If you're wondering where does the at come from, The at is the import alias for our project. If you remember back when we initialized the project, I explicitly said that I'm not going to change the import alias.
So the at will target our project inside of source right here. So whenever you write at it will automatically give you auto-completion for everything that is inside of the source folder. So you can try it out yourself. If you write at you can go slash and there we go You can choose between app components and lib because that's what's inside of the source folder. App components and lib.
So let's try this again. We are going inside of components, inside of UI, inside of button. And now let's go ahead and let's render the button component inside. I'm gonna right click me. And let's close the button.
And there we go. We now have our button component right here. It currently does nothing and here's a quick tip if you go ahead and try and add an on click here, keep in mind that you will get an error. We're going to explain these errors a bit later. Basically, that's because this component at the moment is not a client component, which is a concept overall, which exists in React, not just Next.js, but it is definitely more emphasized in this Next.js framework which we are using.
We're going to talk all about that later. So for now just make sure you don't have any interactivity on this button. It just needs to be a plain old button. And here's the cool thing that we can now do. Remember when we took a look in the button source code, we saw a bunch of variants like default, destructive, outline, secondary.
And we also saw some sizes here, which basically means that we can now use these as props. So I can change the size to small and I can change the variant, for example, to disruptive. And if I click save, there we go. The button is just a bit smaller and now it has this red color. And the cool thing about this building your own component thing is that now what I can do is I can go ahead inside of my variant option right here and I can for example add I don't know premium let's call it like that And I'm gonna give this a background color of something we don't have.
Yellow 500, let's give it a text white like this. So now if you go ahead inside of your page button, you can go ahead and see that the variant will actually auto-complete the premium variant which we've just created and when I click save, there we go. We just have a custom color for our button. So that's kind of a way we're going to customize our components. I'm now going to remove this premium line, which I've added just so I leave everything as it was and you can see how Immediately there's an error here and you can see how our button lost the styles.
There we go So that's how we're gonna be using ShadCNUI Basically for any component that we need we're going to go ahead and take a look inside of here and we're going to see can we use some of these things here and it's going to help us a lot throughout this project. We are also going to build a bunch of our own components. So that's it for the first chapter we just wanted to get familiar with Next.js. In the next chapter we're going to go ahead and we're going to talk about how this app router works, what is the app router, what is this app folder, what are those server and client things, what does the layout do. We're gonna go ahead and cover all of those things.
Great, great start to this project.