How to setup Project in NextJs

Whenever we set up a project, we ask how to approach it in the best way and what we can add to make it more robust and user-friendly. Let’s explore how to setup a NextJS Project.

What is NextJs?

If you are looking to develop a web application using Headless Architecture then NextJs is a great choice for you.

NextJs is a React-based full-stack framework for web development. It offers production-ready features like: Static/Server Rendering, ISR, Typescript , Routing, and many more with no config.

NextJs Project Setup

In the Next.js project setup, we’ll add libraries for automation. When working in a team, we ensure adherence to guidelines and standards to maintain consistency and quality.

Let’s look through all the steps that are required to setup a NextJs Project.

1. NextJs Installation
2. Engine Locking
3. Code Standard and Formatting
4. Prettier
5. ES Lint
6. Visual Code Settings
7. Directory Structure

NextJs Installation

We’ll start by creating a NextJs application.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

It will prompt you with some questions in the command line, then proceed to install your Next.js application. After the installation is complete, we will verify that the app is working correctly.

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

As mentioned earlier. In this setup, we will focus on working with team on same project so it is important to lock our Node Engine and Packange Manager so our teammates work in 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, we define those values as:

.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. 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": ">=18.0.0",
    "npm": ">=8.1.0",
    "yarn": "please-use-npm"
  },
}

Code Standard and Formatting

Now, we’ll learn how to set up coding and formatting standards for our project to ensure all contributors follow best practices and maintain consistent code style. We’ll 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-formatting our code files. To implement it in our project.

npm install prettier --save-dev

#OR

yarn add -D pretier

--save-dev: It installs the package as a development dependency

Now we need to create two files in our root:

.prettierrc:

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

You can check more configuration options

.prettierignore:

.next
node_modules

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

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 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

After setting up ESLint and Prettier, enhance them with VS Code by creating a .vscode folder in the root and adding a settings.json file to define settings that VS Code will automatically apply.

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

Lastly, we will discuss the directory structure of our project. Typically, we will use three main directories.

/components /lib /pages

components: This directory is where you define all your React UI components.

pages:This is where you place your NextJs routes/pages.

lib: This directory is for business logic, app utilities, and third-party integrations.

That’s it! In this article, we aimed to cover how to set up a scalable Next.js project. Hope it helps! Please share your feedback in the comments.

Start your Headless Development with Webkul.
Happy Coding !!