Next.js is built on top of node.js, which means that you already have most of the tools you will need installed on your computer.
One new tool we will be using is pnpm, which is an alternative package manager for use with Next.js. To install pnpm, run the command
npm i -g pnpm
in a terminal window.
Creating our first Next.js app
Start by making a folder that will serve as a home for your next.js projects. Open this folder in Visual Studio Code and then open a terminal window on that folder.
To create a new Next.js project we will use pnpm's create next-app command:
pnpm create next-app <app name> --template typescript
Simply replace <app name> with the name of the project you would like to create.
next-app will ask you a series of questions to configure the new project. Choosing the default option for each of the questions is OK for now.
Once your project is created you can cd into the project folder and run the project:
cd <app name> pnpm run dev
As an alternative to creating your own project you can also download and run today's example project.
Click the button above to download the project archive, expand the archive into a folder, and then open that folder in Visual Studio Code.
To run the example project open a terminal pane in that project folder and run the commands
pnpm install pnpm run dev
When you use create next-app to make a Next.js app you will be getting a folder that has a large number of files in it. Additionally, you will get set up with some initial content for your app that you will want to strip out to make room for your own content.
Here is a quick tour through some parts of the project, along with suggestions on what to remove to simplify the app.
At the top level of the project folder you will see a couple of subfolders and a large number of configuration files. For our first example you will not need to modify the contents of any of the configuration files.
The public folder contains static resources for your project. The initial collection of files in this folder are all image files to support the placeholder content in the project. You can safely delete all of these files. Later on if you decide to add some images to your project you can place those image files in this folder.
The app folder is the most important folder in any Next.js project. This is where you will be placing most of the files needed to construct your site.
The first important file in the app folder is globals.css. This is where you will be placing CSS rules for use across your site. You can safely remove everything in this file with the exception of the first line:
@import "tailwindcss";
This sets up the Tailwind CSS system, which we will be using in all of our Next.js examples.
The layout.tsx file sets up an initial HTML framework that all of the pages in your project will sit inside. You can replace the start content in that file with the following, simpler code:
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html>
<body>
{children}
</body>
</html>
);
}
This file defines a component that will act as a template for every page in your site. Since every page in a multipage site needs to have the same fixed set of HTML elements, the idea here is to define those elements just once in your project in this layout.tsx file. The unique content for each page you create will be inserted into the page via the children prop that this component takes as its input.
The final important file in your project is the page.tsx file. This is where we define the unique content for your site's one and only page. Once again we are going to replace the placeholder content in this file will a greatly simplified version:
export default function Home() {
return (
<div className="p-8">
<h3 className="font-bold">Welcome to Next.js!</h3>
<p>This is your first Next.js page.</p>
</div>
);
}
The page.tsx file must export one component that will form the content for your page. This content will automatically get inserted into the framework set up in layout.tsx via the children prop.
Your project is set up to use the Tailwind CSS system. In the example code above I have inserted a couple of Tailwind utilities: p-8 provides some padding for the div, and font-bold specifies that we use a bold font for the heading. In later examples I will be introducing you to other useful Tailwind classes.
Your simplified starter project is now ready to run. Open a new terminal on your project and run the command
pnpm run dev
to start your project.