Introdução:
Neste tutorial, vamos aprender como configurar um ambiente de desenvolvimento eficiente para projetos Next.js, utilizando ferramentas como ESLint, Prettier e Git Hooks (Husky + Lint-staged). Essas ferramentas ajudam a manter um código limpo, consistente e livre de erros, além de automatizar tarefas importantes durante o desenvolvimento. Vamos começar!

Passo 1: Configurando um projeto Next.js
Antes de começarmos a configurar as ferramentas adicionais, vamos criar um projeto Next.js básico. Certifique-se de ter o Node.js instalado em sua máquina. Abra seu terminal e execute os seguintes comandos:

npx create-next-app my-next-app
cd my-next-app

Passo 2: Instalando as dependências
Agora que temos nosso projeto Next.js configurado, vamos instalar as dependências necessárias. No diretório do projeto, execute o seguinte comando:

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier lint-staged husky @typescript-eslint/eslint-plugin

Passo 3: Configurando o ESLint
O ESLint é uma ferramenta de análise de código estática que nos ajuda a identificar problemas e aplicar regras de formatação e estilo. Vamos configurá-lo para funcionar com o Next.js. Crie um arquivo .eslintrc.json na raiz do seu projeto e adicione o seguinte conteúdo:

{
  "plugins": [
    "react",
    "react-hooks",
    "prettier",
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "next",
    "next/core-web-vitals",
    "prettier"
  ],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

Passo 4: Configurando o Prettier
O Prettier é uma ferramenta de formatação de código que nos ajuda a manter um estilo consistente em nosso projeto. Vamos configurá-lo para funcionar em conjunto com o ESLint. Crie um arquivo .prettierrc na raiz do seu projeto e adicione o seguinte conteúdo:

{
  "printWidth": 140,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "tabWidth": 2,
  "semi": false,
  "arrowParens": "always"
}

Passo 5: Rode o seguinte comando para instalar o Husky:

npx husky install

Passo 6: Rode o seguinte comando para inicializar o Husky:
Uma pasta será criada na raiz do seu projeto com um sh chamado pre-commit:

npx husky add .husky/pre-commit "npx lint-staged"

Passo 7: Configurando os Git Hooks (Husky + Lint-staged)
Os Git Hooks permitem executar scripts automatizados antes de confirmar suas alterações no Git. Vamos configurar o Husky e o Lint-staged para executar o ESLint e o Prettier antes de fazer um commit. Abra seu arquivo package.json e adicione o seguinte trecho:

{
  "name": "configurando-setup-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint src --max-warnings=0",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "src/**/*": [
      "eslint --fix"
    ]
  },
  "dependencies": {....}

Passo 8: Testando a configuração
Agora que tudo está configurado, vamos testar o ambiente. No terminal, execute o comando npm run lint para verificar se há erros de linting no seu código. Bom, agora tente commitar algum arquivo tsx,js,jsx,ts que contenha esse erro de linting e pronto, ele será barrado!

Conclusão:
Neste tutorial, aprendemos como configurar um ambiente de desenvolvimento eficiente para projetos Next.js, utilizando ESLint, Prettier e Git Hooks (Husky + Lint-staged). Essas ferramentas ajudam a manter seu código limpo, consistente e livre de erros, garantindo uma experiência de desenvolvimento mais suave. Agora você está pronto para começar a desenvolver seu próximo projeto Next.js com confiança!

Espero que este artigo seja útil para você e para a comunidade do dev.to. Boa sorte com seus projetos futuros!