How to create a NextJs app from an empty folder

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"

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X