DEV Community

Carlos Guzmán
Carlos Guzmán

Posted on

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
Enter fullscreen mode Exit fullscreen mode

OR
1.Npm

   npm create next-app
Enter fullscreen mode Exit fullscreen mode
  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 
Enter fullscreen mode Exit fullscreen mode
yarn build // Create a build
Enter fullscreen mode Exit fullscreen mode
yarn start // run server in production mode after a build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode

OR

yarn add next  react react-dom
Enter fullscreen mode Exit fullscreen mode
  1. Edit the file Package.Json, and add in the scripts section, the next lines.
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
Enter fullscreen mode Exit fullscreen mode
  1. Now, you need a page directory: In the root directory, create a directory named pages. Example: mkdir pages
mkdir pages 
Enter fullscreen mode Exit fullscreen mode

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

npm run dev. 

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
joedotnot profile image
joedotnot

Why don't you also explain npx?