In this chapter, we're going to learn how to set up the project. We're going to initialize Next.js with TypeScript, install and configure Chatsie and components, add a theme provider, and configure the fonts and global CSS variables. Let's start by initializing Next.js. Here on the right side I have my code editor, Visual Studio Code, and here on the left side I have opened Next.js documentation page, which you can visit by using the link on the screen. Click on get started, click on the installation tab and scroll down to find the system requirements.
It's very important that you make sure that you meet these requirements, otherwise you will have problems running Next.js. See the minimum node version is 20.9 and the supported operating systems are Mac OS, Windows and Linux. If you don't know your node version, go inside of your terminal and run node-v. If you get an error, it's time to install node. If you have a version lower than 20.9 it's time to upgrade.
Either way make sure you do that and then run this command again and make sure you have a higher version this time and no errors. While you are here also check for npx and npm. The version here isn't as important because different operating systems have different versions so you don't need to have the same version as me and I don't really know what version is the most up-to-date either. Just make sure you don't have errors for any of these three commands. Now let's go ahead and let's install.
Make sure you select npm since that's going to be our package manager and I'm just going to prepare the command. I'm not going to run it just yet. So as you can see that's why I told you to test for NPX because we are using it right this moment. So I'm going to specifically choose a version 16.1.1 instead of just using the latest. And if you haven't noticed, that is actually my latest version.
So why am I telling you to use that? Well, the reason I'm telling you to do that is so you don't have a hard time following this tutorial. Depending on when you found this video, that can be a month from now, six months from now, maybe even a year from now. And during that time period, a lot of breaking changes could have arrived in the newest version of Next.js. That isn't to say that you shouldn't upgrade.
You should upgrade, but I recommend doing that after you finish the tutorial. This way you will not have any trouble following along the way and you will be able to give yourself a challenge to finish on your own after you complete the tutorial. So it's not a bad thing that breaking changes arrive in Next.js. A lot of times Next.js takes care of backwards compatibility and if that's not possible, they offer migration scripts. So that's perfectly fine and you should be up to date in case of any security issues or things like that.
But just to make it easier for you to follow along and not encounter any breaking changes and avoid any frustrations, I recommend using the exact same version as me so we are on the same page and we have the exact same code. So let's go ahead and run this command and let's give our project a name. I'm going to choose Polaris. I'm going to use the arrow keys and select customize settings. I will select yes for TypeScript, SLint for the linter, I will leave it as no for React compiler, yes for tailwind, make sure you select yes for source directory, yes for app router and select no for customizing the import alias and give it a minute to install.
Once it's finished you're gonna see a success message like this. So what you have to do now is first change the directory of your terminal into your newest project and then do the same thing in your code editor. So I'm gonna go ahead and open folder and I'm going to select the one we just installed, Polaris. So now let's go ahead and let's review the file structure, package.json and things like that. As you can see this newest Visual Studio Code's AI feature is a little bit buggy, which is ironic considering that in this tutorial we're building our own code editor which will not be buggy.
So let's go ahead and take a look at the folder structure. Since we selected yes for the source folder we can obviously see the source folder here and inside of that we have an app folder because we selected yes for the app router. It is very important that you have the exact same file structure as me. And let's go ahead and confirm the package. Jason, since I initialize the command with NPX create next app 16.1.1, that is the exact next version that I have in my dependencies and you should have too.
And besides that, React 19.2.3 is I believe pinned to this version as well because of this option we selected. So you should probably have the exact same dependencies as me. For the dev dependencies they are probably the same as well. Great. Now let's go ahead and let's run the project to see what's on our screen.
So open localhost 3000. I'm going to zoom out and here we have the default landing page. So I believe that depending on whether you use light or dark mode, this can change as you can see. So If you have a light background, that's perfectly fine. So how do you modify this file?
Well, very simply go inside of source app page.tsx. The only thing that's important to know for now is that page is a reserved file name. So you cannot name it whatever you want. It needs to be page. And second important thing is that whatever you write here, so let's do a simple component, right?
Const page this doesn't matter I mean the name of the component. It can be called whatever you want. So if you do something like this, it obviously won't work. It will throw an error. Even if you do this, it also won't work.
It needs to be a default export and then it will work. So for now that's the only important thing for you to know. Page is a reserved file name and export default is the required way of exporting within page.tsx. Great. So now let's go ahead and test if Tailwind is working.
So I'm going to give this text red 500 and it changes to red. Perfect. Make sure you save the file and then it will change. A lot of people forgot to save the file and then they think the Tailwind is not configured. It is.
You just have to save the file. Great. Now you have probably noticed that I have this little red color indicator and that I also have these auto-completes which actually are completely valid Tailwind classes. And when I hover over I can see the underlying CSS. If you want the same thing, I highly, highly recommend installing Tailwind CSS extension.
There we go, Tailwind CSS IntelliSense. I recommend this at the start of all of my tutorials. It is an amazing extension which will help you understand Tailwind much better and make fewer mistakes. Great. So now that we have this, let's go ahead and do the second thing.
Install and configure Shazian UI components. So for now, you can shut down your app and let's head to ui.shatcn.com. You can use the link on the screen to visit their landing page. Let's go ahead and click on the menu, documentation, and by default they select the installation tab but you can find it here as well. Pick your framework for us that's Next.js, select npm and npx chat-cn-latest.
Don't run the command just yet. What I'm going to do first is I'm going to use the dash dash version to check what is the latest version. So for me it is 3.6.2 so that's why I will be telling you to use that version. Again you can upgrade later when you finish the project. But in order to avoid any headaches and to avoid having different components, different props, I recommend using the exact same version as me, 3.6.2.
So make sure you are running this command within your project. You should have some kind of indicator that you are within the Polaris folder and run npx chat-cn 3.6.2 init. This will automatically recognize the framework as well as the tailwind and then go ahead and just select the base color. I will be using neutral and give it a second to install. There we go.
So right now not much should change besides the folder structure I suppose. We have a couple of new files. One of them is components.json which is basically just a config file of the things we selected a moment ago, right? For example, our base color, We selected neutral. We didn't select this, but it automatically found that.
So that's what this file is about. You will never have to modify it yourself, really. And instead of source, we now have a lib folder with utils.ts inside. This doesn't seem like a very descriptive function, but it will actually be one of the most used functions in this project. It will be used to safely merge or create conditional tailwind classes, which seems like a simple task, but if you're not careful and don't understand how Tailwind functions, you can accidentally override yourself or create something you didn't intend to do.
This simple util right here makes sure that never happens and it has a very nice developer experience on top of all that. That's all you have to know for now. We don't have to do anything about it. So now let's go ahead and let's add some components, right? Because we just added ShadCN, we can see that the definition of it on their page is the foundation for your design system but we are not seeing any components.
So let's add all of them. So npx chatcn 3.6.2 add dash dash all and this will add every single component from chatcn to your project. And when it's finished you're going to see a message like this, basically an output of all the components that were installed. Besides that, ShadCN command also modified our globals.css file, which we are going to take a peek at right now. But let's first take a look at all of these files.
What are these files? Well, ShadCN works differently from other component libraries, primarily because it isn't a component library. It's a collection of beautifully designed components that you can use to create your own component library. So what do they mean by that? Well, if you open Source, Components, UI, you will see all of those components which you can guess what they are looking at their names, right?
But what's cool is by clicking on any of those you can actually access and modify their source code. So that is something you usually are not able to do and that's what they mean by not a component library, but a set of beautiful design components, right? A composition of primitives that allow us to modify them and create our own design system, our own brand guidelines, right? They just give us high quality primitives so we don't have to build them from scratch. And on top of that, they are very good looking from scratch.
So even if you don't modify them, they look very nice, but they are intended to be modified, right? That's why a lot of times people say all Shazian projects look the same. That makes no sense. That's like saying all CSS projects look the same. Well yeah, if you don't modify the CSS, right?
So that's how chat.cn is supposed to be used. So let's try it out. Let's go inside of app folder, page.tsx. Let's remove this class name here and let's render a button from components UI button. And I'm going to add click me here.
Make sure to save the file and do npm run dev. So I'm going to go ahead inside of my local host And the first thing you're going to notice is that your theme has changed. So regardless if you are on light or dark mode, the background is now in light mode. So that's perfectly normal. Don't worry.
And here we have our button, which simply says, click me. So what's cool about this is that this button, for example, has variants. Let's select a variant destructive and save. And what happens is it changes the color red. And what you can do is you can command click inside of the button or find it inside of source components UI button and scroll up to find the button variants.
And inside of this variant object, go ahead and write your own, for example, purple. And give it a background of purple 500 and text of white and make sure to put a comma at the end. Then save the file, go back to page, change the variant here to purple. And guess what? You just modified the source code of the button and added your very own variant.
That is what they mean by customizable, right? Usually when you use a component library you don't even see the code of the button. You just import it and the source code is in node modules but you are not intended to look at it nor are you intended to modify it. That's the difference and this is actually a very good way to learn about how to create high quality components. You can always take a peek from the pros.
So from now I'm going to remove this purple variant and just revert it back to how it was. Great! So one thing that's bothering me now is that my project is in light mode and most code editors are in dark mode by default. Case in point right here, right? So how do we hard code our project to dark mode?
Well, if you take a look at Shazian and inside of its documentation here, you can find something called dark mode. So let's take a look. Let's click on dark mode and let's click on next.js. Even if you can't find this documentation, don't worry. It's very simple to do.
You can just follow my steps. So first things first, let's install NextThemes. So I'm gonna go ahead and do npm install next themes and I'm going to show you the exact version that I have installed in my project even though I don't think it really matters. This is not really a breaking thing. So my version is 0.4.6.
So if you want to use the exact same, you can. 0.4.6. Great. Once you have Next Themes installed, you can create your own component. So let's go inside of source, components, new file, theme-provider.tsx.
The reason I didn't put it inside of the UI folder is because I want to keep that reserved for ShadCN components. Basically, components I didn't create. This way it's easier for me to keep track of things I have to take care of versus things I only have to, I don't know, upgrade, right? Kind of a mental separation, at least for me. So open the theme provider here, and we're just going to copy this code.
Again, don't worry if you can't find it, I'm going to pause the screen so you can copy. We add the use client interactive which turns this into a client component because by default components are server components in app router and we import react, we use our new import next themes and we export a component called ThemeProvider, which very simply propagates the props and renders the children as its, well, children. Great. So once you have the theme provider, let's go ahead and go inside of source, app folder and find layout. So same rule as in page.
Layout is a reserved file name. And inside of it, you will find a couple of weird things. This random export of metadata and then this random export of root layout. So this can be thought of the same as the default export that is required in page, right? We need at least one default export and that's what kind of registers the layout or registers the page.
That's how file-based routing works. So basically for now, just go inside of this root layout and go inside of HTML, body and simply add theme provider from components, theme provider. Make sure you're using the one you just created. So theme provider from components, theme provider. When it comes to imports I like to have a specific sorting organization.
I like to keep the npm ones at the top followed by alias ones and then these ones at the bottom. You don't have to follow me but I really like it this way. And once you do this, I think just by adding this you might actually get some errors. There we go, yes, you can see that we have some errors here that's perfectly fine and in fact the next step here tells you how to fix that we have to add suppress hydration warning prop to the HTML tag so I'm just going to add that here there we go And now what I want to do is I want to change this theme provider to default to dark mode. So attribute will be class, default theme will be dark.
I'm going to choose enable system and disable transition on change. And now when you refresh your app, you will see we have switched back to dark mode. So even If I change this to light mode, you can see that my browser has changed to light mode, the app stays in dark mode, which is exactly what we wanted to achieve because most IDEs are in dark mode by default. Of course, later on you can add light mode. That's why I did it using the theme provider and not directly by modifying the global CSS in a way that just removes the light mode.
So if you ever want to develop light mode later on, you will be able to do that and you will be able to change this to light. But for now, let's do it in dark mode. Now while we are inside of this layout file, I also want to modify the font. So we're going to have two fonts. One will be our sans and one will be our mono.
So instead of Geist or Geist sans, I'm not sure how to pronounce it, I'm going to be using inter. We can import that from next font Google. And instead of Geist Mono I'm gonna do IBM Plex Mono. So change this to Plex Mono. Let's change the variable of both of them.
This one to be font inter and this one to be font plex mono. And besides the subsets the mono one also needs the weight. So make sure to add these. Now let's go ahead and add the inter variable and plex mono variable. So if you have a good eye you might have noticed the change if not perfectly fine We don't really have a lot of content right now to display these new fonts, but why not do it while we are already here.
But there is one slight problem. This font didn't even load actually, and that is because if you take a look at globals.css instead of source app, you will find that font sans has defaulted to font geist sans, whereas we have changed it to font inter. So only when you save this and refresh will it actually modify. But that's not how we are going to change this global CSS. Instead I have prepared a link which you can see on the screen and using that link you can access Polaris Assets GitHub repository.
And in here you can find myglobals.css. You can see that here at the bottom I have even added some very specific CSS which we are going to need later. I will try my best to remind myself about this and explain why I have added this. But I don't think it makes sense to, you know, do this any other way than to copy and paste. It's not a lot of learning material to write each line of global CSS.
I basically just changed the way it looked until I liked how it looked. So that's why I'm telling you to copy it, right? I'm not trying to teach you anything less. So just go ahead and remove your existing globals.css and paste the new one inside. And what this will do is it will create a slight modification as you can see.
We are no longer using that black background, instead we are using this lighter one and this will actually look very well once we have all the elements of the IDE like the code editor and the file explorer and all the other things. Great! So what I want to do now is I want to push these changes to a GitHub repository so that we can start tracking each of our features and chapters in a branch. So in order to add this project to a new GitHub repository, we first have to create one. Make sure you have a GitHub account and once you do, click on the plus button and click on a new repository right here.
One thing I'm going to change that you don't have to change is the owner. So I'm using my organization code with Antonio. You don't have to change this. It really doesn't matter. So I'm going to go ahead and call this Polaris.
And for now I'm going to keep this private and I don't recommend adding any of these because we have all of them right here. So just create a repository. Great. So now we have two options here. Create a new repository or push an existing repository.
This is our case. We already have a repository, it's just local so we're going to use these three commands right here so let's copy these three commands right here let's go ahead and shut down our app and let's do the following Inside of here do git add git commit and let's go ahead and call this 01 and I'm going to call this setup right. The same as we called it here. So let me just be specific, project setup. And then once we've done that, you will also see a change here.
So of course you can use the visual editor here or you can use the command line. I kind of prefer the command line but a lot of you find it easier to use this that's also perfectly fine but for this first attempt I recommend doing the same thing I'm doing. So I did git add and then a dot which basically staged all of my changes which was as you can see 62 new files because we added a lot of new components and then I committed with a message all of those staged files And then what I'm going to do is I'm going to paste those three commands which we have copied from here. Git remote, git branch and git push. Go ahead and enter that.
And there we go. You can go back here and refresh. And you now have your newest project right here ready. What this will allow us to do is use branches. So then in the next chapter when we commit that we're going to push that to a separate branch and then you will have a very nice overview of all of your changes and all of your progress and if you ever wonder what was your state in I don't know chapter 5 you will simply find chapter 5 here and you will able to go back to that state of the project if you want to learn in that specific way.
I think it's a very useful thing to do because you also learn the proper Git workflow. Great. So one thing which you can always do is you can use this, synchronize changes, and then you can click OK. What this will do is this will basically push and pull from your remote branch. What is a remote branch?
This, right? What is on the internet on GitHub is remote and what's on your laptop on your machine is local. And this is a button which synchronizes the remote one with the local one. Great! So, amazing, amazing job for the first chapter.
You did all of this. You initialized Next.js with TypeScript, you initialized ChatCN and all of its components, you added a theme provider and changed the default to dark mode, and finally configured fonts and global CSS variables. And on top of all of that, you've set up a new GitHub repository. Amazing job and see you in the next chapter.