What are recommented folder and file naming conventions (eslint settings) for next.js apps?

Question

a) Next.js uses underscores in the names of its main files, e.g. _app.js, _document.js => Argument for using snake_case.

b) In the GitLab repository Next.js uses kebap-case for folder names

https://github.com/vercel/next.js/tree/canary/examples

and PascalCase for file names.

https://github.com/vercel/next.js/tree/canary/examples/amp-first/components/amp

c) Next.js support EsLint. Following eslint-plugins:

https://www.npmjs.com/package/eslint-plugin-folders-rules

https://www.npmjs.com/package/eslint-plugin-filenames

use camelCase as default for folder and file names (but also support different conventions).

d) For node.js applications kebap-case seems to be be kind of a standard:

Node.js project naming conventions for files & folders

=> Is it possible to tell next.js to use different names for _app.js, _document.js? => If not, how can I define an exception for eslint?

=> Or should I stick to snake_case (which is not really common in other JavaScript frameworks)?

Here is my current .eslintrc.json:

{
  "extends": "next/core-web-vitals",
  "plugins": [
    "folders",
    "filenames"
  ],
  "rules": {
    "filenames/match-regex": [2, "^[a-z-]+$", true],
    "filenames/match-exported": [ 2, "kebab" ],
    "folders/match-regex": [2, "^[a-z-]+$", "/front_end/"]
  }
}

And dependencies:

"eslint": "8.27.0",
"eslint-config-next": "^12.3.1",
"eslint-plugin-filenames": "1.3.2",
"eslint-plugin-folders": "1.0.3",
"eslint-plugin-jest": "27.1.1",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-react-hooks": "4.6.0",

(If I rename _app.js to my-app.js, it is not found any more by next.js)

Stefan · Accepted Answer · 2023-02-17T22:14:57.363

I use following compromise between kebap-case and next.js specifics:

a) kebap-case with optional _ prefix for file names and

b) optional square brackets around kebap-case for folder names

{
  "extends": "next/core-web-vitals",
  "plugins": [
    "folders",
    "filenames"
  ],
  "rules": {
  "filenames/match-regex": [2, "^(_)?[a-z-]+$"],   // kebap-case with optional _ prefix for next.js main files like _app.js
  "folders/match-regex": [2, "^(\\u005B)?[a-z-]+(\\u005D)?$", "/front_end/"],  // kebap-case with optional [ ] brackets
  }
}

That allows for _app.js and [my-variable]

I did not see a chance to get the rule for derived names working.

Please let me know if there are better options, e.g to add _app.js to some sort of ignore list.

What are recommented folder and file naming conventions (eslint settings) for next.js apps?

1 Answers1