How to create a basic structure for a Next JS App, manually or using a boilerplate tool.

Next.js is a wonderful production framework for React. This framework has two ways to create a Next Js App. The first way is using a boilerplate from Next Js APP, to use this tool, perform the following steps.

Before, you should have installed, one tool for package management such as npm or yarn.

Create next-app Tool.

1.Yarn

   yarn create next-app

OR
1.Npm

   npm create next-app

1. NPM OR YARN.
   The assistant should ask your app name, in this case, write a name for your app and press the KEY ENTER.

2. Now your app structure was created, enter to App directory.

cd my-app

1. Enjoy! Now you can run the application, create a build, and finally run the application in production mode.

// Run Dev Server

yarn dev 

yarn build // Create a build

yarn start // run server in production mode after a build

You can use the same commands with npm, only replace the word "yarn" for "npm"

Manually.

To create the structure app manually perform the next steps:

1. Make a directory with the name of your application. In the console write:

mkdir next-js-app

1. Enter to Directory. In the console write: cd next-js-app

2. NPM: npm install next react react-dom OR Yarn write:
   yarn add next react react-dom
   

npm install next react react-dom

OR

yarn add next  react react-dom

1. Edit the file Package.Json, and add in the scripts section, the next lines.

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

1. Now, you need a page directory: In the root directory, create a directory named pages. Example: mkdir pages

mkdir pages 

Enjoy, now you can run the app. for example in dev mode.

npm run dev. 

Comments

[joedotnot]

Why don't you also explain npx?