Setup a Next.JS project for production-ready

espython — Sat, 22 Jun 2024 22:52:24 +0000

Create a Next.JS project for this tutorial I’m using bun but you can npm or yarn.

bunx create-next-app@latest app-name

Wait till the Dependency installation finishes and navigate to the
project directory

ESLint/Prettier setup overview

Add Packages:
bun add --dev eslint-plugin-prettier eslint-config-prettier prettier

Modify .eslintrc.json file as below you can change rules as you
like

Create prettier configs files .prettierrc and .prettierignore

Add lint/format scripts to the package.json file



    "lint": "eslint --ext .ts,.tsx ./src",
    "prettier": "prettier {src,__{tests,mocks}__}/**/*.{ts,tsx}",
    "format:check": "bun run prettier --check",
    "format:fix": "bun run prettier  --write",

Add Pre-commit Hook.
You can use Prettier with a pre-commit tool. This can re-format
your files that are marked as “staged” via git add before you
commit.

bunx mrm@2 lint-staged

This will install husky and lint-staged, then add a configuration to the project’s package.json that will automatically format supported files in a pre-commit hook.

DEV Community: espython

Setup a Next.JS project for production-ready