Configuring Next.Js Project

In this article, we will create a Next.js application with ESLint, Prettier, Husky, Lint-Staged and Bundle-Analyser.

Create a Next.js App

Let's create a new Next.js project by running the following command, We use pnpm as a package manager,

pnpm create next-app

By choosing all the default options: Yes

✔ What is your project named? my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*

let's navigate to our project folder which is my-app in this case.

cd my-app

Installing Dev Dependencies

Now, we will install prettier, eslint, husky and lint-staged by running the following command;

• prettier-plugin-tailwindcss: Official tailwind plugin. Sort the tailwind classes a/c priorities.
• eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-plugin-prettier: Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
• @typescript-eslint/parser : Allows ESLint to lint TypeScript source code. Since AST is TS and JS is different.
• @typescript-eslint/eslint-plugin: An ESLint plugin which provides lint rules for TypeScript codebases.
• eslint-plugin-react: React specific linting rules for eslint
• eslint-plugin-react-hooks: his ESLint plugin enforces the Rules of Hooks.
• eslint-plugin-simple-import-sort: Sort the imports in files accordingly
• lint-staged: Run linters against staged git files
• husky: Helps to create git hooks

pnpm i -D prettier-plugin-tailwindcss eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort lint-staged husky

Also add config files to add configurations in it.

touch .eslintignore .prettierrc .prettierignore .lintstagedrc

Note: The reason we don't use airbnb style guide becuase the prettier style guide is enough and, airbnb style conflicts with prettier config.

Add Eslint Config.

Next.js provides an integrated ESLint experience out of the box. Our project already contains a file named .eslintrc.json, replace its content with:

.eslintrc.json

{
  "env": {
    "node": true,
    "es2021": true,
    "browser": true
  },
  "globals": {
    "React": true
  },
  "extends": [
    "prettier",
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "plugins": ["simple-import-sort"],
  "rules": {
    "import/prefer-default-export": "warn",
    "react/function-component-definition": "off",
    "simple-import-sort/imports": "warn",
    "simple-import-sort/exports": "warn",
    "sort-imports": "off",
    "no-console": "warn",
    "@typescript-eslint/no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "warn",
    "react/prop-types": [2, {"ignore": ["className", "variant","size", "sideOffset", "checked","value"]}]
  }
}

Modify a file.eslintignore at the root level of our project. Fill its content with:

.eslintignore

.next
node_modules

Add Prettier Config.

Modify a Prettier config file .prettierrc and .prettierignore at the root level of our project. Fill its content with:

.prettierrc

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

.prettierignore

.next
node_modules
pnpm-lock.yaml
.eslintignore
.husky/*

Add script for prettier in package.json

  "scripts": {
   "dev": "pnpm run lint --fix && pnpm run prettier && next dev",
    ...,
    "prettier:check": "prettier --check '**/**/*.{js,jsx,ts,tsx}'",
    "prettier": "prettier --write --cache '**/**/*.{js,jsx,ts,tsx}'"
  },

Add Lint-Staged Configs.

If we want to use Next Lint with lint-staged to run the linter on staged git files, we have to modify the following to the .lintstagedrc file at the root level of our project to specify usage of the --file flag.

.lintstagedrc.js

{
  "**/*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "**/*.{html,css,json,gql,md}": ["prettier --write"]
}

Add Husky

Now let’s follow the below steps for setting up Husky.

pnpm exec husky init

The above command creates a .husky folder with all the necessary client hooks at the root level of our project.

Now, Add below command to replace all content of the following file .husky\pre-commit with:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm lint-staged --allow-empty

Adding Bundle Analyser (Optional)

@next/bundle-analyzer: Use webpack-bundle-analyzer in your Next.js project.
next-compose-plugins : Provides a cleaner API for enabling and configuring plugins for next.js.
cross-env: Run scripts that set and use environment variables across platforms.

pnpm add -D @next/bundle-analyzer next-compose-plugins cross-env

Adding bundle analyser to next.config.mjs

next.config.mjs

import withBundleAnalyzer from '@next/bundle-analyzer';
import withPlugins from 'next-compose-plugins';

/**
 * @type {import('next').NextConfig}
 */
const config = withPlugins(
  [[withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true' })]],
  {
    reactStrictMode: true,
    experimental: { instrumentationHook: true },
    typescript: {
      ignoreBuildErrors: true,
    },
    eslint: {
      ignoreDuringBuilds: true,
    },
  }
);

export default config;

Note: we added typescript: { ignoreBuildErrors: true, }, eslint: { ignoreDuringBuilds: true, } because It fastens up the build process.

Add analyse command to script in package.json

"scripts": {
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },

Done

And that’s it! 🚀🚀🚀🚀🚀🚀