如何避免NextJS渲染pages目录中的指定文件？

方法1：将辅助文件移出pages目录 #

NextJS会把pages目录下所有符合扩展名规则的文件自动注册为路由，最简单的解决方式是把辅助文件放到pages以外的目录。比如在项目根目录创建utils、helpers或components/helpers这类目录，再调整导入路径：

• 把pages/foo/helper.tsx移动到utils/foo-helper.tsx
• 在pages/foo/index.tsx里修改导入语句：import helper from '../../utils/foo-helper';

方法2：配置pageExtensions指定页面文件规则 #

在项目根目录的next.config.js中配置pageExtensions，仅将特定命名的文件识别为页面组件。比如设置只有后缀为.page.tsx的文件才会被当作页面：

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['page.tsx', 'api.ts'], // 可根据需求调整，比如保留API路由的.ts文件
}

module.exports = nextConfig;

之后把pages/foo/index.tsx重命名为pages/foo/index.page.tsx，helper.tsx保持原名即可，此时GET /foo/helper会返回404，不会再渲染辅助文件。

方法3：切换到NextJS App Router（适用于NextJS 13+） #

如果使用App Router（app目录结构），默认只有命名为page.tsx的文件才会被当作路由页面，其他文件（包括helper.tsx）不会被注册为路由。直接在app/foo目录下保留page.tsx和helper.tsx即可，无需额外配置。

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