Setup

In this chapter, our goal is to set up Next.js. In order to do that, we first have to confirm our environment. So, it requires a specific Node.js version or all versions above that. So, let's quickly go inside of our terminal and let's run node-version which is going to print out the current node version. In case you've gotten an error here or you've gotten a lower version than 18.18 it's time for you to get the latest long-term support which you can find on nodejs.org.

The second thing we have to handle is our desired package manager. So it's not gonna matter too much which one you use, but I just want to give you a tip that I will be using BUN and I would highly suggest you use BUN as well. This is of course a personal preference, but here are some reasons why I find BUN more interesting or better over all the others which are NPM, PNPM and Yarn. First of all, when it comes to BUN install versus all the other equivalents, it is just unbeatable in speed. And that also accounts for the NPX equivalent, which is in BUN's case, BUNX.

So once you try that, all of your installs are going to be so fast that going back to npm, pnpm or yarn will just sound funny. A second close is pnpm, it is absolutely amazing but I've tried both and bon was faster at least for me. The second reason is zero config script running. So we are going to have some scripts which we are going to write in TypeScript and with ES6 imports so it's important for us to have a way to run these scripts independently and it would help us if we have out-of-the-box support for the type of code which we are going to write. As of some newer versions, Node.js officially supports TypeScript out of the box, but I'm pretty sure it still doesn't support ES6 imports out of the box.

And lastly, it's better at resolving problematic packages. So since React 19 came out, a lot of packages did not upgrade their peer dependencies. And then when you try to install that package, npm actually throws an error, whereas bun throws a warning. Or at least that was the case in my previous video right that was why I chose bun because it was very problematic because npm was problematic So I'm gonna be using BUN again. Perhaps this has changed.

I've seen some comments, people telling me, hey I got an error as well. So we are going to see. But this was the last experience that I had with it. So how do you install BUN? You can visit bun.sh.

So what is bun? Here's the official definition. Bun is an all-in-one JavaScript runtime and toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager. It also aims for 100% Node.js compatibility. So when it comes to BUNZ speed as a runtime, you can also see that it's quite amazing, but I'm not going to be focusing on that.

I already told you my two, three main reasons why I'm using it. This one, it's incredibly fast when it comes to installing packages. And the second one is that it truly is a all in one JavaScript runtime and toolkit. It can just run things with zero conflict. I absolutely love that.

And you can, of course, you know, try scrolling down here and you will see built-in core features, everything that Bun has in comparison to Node and Deno, and I think it's just super, super impressive. I found it to be everything I need when it comes to building projects. So I will be using Bun, and I suggest you do as well. You can install it both on Unix systems and on Windows with one line. And after you've installed it, you can try it out by running bun dash dash version.

You will also then have access to bun x like this. And just in case you were interested, in case you've never seen package managers or you come from, you know, some other environment, when you install Node, you will automatically get npm. So you can confirm that as well. And you will also automatically get NPX. So the reason I'm showing you this part is very simple.

For example, just in a moment we're gonna go ahead and run Next.js installation and you can see that they clearly outline NPX here. But I'm not gonna be writing NPX, instead I'm gonna be running bunx. So in case that confuses you, here all I'm trying to say is it's the same thing. So bunx is the bun equivalent of npx. I just find it to be much, much faster.

So I just want to get that out of the way so it doesn't confuse anyone. All right, so I think we're pretty good when it comes to explaining this initial part. So we've confirmed our environment, and I've explained my choice behind using bun over all the other packages here and now it's time for us to set up next.js and then verify that you have the exact same installation that I do. So let's go ahead and do that. If you want to you can visit the Next.js documentation and go into the installation here.

Or you can just follow exactly what I'm doing. So one important thing in this tutorial, I'm going to be using specific versions, right? So I will not just use at latest. Instead, I'm going to check what is the latest version, and then I'm going to use that version specifically. So I'm going to copy this, just so you can see how this would look like if you're just using NPX and NPM.

So I'm going to modify this to bunx because that's what I'm using. And instead of just running this app, I'm gonna add a dash dash version here. So this might actually prompt you to install something. If it does, you can just say yes because it needs to install the latest version. So at the moment, the latest version of Create Next App is 15.2.4.

So what I'm going to do is I'm going to run bannex create-next-app at 15.2.4. That's the way I'm going to be doing it. And now we have officially started the Next.js setup wizard. So I'm gonna name my app. You can call it whatever you want.

For example, multi-tenant e-commerce. When prompted whether we would like to use TypeScript, select yes. Same for S-Lint and the same for Tailwind CSS. I would also highly suggest that you use a source directory as well. So by default it might be set to no, so you can use arrow keys to select yes.

The app router is absolutely crucial, Make sure that is selected for yes. TurboPack, as I've understood, it's actually optional. It shouldn't change anything for you. Apparently, it's much faster if you use it. But since I originally did not develop with it, I'm going to select no here, just because I want to get the exact same results.

And we're not going to modify the import alias so we are going to leave it to be the at sign. And now we can just wait a couple of seconds until in my case bun installs all the packages I need right here. And there we go. So 12 seconds for 312 packages. I'm not sure if other package managers can do that.

This might be a bad example. Maybe they can. I honestly don't know what's the standard, but this felt pretty fast for me. So now that we have this installed, it's very important that you change directory inside of your newly installed project, right? You don't want to be running any commands before you do that.

And now you also want to open that new project inside of your IDE. In my case, that is going to be VS Code. You can use anything other, whatever you want, basically. So I'm going to go ahead and click open here. And I'm going to go ahead inside of my workspace.

And there we go, multi-tenant ecommerce. So if you get this prompt, you can press this button here. And now I think it's important for us to just go together throughout the structure just to ensure that we have the exact same things here. Let's start with the package.json. This is the crucial one, right?

You people often ask me to show this in the beginning and I absolutely agree I should be showing that in the beginning. So here are my dependencies I'm using react 19 react DOM 19 and next with 15 point 2 0.4 and Here's a very very important thing. I'm using Tailwind version four. So the last version where Next.js uses Tailwind three is I believe 15.1.7. I think that's the last version where you can find Tailwind CSS version 3 installed.

And honestly, I was thinking and contemplating long and hard which version should they use for this tutorial, because originally I developed this with Tailwind version 3. But I figured by the time everyone watches this video, by the time other people find this video, Tailwind version 4 will certainly become the standard. So that's why I ultimately decided, OK, we're just going to use the latest Next.js version and the latest Tailwind version. So that is it for package.json. Now let's go ahead and let's check out some other, you don't have to go inside of these files, but just confirm that you have the tsconfig, confirm that you have post.css.

We already went over package.json, confirm that you have the next config, the slint. In my case, I have bun.lock, which is the lock file for my bun package manager. If you opted for something else, you might have package.json.lock, yarn.lock, or the pnpm equivalent. And inside of here you should also have the source folder which should hold your app folder. And finally inside of the app folder you should find all of these things right here.

So you should also have the public folder and node modules outside of the source folder. So after you have confirmed that this is your structure, you are good to go. So the most important thing here, the Next.js version 15.2.4, the React version and the Tailwind version. Because if some of these things don't match, you might run into some breaking changes, which I'm not aware of, right? Especially if you're watching this far into the future, I might not be aware that something has changed.

So that's why I'm suggesting that you use the same version that I am. So let's finally go ahead now, ensure that you are inside of your project here, and you can just do a bun run dev or npm run dev or yarn run dev or pnpm run dev, whatever your package manager is. And now we can visit localhost 3000. And there we go. You can now see that we have our app right here.

So now that we have our app, I believe that our next step here was to install a ShadCNUI. So what even is ShadCNUI? So ShadCNUI is not a component library. It's how you build a component library. And I think that's an absolutely amazing description because that's exactly what it is.

It's basically a set of beautifully designed, accessible components and a code distribution platforms. So what we're going to do is we're going to run through the installation process here. As you can see, they have some separate instructions for Next.js 15 and React 19 and Tailwind version 4. So again, here I was contemplating what should I use here? Should I teach you Tailwind version 4 or not?

But I think ultimately this will be a good decision for us to use Tailwind version 4 simply because from now on that's going to be a standard. And if you go inside of installation and choose Next.js, you will see that they have, at least I have a note, the following guide is for Tailwind version 4. If you're using Tailwind version 3, you have to use this version of chat.cn. So In our case, we are going to go ahead and check what is the current latest version, and then we're going to run this command using that specific version simply so you can see what version I am on. And as you can see here, we have a nice little selection for our package managers.

In my case, that's going to be bun. So ensure that you are inside of your project here. And I'm just going to go ahead and change this to not be in it, but instead just to be a version here. So let's see what version am I using. There we go.

So 2.4.0-cannery.17. So at the time of making this video, the latest Shazian version is in Canary, which basically is, canary is often used, I think by definition, to first show a feature to a smaller group of people before you fully release it. But since they have put it publicly on their website as the instruction, I'm pretty sure this is more than stable enough to be used. So in the future, you can visit their GitHub and you can check what is the latest version. So in case you check this in the future and it says 2.4.0 Without this, that's perfectly fine.

That just means it's now fully out. In my case, it's not yet fully out, so I have to use the canary version. So I'm going to go ahead and set this, replace the latest with 2.4.0-canary.17. Like this. And I believe I don't have to add anything after that.

Oh, I do have to add init. So let's just add init. There we go. So bun, bun x dash dash bun shatcn at 2.4.0 dash canary point 17 in it. And there we go.

So we are now, you can see it detected next JS and it also found version for Tailwind. So this is very important that you get these two checks here. For your base color, you can use whatever you want. I'm gonna be using neutral and there we go. So now you should see some new files here.

So for example, instead of my source folder, I now have a lib folder which has my utils. And inside of here, I have a CN short for class names util. This will be very useful for when we have to conditionally merge some Tailwind classes because even though you might think that it's super simple, it is super simple, but if you are not careful you might accidentally override some classes and this util will prevent you from doing that and it's just a handy util to have. Besides that, you can click here if you're using VS Code. So you can see exactly what has changed.

So you now have a components.json, which is basically a schema file for all of these options, which we selected right here. You can see the New York style, base color is neutral, and the aliases that we've set here, right? In the package.json, you should see a couple of new classes, a couple of new dependencies installed. So that is class variance authority, CLSX, Lucid React, which we are going to use for our icons, and Tailwind Merge and Tailwind Animate CSS. The next was not modified.

It was just moved from up there to down there. So don't worry about that. And you can see that globals.css has also changed. And might I add, quite drastically changed. So let's go ahead and run this app and see if everything is working fine.

So I'm going to go ahead and do bon run dev localhost 3000 here and there we go. So what I immediately see now is that even though my system is in dark mode, the most notable change here is that this page has loaded in a light mode, right? So you should probably notice that as well. If you are running light mode, well, no change for you. But just to give you verification, yes, that is okay.

That was supposed to happen. Great. So one thing that we have to do now is learn how to add components. One component which we are most certainly going to add is going to be a button component. But here's a little thing that I'm going to do.

So if you want to, you can run bunx dash dash ban chat-cn. And what was the version? Let me just find it. 2.4.0 dash canary17. And then you would add add.

And for example, you would add the button. You can find the instructions for that on the chat.cn website here. So for example, go inside of components and find the button. I'm not going to be doing that. Instead, I'm going to do add all.

So I only have to do this once, and I am simply going to have all components. Do you need to use all components? Absolutely not. Can you add them one by one? Definitely.

The reason I'm adding all of them here is because it's easier for me to run a tutorial without constantly having to remind myself, oh, wait, what was the version that we're using? Right. So I'm just running this one time. And there we go, we now have a new components folder here, UI folder inside, and every single component in here. And you can see a lot of changes here.

So now let's go instead of app instead of page.tsx and let's clear the entire thing. Let's remove the unnecessary import and let's return a div and let's return a button from components UI button. And inside of here I'm going to say hello world. And besides this, some other things have changed. So the package json has changed, as you can see, and it installed all the Radix skeletons behind each of these components right here, as long as well as some other useful components here.

So yes, just in case you're wondering where do I get that from, also useMobileHook is something that was added. Utils remains unchanged. OK, so just confirm that you got these things as well, so we are on the same page. And now that I've added the button here, if I do banner run dev, And if I visit my localhost here again, I should just see a Hello World button right here. And if I go inside of my page, I will be able to give it a variant, for example, of destructive.

And now it looks like this. And in the future, we're going to go inside of this components UI button.tsx. And this is the charm of ChatSien. It does not hide the source code from you. So If I want to, I can go ahead and just add CVA, standing for Code with Antonio, background blue, and text white, like this.

So then I can change this. And you can see it will automatically infer that type here. And there we go. I just made a custom variant for my project. So we're going to play around with these options here definitely.

You can, of course, remove this for now. And you can see how now we immediately get the error here. So Basically, that was the goal of this chapter. It was to confirm that our Tailwind is working, to confirm that ShadCN is working. And one thing I'm going to do before we push this to GitHub is the following.

So go ahead and just write a sentence, hello world, like this. Mine is very big because I'm zoomed in, right? So feel free to zoom in if you have a large screen as I do. And what I want you to try is add some class names here. So for example, text rows 500 like this should make the text red.

And in case you're wondering, how come I have this little handy color here? How come when I was typing, I got all of this suggestions here? How come when I hover, I can see the underlying CSS here? All of that is thanks to this package. My apologies, this extension called Tailwind CSS IntelliSense.

This one right here. Make sure to update it if you haven't. So this is my version because I'm pretty sure, you know, some specific syntax definitely changed in between Tailwind version 3 and Tailwind version 4. So it's important that your extension doesn't tell you the wrong information because one thing that I use this extension for are things like invalid class. So I know that this doesn't exist because when I hover, nothing happens, Whereas when I hover here, it shows the underlying CSS.

So that's a useful tip for you. All right. So for now, you can leave it exactly like this. Confirm your Tailwind is working. Confirm you have ShadCNUI.

Confirm you can add components. Confirm you can use those components. And now what we're going to do is we're going to go ahead and we're going to push this to GitHub. Usually I don't do this, but I figured that I should give you the full process of building my app, which includes running this git commands as well. So let's go ahead and do git add and a dot, which will simply stage all the files.

You can see they are now inside of staged here like this. Then we're going to do git commit.m. And inside of here, you would write a descriptive message of what you just did. For my convenience, what I'm going to do is I'm going to simply call each commit by my chapter. So this is the chapter called 01 setup.

So that's how I'm going to call my commit. You can, of course, be more descriptive here. This is simply something that helps me with the tutorial, right? And just press enter, and you will see that it will add all of those here. So now you can see that it has been committed, right?

That's it. Well, not exactly. One problem is that this current GitHub repository, while it exists locally, it doesn't exist anywhere on the, well, we can say cloud, right? It's definitely the correct term. So head to github.com and simply create a new repository.

So I'm going to go ahead and call this multi-tenant e-commerce like this, and I'm going to set it to private. And after that, I'm going to create the repository. And after that, you have two options here. So the second one is the one we are interested in, which is push an existing repository from the command line, because we already have an existing repository. So you can just paste these three lines here and push.

And wait a second. There we go. And now when I refresh here, you will be able to see that we now have a proper GitHub repository here. And then we are going to be pushing each change here. And I'm also going to show you how to branch things just so you learn a bit extra stuff here in this tutorial.