Next.js 8.1.0调用/api/twilio报错默认导出非React组件如何解决？

问题根因 #

你当前使用的next@8.1.0版本不支持/pages/api目录下的API路由特性，该特性是Next.js 9.0及以上版本才正式推出的。低版本Next.js会将/pages目录下的所有文件默认识别为React页面组件，你导出的接口处理函数不符合React组件的规范，因此会抛出default export is not a React Component的报错。你修改的useFileSystemPublicRoutes配置仅控制页面路由的自动识别逻辑，无法解决版本不兼容的本质问题。

解决方案 #

方案一：升级Next.js版本（推荐） #

直接将Next.js升级到9.0及以上的稳定版本，升级完成后你现有的API路由代码无需修改即可正常运行。
升级前需注意核对周边依赖的兼容性：

• 检查next-auth、next-redux-wrapper、next-routes等依赖的版本是否支持目标Next.js版本，必要时同步升级对应依赖
• 升级完成后先清理缓存重启服务验证：执行rm -rf .next && npm run dev

方案二：保留现有版本，用自定义服务器实现接口 #

如果暂时无法升级Next.js版本，可以通过自定义Node服务器的方式对接Twilio接口：

1. 项目根目录新增server.js文件，代码示例：

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  // 自定义Twilio接口路由
  server.get('/api/twilio', (req, res) => {
    // 后续替换为实际的Twilio token生成逻辑即可
    return res.json({ hello: 'world!' })
  })

  // 其余请求走Next.js原有处理逻辑
  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> 服务已启动: http://localhost:3000')
  })
})

2. 修改package.json中的启动脚本：

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

3. 删除原来的pages/api目录，重启服务即可正常访问/api/twilio接口。

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