Next 14 App

Updated - September 29, 2025
Next.js 14 + TypeScript
npx create-next-app@latest
    Next
    npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin husky lint-staged prettier-plugin-tailwindcss @commitlint/{cli,config-conventional} eslint-plugin-import-helpers eslint-config-next

      Development Dependencies for Next.js with TypeScript

      --save-dev: Saves dependencies only for the development environment.

      eslint: Tool to analyze and find problems in JavaScript and TypeScript code.

      prettier: Code formatter that ensures a consistent style throughout the project.

      eslint-config-prettier: Disables ESLint rules that might interfere with Prettier.

      eslint-plugin-prettier: Integrates Prettier with ESLint to show formatting errors.

      @typescript-eslint/parser: Parser that allows ESLint to understand TypeScript.

      @typescript-eslint/eslint-plugin: Set of specific TypeScript rules for ESLint.

      husky: Tool to create Git hooks, helping automate tasks before committing.

      lint-staged: Runs linters on staged files in Git.

      prettier-plugin-tailwindcss: Plugin for Prettier that automatically sorts Tailwind CSS classes.

      @commitlint/cli, @commitlint/config-conventional: Tools to ensure commit messages follow a conventional standard.

      eslint-plugin-import-helpers: ESLint plugin to automatically order imports.

      Eslint Config

      Modify a 
      eslint.config.mjs
        file with the following content:
        import { FlatCompat } from "@eslint/eslintrc";
import { dirname } from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  // Global ignores (replaces .eslintignore)
  {
    ignores: [
      "node_modules/**",
      ".next/**",
      "dist/**",
      "public/**",
      "server.js",
      "jsconfig.json",
      "package.json",
      "package-lock.json",
      "README.md",
      ".eslintrc*",
      ".prettierrc.json",
      "commitlint.config.js",
      "next-env.d.ts",
      "postcss.config.js",
      "husky/**",
      "configs/**",
      "env/**",
      "eslint.config.mjs",
    ],
  },
  ...compat.config({
    extends: [
      "next/core-web-vitals",
      "next/typescript",
      "prettier",
      // nuevo
      // "eslint:recommended",
      // "plugin:@typescript-eslint/recommended",
      // "plugin:react/recommended",
      // "plugin:react-hooks/recommended",
      // "plugin:@next/next/recommended",
      // "prettier",
    ],
    plugins: ["@typescript-eslint", "prettier", "eslint-plugin-import-helpers"],
    parser: "@typescript-eslint/parser",
    // parserOptions: {
    //   ecmaVersion: 2020,
    //   sourceType: "module",
    // },
    env: {
      browser: true,
      node: true,
    },
    rules: {
      "import/no-unresolved": "error",
      "import/extensions": "error",
      // nuevo
      // "prettier/prettier": ["error"],
      // "react/react-in-jsx-scope": "error",
      "react/prop-types": "error",
      "no-multiple-empty-lines": ["error", { max: 1, maxEOF: 1 }],
      "import-helpers/order-imports": [
        "error",
        {
          newlinesBetween: "always",
          groups: [
            ["/^next/", "module"],
            "/@styles/",
            "/@components/",
            "/@lib/",
            ["parent", "sibling", "index"],
          ],
          alphabetize: { order: "asc", ignoreCase: true },
        },
      ],
    },
    // settings: {
    //   react: {
    //     version: "detect",
    //   },
    // },
  }),
];

export default eslintConfig;

          Prettier Config

          Generate a 
          prettier.config.js
            file with the following content:
            module.exports = {
  "useTabs": false,
  "singleQuote": false,
  "plugins": ["prettier-plugin-tailwindcss"]
};

              Commitlint Config

              Generate a 
              commitlint.config.js
                file with the following content:
                module.exports = { extends: ["@commitlint/config-conventional"] };

                  Husky

                  Execute a 
                  npx husky install
                    Generate in a husky folder the file 
                    pre-commit
                      npx lint-staged
                        Generate in a husky folder the file 
                        commit-msg
                          
npx --no -- commitlint --edit

                            Package.json

                            Add in 
                            package.json
                              file with the following content:
                              "format": "prettier --write .",
"lint": "eslint --fix . --ext .js,.jsx,.ts,.tsx",
"prepare": "husky install"

                                Lint Staged Config

                                Add in 
                                .lintstagedrc
                                  file with the following content:
                                  {
	"**/*.{js,jsx,ts,tsx}": ["npm run format", "npm run lint"]
}

                                    Ignore Prettier

                                    Add in 
                                    .prettierignore
                                      file with the following content:
                                      
dist
package-lock.json
configs
env
husky
public
server.js
jsconfig.json
package.json
public
README.md
.eslintrc
.eslintrc.json
.eslintrc.js
.prettierrc.json
commitlint.config.js
next-env.d.ts
postcss.config.js
commitlint.config.js
prettier.config.js