Creating a Next.js project

Welcome to this tutorial on setting up a NextJS development environment! In this post, we will go through the steps of installing the necessary tools, including Node.js and a code editor, and using npm to download the Next.js template app. We’ll use one of the template apps that Next.js provide in that environment and give an overview of the structure and files in template.

Getting setup

To get started, you’ll need to download and install Node.js and a code editor of your choice. If you don’t have a preferred code editor, I highly recommend Visual Studio Code, which is what I’ll be using in this tutorial.

Once you have both Node.js and your code editor installed, open VS Code and open a new terminal window within VS Code by going to Terminal -> New Terminal Window.

In this terminal window at the bottom of VS Code you can check Node is installed correctly by entering the following command.

node -v

The result should be the current version of Node that you have installed. For me this is v12.14.0.

Installing Next.js template app

One of the things Node comes bundled with is the Node Package Manager (npm) which we can use to install additional packages. We’re going to use npm to install the Next.js template file.

By default the VS Code terminal opens in your user directory. If you want to create a new folder to store all your Next.js projects in you can do that before installing the template app.

mkdir NextJS
cd NextJS

In your chosen directory install the create-next-app template. This will download all the files needed to create our own project from the template.

npm install create-next-app

We can then create our own Next.js app based off these template files using the following line which will install all the dependencies needed and create a new project in the directory called my-app.

npx create-next-app my-app

You’ll see this has created a new directory which we can move into and then open in VS Code.

cd my-app
code .

Now you can start the development server with the command:

npm run dev

In a web browser open http://localhost:3000 and you’ll see the default Next.js template page.

Template structure

The structure of your template app should look something like below.

my-app
  ->.next
  ->node_modules
  ->pages
  ->public
  ->styles
    .eslintrc.json
    .gitignore
    next.config.js
    package-lock.json
    package.json
    README.md

.next folder contains files relating to your development environment and is auto-generated when you run npm run dev.

node_modules folder contains all the packages installed and used by the project including packages for Next.js and React.

pages folder contains the JavaScript files that make up the pages of you app. In the template we’re using you’ll find an index.js file which makes up the default page you saw when we ran the app.

public folder is the place to put any static files such as images.

styles folder contains all the stylesheets, whether they’re css or sass files.

.eslintrc.json is the configuration file for ESLint which helps to identify problems with your code.

.gitignore defines the files which should be ignored by Git.

next.config.js is used to configure settings in your Next.js project.

package-lock.json and package.json files list the packages that your project depends on.

README.md is a basic getting started guide provided with the template.

In the next post we’ll start adding our own code into this template that changes what the app does and how it looks.

If you want more information on setting up a Next.js project, take a look at the documentation on the Next.js website.