DEV Community

Tomi budi
Tomi budi

Posted on

Setup repository nextjs app like a pro 😎

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)
Enter fullscreen mode Exit fullscreen mode

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

NODE_OPTIONS=--openssl-legacy-provider
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Screen Shot 2023-01-24 at 18.14.20.png

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,
};
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

activate hooks

pnpx husky install
Enter fullscreen mode Exit fullscreen mode

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}`
Enter fullscreen mode Exit fullscreen mode

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 ")}`,,
};
Enter fullscreen mode Exit fullscreen mode

ensure the setup are correct.

Image description

above is image when git hooks called

Image description

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

Top comments (3)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
naucode profile image
Al - Naucode

Great article, you got my follow, keep writing!

Collapse
 
tomibudis profile image
Tomi budi

Thanks for your support