Scaffold a Web App with a Next.js 13 Template
We will start our website development by creating a new modern CMS client app with a Next.js 13 template that comes with pre-made components and uses Tailwind CSS to style it.
You'll notice as you dig through the files in this template that next.config.js has an experimental appDir flag set to true. This will allow us to use the new features that ship with Next 13.
Instructor: [0:00] to create a new client application with Next.js 13, we'll go into our terminal and create a new tab. We'll check our working directory and change directories to our modern CMS folder. Inside our modern CMS folder, we want to clone a Next.js 13 template with pre-made components.
[0:20] We'll open up GitHub in our browser and use this template specially created for this course. We'll click use template to create a new repository and we'll name this Modern CMS client and create repository from template. After the repository has been created, we'll copy the URL, go back to a terminal and type git clone and paste the URL.
[0:44] After our project is cloned, we change directories into modern CMS client and type yarn install to install all the project dependencies. Once that's done, we'll start our project with yarn dev. We'll open up localhost 3000 in our browser. This is our website course template.
[1:05] In our terminal, to edit our template, we'll stop our server and open up VS Code. In VS Code, we'll open up our file explorer. In our app directory, we'll open up page.js where we can edit this page.
[1:20] We'll delete our hello component and create an H1 that says hello world. We'll give our H1 some styling with tailwind CSS, which comes pre-installed. We'll say class name and we'll give our text a text size of three Excel, a font bold and we'll underline.
[1:44] We'll save that and restart our next.js application with yarn dev so the changes can reflect. We'll go in our browser and refresh. There we go. We see hello world, and we're able to change classes with tailwind CSS. Excel. That is how you scaffold a next.js 13 web app with tailwind CSS pre-installed.