NextJS Starting Configurations

Creating web applications especially frontend with NextJS is really very easy. It supports server side rendering, file based routing, server actions and many more which helps users to write seamless code. But the code writing, managing the code and formatting the code can be tedious task. In this blog, we will see how we can configure our NextJS application foe easy development in VS Code.

Initialize the project

We will be using yarn as it is bit faster than npm and some peer pressure 😂

yarn create next-app <appname>

Engine locking

As stated earlier, we will be using yarn and also restrict to use specific node version only.

Create a .nvmrc file and update it with the node version according to you as shown below.

20.10.2

Create a .npmrc file and add the following line

engine-strict=true

Update the package.json file with the correct version

"engines": {
    "node": ">=20.10.2",
    "yarn": ">=1.22.22",
    "npm": "please-use-yarn"
},

Prettier

Prettier helps in code formatting and with VS Code, it becomes really very easy as we can tweaks some settings to format the code on same. For this to work, Prettier extension must be installed and also as a dev dependency for the current NextJS project.

Install Prettier as dev dependency

yarn add -D prettier

Create .prettierignore and update the content given below

.yarn
.next
dist
node_modules

Create .prettierrc and update the content given below

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true
}

Add the script in package.json

"prettier": "prettier --write .",

.vscode folder

As of now, for using prettier, you have to run the script manually. To make prettier automatically format the code and organize the imports on save, we have to update the settings.json file for the current project.

Create settings.json inside .vscode folder and update the file with the content given below.

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": "always",
        "source.organizeImports": "always"
    }
}

That's all for now. Stay tuned as I am gonna add other tools like husky, storybook, and eslint which will help in organised working with github, creating components ans linting respectively.

Preetam Raj