Next.js应用的文件/文件夹命名规范及ESLint配置问询

背景信息 #

• Next.js 核心文件（如_app.js、_document.js）采用下划线前缀的snake_case命名
• Next.js官方示例中，文件夹使用kebab-case命名，组件文件采用PascalCase命名
• Next.js支持ESLint，eslint-plugin-folders-rules、eslint-plugin-filenames插件默认以camelCase作为文件/文件夹命名规范，同时支持自定义其他规则
• Node.js生态中，kebab-case是文件/文件夹命名的通用标准

现有疑问 #

1. 是否可以让Next.js识别_app.js、_document.js之外的命名？
2. 如果不行，如何在ESLint中为这些文件设置例外规则？
3. 还是应该坚持使用在其他JavaScript框架中并不常见的snake_case？

当前配置 #

.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/"]
  }
}

package.json 依赖片段

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

注：将_app.js重命名为my-app.js后，Next.js无法识别该文件。

解答 #

1. Next.js能否识别自定义命名的核心文件？

不能。_app.js、_document.js属于Next.js的约定式核心文件，框架通过固定文件名来识别并加载这些文件，自定义命名会导致框架无法识别，进而丢失对应功能（比如_app.js负责全局布局与App组件初始化）。

2. 如何在ESLint中为核心文件设置例外？

针对当前使用的eslint-plugin-filenames和eslint-plugin-folders，可以通过规则的ignore选项或调整正则来排除核心文件，修改后的配置如下：

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

配置后，ESLint会忽略_app.js和_document.js的命名检查，不会触发kebab-case规则报错。

3. 是否应该坚持使用snake_case？

不需要刻意坚持，建议遵循混合规范：

• 保留Next.js要求的核心文件命名（_app.js、_document.js等），这是框架硬性约定
• 其余文件和文件夹遵循Node.js生态通用的kebab-case（或团队统一规范，比如官方示例的PascalCase组件+kebab-case文件夹）

这种方式既满足框架要求，又能保持项目命名风格一致，同时符合主流生态习惯。

内容的提问来源于stack exchange，提问作者Stefan