Setup a Next.JS project for production-ready

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


This content originally appeared on DEV Community and was authored by espython

  1. 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

Image description

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

  1. 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

Image description

Create prettier configs files .prettierrc and .prettierignore

Image description

Image description

  1. 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",

  1. 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.


This content originally appeared on DEV Community and was authored by espython


Print Share Comment Cite Upload Translate Updates
APA

espython | Sciencx (2024-06-22T22:52:24+00:00) Setup a Next.JS project for production-ready. Retrieved from https://www.scien.cx/2024/06/22/setup-a-next-js-project-for-production-ready/

MLA
" » Setup a Next.JS project for production-ready." espython | Sciencx - Saturday June 22, 2024, https://www.scien.cx/2024/06/22/setup-a-next-js-project-for-production-ready/
HARVARD
espython | Sciencx Saturday June 22, 2024 » Setup a Next.JS project for production-ready., viewed ,<https://www.scien.cx/2024/06/22/setup-a-next-js-project-for-production-ready/>
VANCOUVER
espython | Sciencx - » Setup a Next.JS project for production-ready. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/22/setup-a-next-js-project-for-production-ready/
CHICAGO
" » Setup a Next.JS project for production-ready." espython | Sciencx - Accessed . https://www.scien.cx/2024/06/22/setup-a-next-js-project-for-production-ready/
IEEE
" » Setup a Next.JS project for production-ready." espython | Sciencx [Online]. Available: https://www.scien.cx/2024/06/22/setup-a-next-js-project-for-production-ready/. [Accessed: ]
rf:citation
» Setup a Next.JS project for production-ready | espython | Sciencx | https://www.scien.cx/2024/06/22/setup-a-next-js-project-for-production-ready/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.