如何在Next.js中实现动态API路由返回谷歌表格的JSON数据

第一步：调整路由文件配置 #

要实现/api/[动态参数]的访问路径，你需要把现有的dynamicid.js改名为[dynamicid].js，存放到项目的pages/api目录下，Next.js会自动识别带中括号的文件为动态API路由。

第二步：修改动态路由代码 #

直接复用你已经写好的getDataFromSheets方法拉取表格数据，根据路径参数匹配对应结果返回即可，完整代码如下：

// pages/api/[dynamicid].js
import { getDataFromSheets } from '../libs/sheets';

export default async function handler(req, res) {
  // 提取路径中的动态参数
  const { dynamicid } = req.query;
  // 拉取Google Sheet全量数据
  const sheetData = await getDataFromSheets();

  // 匹配逻辑二选一，根据你的业务需求调整
  // 方案1：按行索引匹配，比如访问/api/0返回表格第一行数据
  // 注意如果表格第一行是表头，可加sheetData = sheetData.slice(1)去掉表头
  const targetData = sheetData[Number(dynamicid)];

  // 方案2：按title字段匹配，比如访问/api/测试标题返回title为"测试标题"的行
  // const targetData = sheetData.find(item => item.title === dynamicid);

  if (targetData) {
    res.status(200).json(targetData);
  } else {
    res.status(404).json({ message: '未找到对应数据' });
  }
}

补充优化提示 #

你原有首页index.js的getStaticProps中，sheet.slice(0, sheet.length)的写法是返回全部数据，如果你的表格第一行是表头想要去掉，直接改成sheet.slice(1)即可，逻辑更简洁。

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