如何在Next.js的dynamicid.js路由中将index.js的数据以JSON格式输出

1. 确认API路由文件位置 #

你需要先将dynamicid.js放在pages/api目录下，Next.js会自动识别该目录下的文件为API接口，最终访问路径为/api/dynamicid。

2. 修改dynamicid.js代码 #

直接复用你已经封装好的getDataFromSheets方法即可，注意该方法是异步函数，需要给handler加上async标识：

// pages/api/dynamicid.js
// 导入路径根据你的实际文件结构调整，以下路径适配libs文件夹在pages目录下的情况
import { getDataFromSheets } from '../libs/sheets'

export default async function handler(req, res) {
  try {
    const sheet = await getDataFromSheets()
    // 和index.js逻辑保持一致，处理数据去掉表头
    const data = sheet.slice(0, sheet.length)
    // 返回JSON格式数据
    res.status(200).json(data)
  } catch (error) {
    res.status(500).json({ error: '获取数据失败，请检查环境变量配置' })
  }
}

额外说明 #

• API路由全程在服务端运行，不会暴露谷歌表格密钥等敏感环境变量，安全性和getStaticProps完全一致
• 如果你需要做带动态参数的接口，比如根据ID返回对应行的数据，可以将文件命名为[id].js放在pages/api目录下，通过req.query.id拿到路径参数后做数据过滤即可

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