Project Setup for NextJS – Webkul Blog NextJS Project Setup

Every time we set up any project we have a question. How to structure it in the best approach and what things we can add to make it more robust and easy to use. In this blog, we are going to discuss the Ideal Project Setup for NextJs.

First of all, let’s see what is NextJs.

What is Next Js?

Next Js is a React-based full-stack framework for Web Development. It provides all the features which you need for production: Static and Server Rendering, Static-side Regeneration, Typescript support, Routing, and many more with no config. Go through with massive documentation provided by the Next JS for more details

NextJs Project Setup

In the Project Setup for NextJs, we are going to add some libraries to make the project with some automation features. When we work with a team we will make sure to follow some guidelines and standards.

Next Js Installation

We’ll start by creating a Next.js application.

npx [email protected]
# or
yarn create next-app
# or
pnpm create next-app

If you want to work with a TypeScript in your project. Simply, you can use the --typescript flag:

npx [email protected] --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

It will ask some questions like project name etc. in the command prompt after that it will install your Next JS application. After the installation is complete we will make sure the installed app is working.

We are using npm in this project setup, you can also use yarn .

cd your-next-app-dir
npm run dev

You can see the installed app on http://localhost:3000

Engine Locking in Your NextJs Project Setup

As we already mentioned earlier. In this Project setup, we will focus to work with a team on the same project so it is important to lock our Node Engine and Packange Manager so our teammates work in the same environment. To do this we need to create two files .nvmrc and .npmrc

• .nvmrc: To Specify the Node Engine.
• .npmrc: To Specify the Package Manager.

We are using Node v18 Hydrogen and npm for this project so we define those values like:

.nvmrc:

lts/hydrogen

.npmrc

engine-strict=true

You can check your version of Node with the node –version and make sure you are setting the correct version. Here you can find the list of Node versions and their codenames.

Note that In .npmrc we did not specify npm as our Package Manager, we specified engine-strict, we have to define it in our package.json file:

{
  "name": "my-next-pp",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": ">=14.0.0",
    "npm": ">=8.1.0",
    "yarn": "please-use-npm"
  },
}

Setup Code Standard and formatting in Your NextJs Project Setup

Now, we will learn how can we set up coding standards and formatting standards for our NextJS Project that will be used by all the contributors to maintain the best practices and code style consistent. We will implement two tools:

• prettier – For auto-formatting of code files
• eslint – For best practices on coding standards

Prettier

Prettier is a great tool that has been used for Code Formatting. It helps in auto-format our code files. To implement it in our project.

npm install prettier --save-dev

#OR

yarn add -D pretier

--save-dev: It installs it as dev-dependency to learn more

Now we need to create two files in our root:

.prettierrc:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}

You can more configuration options here

.prettierignore:

.next
node_modules

In this file, we have mentioned all directories need to be ignored. For more details, you can check here.

Now we will add a new script to our package.json file:

...
  "scripts: {
    ...
    "prettier": "prettier --write ."
  }

Now, we can simply run npm run prettier

I also recommend using Visual Code Prettier Extension if you are using Visual Code as your Code Editor.

ESLint

NextJs already has great support for EsLint itself. So we do not need to do much more to implement it. We can add our own configuration to the file .eslintrc.json

{
  "extends": ["next", "next/core-web-vitals", "eslint:recommended"],
  "globals": {
    "React": "readonly"
  },
  "rules": {
    "no-unused-vars": [1, { "args": "after-used", "argsIgnorePattern": "^_"    }]
  }
}

Visual Code Settings

As we have implemented EsLint and Prettier. We can utilize it more by using VS Code. We can define some settings then VSCode handles them automatically. To define settings in VS Code. We need to create a directory inside the root called .vscode and then a file called settings.json inside .vscode

In .vscode/settings.json file add the following JSON

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  },
  "eslint.workingDirectories": ["./NextJs"]
}

Directory Structure

In Last, We will discuss what will be the directory structure in our Project. Normally we will go with the three directories.

/components
/lib
/pages

components: To Define your React UI Components here.

pages:Your NextJs Routes/Pages will be placed.

lib: Your Business/app/third-party logic will be placed here.

That’s it In this article we tried to cover to Setup scalable NextJs Project. Hope it helps. Please share your feedback in the comments. Happy Coding :).