How to Configure Your Next.js Frontend Project

This guide outlines the steps to set up a Next.js project with TypeScript, ESLint, Prettier, Husky, and lint-staged for linting and formatting.

1. Create a New Next.js Project

To create a new Next.js project, run the following command:

npx create-next-app@latest your-project-name --typescript
cd your-project-name

Replace your-project-name with the desired name of your project.

2. Install Required Dependencies

Next, install the necessary development dependencies for linting and formatting:

pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser husky lint-staged prettier-plugin-tailwindcss

3. Update Package.json Scripts

Modify your package.json file to include the following scripts:

"scripts": {
  "dev": "NODE_OPTIONS='--inspect' next dev",
  "build": "next build",
  "start": "next start",
  "lint": "pnpm exec next lint --dir .",
  "lint:fix": "pnpm exec next lint --fix --dir .",
  "lint:strict": "pnpm exec next lint --max-warnings 0 --dir .",
  "prettier": "pnpm exec prettier --write .",
  "prepare": "test -d .git && husky install || echo 'Skipping Husky install, no .git directory'"
}

4. Configure Lint-Staged

Add the lint-staged configuration to your package.json to format and lint your code on pre-commit:

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "pnpm exec eslint --fix",
    "pnpm exec prettier --write"
  ]
}

5. Create ESLint Configuration

Create an .eslintrc.json file in the root of your project with the following configuration:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "root": true,
  "extends": [
    "next",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": ["prettier", "@typescript-eslint", "react"],
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off",
    "prefer-const": "warn",
    "no-var": "warn",
    "object-shorthand": "warn",
    "quote-props": ["warn", "as-needed"],
    "@typescript-eslint/array-type": [
      "warn",
      {
        "default": "array"
      }
    ],
    "@typescript-eslint/consistent-type-assertions": [
      "warn",
      {
        "assertionStyle": "as",
        "objectLiteralTypeAssertions": "never"
      }
    ],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "args": "after-used",
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_",
        "ignoreRestSiblings": true,
        "destructuredArrayIgnorePattern": "^_"
      }
    ],
    "react/jsx-fragments": ["warn", "syntax"],
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [".ts", ".tsx"]
      }
    ],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "prettier/prettier": "warn"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

6. Create Prettier Configuration

Create a .prettierrc file in the root of your project with the following configuration:

{
  "bracketSpacing": true,
  "endOfLine": "lf",
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "plugins": ["prettier-plugin-tailwindcss"]
}

7. Initialize Husky

Initialize Husky to manage Git hooks:

npx husky install

8. Set Up Husky Hooks

Add a pre-commit hook to run lint-staged:

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

9. Directory Structure

Your project should have the following basic structure:

javaCopy codeyour-project-name/
├── .next/
├── .husky/
│   ├── pre-commit
├── node_modules/
├── public/
├── src/
├── .gitignore
├── .eslintrc.json
├── .prettierrc
├── package.json
└── tsconfig.json

Notes:

• Ensure that you replace your-project-name with your actual project name.

• Adjust any configuration options according to your team's coding standards or project requirements.

• Remember to commit your changes and push to your repository to maintain version control.

This setup will ensure that your code is consistently linted and formatted, and it will help maintain code quality across your project.