CODEWITHSUNDEEP
next.jseslintnaming-conventions
Stefan
Stefan

Reputation: 12360

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

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

enter image description here

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

Upvotes: 6

Views: 7119

Answers (2)

Audwin Oyong
Audwin Oyong

Reputation: 2531

For Next.js, folder and file name conventions have been changed to lower kebab-case. The Component name is still using PascalCase.

super-amazing-app
  - blog
    - navigation-bar.tsx

export const NavigationBar = () => { ... }

Reasons:

  • kebab-case aligns more with URL naming schemes and practices. This way it's easier to parse and comprehend. For example:

    localhost:3000/blog/super-amazing-articles/1

    vs

    localhost:3000/Blog/SuperAmazingArticles/1

  • Operating System (OS) issues around folder and file naming casing are not as problematic, because for example on macOS, Git sometimes did not detect the case-sensitive changes.

    e.g.: How to do a case sensitive file rename in git on macOS

Ref: Naming Conventions in Next JS: Boosting SEO and Code Maintainability.

Upvotes: 2

Stefan
Stefan

Reputation: 12360

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.

Upvotes: 4

Related Questions