Setup repository nextjs app like a pro 😎
Tags: webdev, javascript, react
Published: 2023-02-03 14:55:18

### 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](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](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](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

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

```bash
{
  "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

![Screen Shot 2023-01-24 at 18.14.20.png](Setup%20repository%20nextjs%20app%20like%20a%20pro%20%F0%9F%98%8E%2022ddc9cdb752448aa18121de990bc1ab/Screen_Shot_2023-01-24_at_18.14.20.png)

Step 2

create a file `.prettier.config.js`

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

![Screen Shot 2023-01-24 at 18.56.46.png](Setup%20repository%20nextjs%20app%20like%20a%20pro%20%F0%9F%98%8E%2022ddc9cdb752448aa18121de990bc1ab/Screen_Shot_2023-01-24_at_18.56.46.png)

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

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

activate hooks

```bash
pnpx husky install
```

add hooks

```bash
// 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

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

ensure the setup are correct.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shkxyy3ut67i1gynli3r.png)

above is image when git hooks called

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar49nl0kco3eqbqs36jw.png)

ensure all stages are success like screenshot above

> Conclusion
> 

Feel free to give an input or feedback on my code

the detail repository you can take a look over here https://github.com/toms-studio/codelabs-next-web