如何配置Next.js使其忽略pages文件夹下的*.spec.ts测试文件？

方法1：自定义页面文件后缀（推荐） #

Next.js允许通过pageExtensions配置指定哪些后缀的文件会被当作路由页面。你可以给业务页面文件添加专属后缀（比如.page.ts/.page.tsx），然后配置Next.js只识别这类文件：

1. 修改项目根目录的next.config.js，添加pageExtensions配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['page.ts', 'page.tsx', 'page.js', 'page.jsx'],
}

module.exports = nextConfig

2. 将pages目录下的业务页面文件重命名，比如：
   • index.ts → index.page.ts
   • about.tsx → about.page.tsx

这样，*.spec.ts/*.spec.tsx这类测试文件就不会被Next.js当作路由页面处理，你依然可以把它们和对应页面放在同级目录。

方法2：通过webpack配置排除测试文件 #

如果你不想修改页面文件的命名，可以在next.config.js的webpack配置中排除测试文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 排除所有.spec.ts/.spec.tsx文件
    config.module.rules.push({
      test: /\.spec\.(ts|tsx)$/,
      loader: 'ignore-loader',
    })
    return config
  },
}

module.exports = nextConfig

注意：使用这个方法需要先安装ignore-loader依赖：

npm install ignore-loader --save-dev

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