How to create a NextJs app from an empty folder

DanielSeptember 27, 2022October 6, 2022

There are two ways you can create NextJs app on your local machine:

• you can use a utility like create-next-app
• or, if you want better control, create it from scratch

This article will focus on the second option, where we will create the NextJs app starting from an empty folder.

Let's first create the folder and navigate to it:

mkdir empty-nextjs-app && cd empty-nextjs-app

We will initialize the folder as a Node project:

npm init -y

Next, we will need to install nextjs and react. Will use npm for this:

npm i --save next react react-dom

At this point, you will have the following three items in your folder:

Using a code editor open up the package.json file and replace the scripts section with the following:

"scripts": {
    "build": "next build", 
    "start": "next start", 
    "dev": "next"
},

Most often we will use the npm run dev to startup the Nextjs app in development mode. The npm run build and npm run start commands will build and run the production bundle.

Will all of this in place, let's create your first NextJs page. First will create pages folder. The name must be exactly pages as this is the convention that NextJs use for the root of the app. Next will create a pages\index.js with the following content:

export default () => (<div>
        <h1>Welcome 👋👋👋! </h1>
</div>)

And now you can just run npm run dev and see your NextJs app running at http://localhost:3000/.

And this is it! We have now the first NextJs app created from an empty folder.

Some notes:

• when first running npm run dev you will see a new folder called .next containing build files for you NextJs app
• you may want to create a .gitignore file for the node_modules and .next folders
• even if the app runs by default on port 3000 you can easily change that by setting a new port. In the scripts part replace "dev": "next" with "dev": "next -p 3001"