So let's go ahead and let's set up our project. Here on the left side I've prepared my Visual Studio Code which is my editor of choice for this tutorial. And here on the right side I've prepared my browser, in my case it's Google Chrome. So let's go ahead and let's open up our terminal. You can of course use any terminal you want but I'm going to use the one inside of Visual Studio Code.
In order to access that terminal all you have to do is go into the lower left corner and click on these two icons right here and then just go ahead and select terminal like this. Now we're going to run a command which is going to initialize our next 14 project. Let's go ahead and write npx create-next-app at latest and now let's go ahead and give our project a name. In my case it's going to be Trello-tutorial like this. And let me just explain what this at latest means so at latest specifies that we are using the highest or the most up-to-date version of this package right here so once you've written this feel free to just press enter And now let's answer some questions about the setup of our project.
For the TypeScript option, we're going to select yes, because we're going to be using TypeScript. For the SLint option, we're going to select yes as well. We're also gonna be working with Tailwind so select yes for that. Now for the source directory make sure you select no. Mine is pre-selected and if you're wondering how to change between the options you can use the arrow keys on your keyboard.
So just make sure you select the no option for source directory. Now very important for the app router make sure you select yes because app router allows us to work with server components and use the new stable server actions, which is going to be something we will be exploring in this tutorial. So make sure you select yes for this option. Now whether you would like to customize the import alias is completely up to you of course but I would recommend that you follow the exact options that I have so you have the closest setup to mine. So make sure you select no for this option and that's gonna leave this at sign as the default import alias.
If you don't know what an import alias is don't worry once we start coding it's gonna be pretty clear. Perfect and now just go ahead relax and wait for all of this to install. After the installation has been complete you're going to see this success message right here. What we have to do next is open up that project inside of our editor. So just for now I'm going to close my terminal and I'm going to click on the open right here and then I'm going to select Trello-tutorial because that is the name of my project and just go ahead and click open and If you get this big prompt feel free to press yes.
Great and now once you open your project you should have this kind of project structure. You should most certainly have the app folder and inside you should have the globals, layout and page. You should have the node modules which just means that this has been installed for you and you should have the public folder and of course some configuration files for Tailwind like this, for TypeScript, for S-Lint and some gitignore files right here. Before we start this project, I just want to install one more package inside and let's go inside our terminal again and I'm gonna go ahead and please excuse me I have to upgrade my terminal so I'm just gonna pause for a second you probably don't have this so ignore that great so excuse me about that and now let's go ahead and write mpx shed-cin-ui at latest init like this perfect and then now let's see the options so would you like to use typescript recommended make sure you select yes because we selected yes for the initial command which we run to initialize the project. So make sure those two match by just pressing yes.
And now it's asking us which style we would like to use. You can of course pick your own style but again I highly recommend that you follow exactly what I do and select the default style. And now about the color, I'm gonna go ahead and select neutral. This is the least important part. You can select any color you want here, but again, if you want your project to look exactly like mine, just follow along.
Perfect. And now it's asking us where is our global.css file. As you can see here it's placeholder to app.globals.css. So we can quickly check that by opening up our sidebar and let's confirm that we have our app folder globals.css. Looks like that is completely okay.
Perfect. So we can just press enter. It's asking us whether we want to use CSS variables. Select yes for that. And now here's the bit of a tricky part it's asking us where is our tailwind.config in my case .js located right and it has this option right here but let's take a look at our setup here.
As you can see, we don't have tailwind.config.js. We have tailwind.config.ts. So, nothing dangerous will happen if you just press Enter on the .js default placeholder, which this provides you with, but you are going to have two unnecessary files. So, what you can do in this option if you have .js here the same way I do is you can press the tab on your keyboard and then you can go ahead and edit this to be .ts like this and just press enter again nothing dangerous or scary is gonna happen if you leave it at .js your project is still going to work but you're going to have one unnecessary file. Great!
And now we have the question for the import alias for our components. If you left the default alias default as I did in the initial options you can just press ENTER here. If you did any modification there you're gonna have to modify this as well. So this is why I recommended that you follow the exact options which I selected. So just feel free to press ENTER here.
And the same thing is for the utils you can just press ENTER and last question is referring to whether we are using the app router as I've mentioned app router allows us to use react server components so yes we are gonna be using them so just go ahead and press ENTER for the yes option. And now that's it all you have to do is confirm this. So you can press ENTER or just type Y on your keyboard. And let's go ahead now and let's see what we have. So I'm gonna go ahead and close everything just to see what new items we have inside.
So as you can see we now have the components folder which is currently empty. We also have the new lib folder inside and inside of this lib folder we have our utils file and as you can see here we have some new packages CLSX and Tailwind-merge and this function CN which if you watched my previous tutorial you already know this is gonna come in handy and we're gonna use this function a lot. I'm just gonna briefly explain what it does but it is gonna make more sense once we start coding. So the CN function is enabling us to safely and properly combine Tailwind classes. Specifically dynamic Tailwind classes.
For example we're going to have a specific class for error state, specific class for success state. And the best way to do that is using these two packages. So the Shetian command nicely combined those two for us in this very nice util right here. Perfect. You can go ahead and explore a bit more about all the files you have here.
You can see that our Tailwind config has now been filled with a bunch of variables here so all of that came from the chat CNUI and if you're wondering what chat CNUI is my apologies for not explaining because I use chat CN in all of my tutorials so sometimes I assume that people know but still I think it's important if this is your first time watching Shed CNUI is a component library which is very compatible with Next 14 which we are going to use in this tutorial. Great So now we are finally ready to go inside of our terminal and run the command npm run dev like this and as you can see I have Next.js 14.0.1 running on a localhost 3000. So let's go ahead and refresh my browser here where I have prepared that URL and in a couple of seconds you're going to see a landing page similar to this. Perfect! So let's go ahead and quickly clean up this page so we are ready to do some more work.
Let's go inside of the app folder and let's go inside of page.tsx right here so everything that you see on this page right here is actually written inside of app folder page.tsx. So you can just go ahead and remove everything inside of this return function. So everything inside of this brackets, right? I'm gonna go ahead and start with main. I'm gonna go all the way down and I'm holding the shift, I click here and I click remove.
Perfect! And now I can just write a div saying hello Trello like this. And let's remove this unused import and clean up this white space at the top. And now if you take a look at my browser here, you can see that I have a text Hello Trello. Don't worry if yours is smaller, I just zoomed in so you can see.
So now let's go ahead and test out whether we set up our chat CN correctly which means that we should have our tailwind working. So I'm gonna go ahead and write class name. I'm just gonna zoom in even more so you can see and inside this class name I'm gonna write text-sky-500 and that should change the color as it did in my browser into a nice bluish color. Perfect! And if you are wondering how do I have this little color box right here, well that is a very cool extension called Tailwind CSS IntelliSense.
So you can go inside of extensions if you're using Visual Studio Code and write Tailwind inside and the very first option is going to be Tailwind CSS IntelliSense. So just go ahead and install that, refresh your Visual Studio Code and then you should be seeing this. And you're also going to get another cool feature, which is if you're not that familiar with Tailwind, very useful. For example, if you have no idea what this class does and you have that extension installed you can easily hover over a class and you're going to see everything it does let's take a look at something different for example let's use flex-1 and when I hover you see exactly what CSS that is. Perfect!
So now that we have this working we are ready to start figuring out how routing works inside of Next 13. Great, great job! Side of Nex13. Great, great job!