Setup repository nextjs app like a pro 😎

#webdev #javascript #react

Introduction

I'd like to share my experience setting up a repository using Next.js, as it is a technology that is widely used in the tech industry. The purpose of this setup is to make our codebase more clean and maintainable. I don't want to waste your time by making you read this post, as I believe it will be a valuable addition to your development toolkit.

let’s get started…

Prerequisite

pnpm (package manager)
nodejs ^18.13.0
vscode (latest version)

since from node.js v17+ there is additional setup on your machine don’t forget to set env

NODE_OPTIONS=--openssl-legacy-provider

Linux → https://stackoverflow.com/questions/234742/setting-environment-variables-in-linux-using-bash

Windows → https://stackoverflow.com/questions/32463212/how-to-set-environment-variables-from-windows

MacOS → https://apple.stackexchange.com/questions/106778/how-do-i-set-environment-variables-on-os-x

First and foremost, let's install some extensions for Visual Studio Code, such as ESLint and Prettier. Once that is done, we can move on to the next section.

Step 1

install dependencies that needed

pnpm install eslint eslint-config-next eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-standard eslint-plugin-testing-library @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

create a file .eslintrc.json

{
  "plugins": ["@typescript-eslint", "testing-library"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  // this is additional rules to block when has unnecessary variable
  "rules": {
    "@typescript-eslint/no-unused-vars": "error"
  }
}

ensure the file is loaded correctly. open output tab on vscode

Step 2

create a file .prettier.config.js

module.exports = {
  tabWidth: 2,
  trailingComma: "es5",
  singleQuote: false,
  endOfLine: "auto",
  plugins: [require("@trivago/prettier-plugin-sort-imports")],
    // you can customize the import order like you want
  importOrder: [
    "<THIRD_PARTY_MODULES>",
    "^~/utils(.*)$",
    "^~/hooks(.*)$",
    "^~/components(.*)$",
    "^~/constants(.*)$",
    "^[./]",
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
};

and again let’s make sure the prettier config is correct. back to output tab

Setting up pre-commit and conventional commit with commitlint is a good way to ensure code quality and consistency.

Pre-commit is a way to call a function before committing code changes to a git repository. This can be useful for running custom code tasks or enforcing standards by automating other scripts to run those tasks. One tool that can help with this is Husky, which allows developers to add git hooks that will automatically run specified tasks before committing code. This can help to ensure that code is well-formatted, free of errors, and adheres to established conventions.

install dependencies

pnpm install husky @commitlint/{cli,config-conventionalig} -D

activate hooks

pnpx husky install

add hooks

// pre-commit
pnpx husky add .husky/pre-commit `pnpx lint-staged`;

// commit message
pnpx husky add .husky/commit-msg `pnpx --no -- commitlint -- -edit ${1}`

then create a file .lintstagerc.js

module.exports = {
  "**/*.ts?(x)": (filenames) =>
    `next lint --fix --file ${filenames
      .map((file) => file.split(process.cwd())[1])
      .join(" --file ")}`,,
};