Reading list Switch to dark mode

    Project Setup for NextJS

    Updated 12 April 2023

    Every time we set up any project we have a question. How to setup 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.

    Start your headless eCommerce
    Find out More
    npx create-next-app@latest
    # 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 create-next-app@latest --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

    NextJS Project Setup screenshot

    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:





    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": ">=18.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 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
    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:


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

    You can more configuration options here



    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.


    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 Setup

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


    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 :).

    . . .

    Leave a Comment

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

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home