Next.js with prettier formatting

Question

I'm trying to format my next.js project with prettier. In my package.json I've defined this:

"scripts": {
"format": "prettier --write \"**/*.{js, jsx}\"",
},

So my project has a lot of folders:

• components
• layouts
• pages
• .next

I obviously don't want to run prettier in my .next folder. How can I ignore some folders?

Answer 1

You can add .prettierignore in the project root directory.

node_modules
.next
out

It uses .gitignore syntax .

Answer 2

Try this:

"scripts": {
"format": "prettier --write \"{,!(.next)/**/}*.{js, jsx}\"",
},

Answer 3

There is a good.prettierignore setup for a base Next.js install on the official github. I use this one a lot as a base to start from.

https://github.com/vercel/next.js/blob/canary/.prettierignore

node_modules
**/.next/**
**/_next/**
**/dist/**
packages/next/bundles/webpack/packages/*.runtime.js
packages/next/compiled/**
packages/react-refresh-utils/**/*.js
packages/react-refresh-utils/**/*.d.ts
packages/react-dev-overlay/lib/**
**/__tmp__/**
lerna.json
.github/actions/next-stats-action/.work
packages/next-codemod/transforms/__testfixtures__/**/*
packages/next-codemod/transforms/__tests__/**/*
packages/next-codemod/**/*.js
packages/next-codemod/**/*.d.ts
packages/next-env/**/*.d.ts
test-timings.json