Next.js运行npm run dev正常 执行npm run build提示缺React组件默认导出报错

报错原因 #

Next.js 强制约定pages目录下所有.js/.jsx/.ts/.tsx后缀的文件都会被自动识别为独立的路由页面，构建阶段会对所有识别到的页面文件做校验，要求必须存在 React 组件作为默认导出。
你当前将category.tsx、getServerSideProps.ts直接放在pages/category/[id]/目录下，两个文件都不满足页面导出规则，因此触发构建报错：

• getServerSideProps.ts仅导出了getServerSideProps服务端数据请求方法，无默认组件导出
• category.tsx仅导出了命名组件CategoryPage，无默认导出
  开发模式下未开启该规则的强校验，因此运行npm run dev不会触发报错。

解决方法 #

方案1（推荐，符合Next.js开发约定） #

将非页面逻辑的文件移出pages目录：

1. 在项目根目录新建components/category/目录，将category.tsx移动到该目录下
2. 在项目根目录新建utils/或者serverProps/目录，将getServerSideProps.ts移动到该目录下
3. 调整pages/category/[id]/index.ts中的导入路径即可，原有导出逻辑不需要修改。

方案2（无需改动文件结构，适配特殊场景） #

修改Next.js配置，自定义页面文件识别规则，忽略不需要作为路由的文件：
在项目根目录的next.config.js中添加pageExtensions配置，指定只有特定后缀的文件会被识别为页面：

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}

之后将pages/category/[id]/index.ts重命名为index.page.ts即可，同目录下其他非.page后缀的文件不会被识别为路由页面。

额外注意项 #

你提供的category.tsx代码存在拼写笔误：定义的接口名为CategoryPagePropsInterface，使用时写为了CategryPagePropsInterface，缺少字母e，可能会额外触发类型校验报错，建议修正。

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