Next.js中用Airtable JS调用API遇URL格式错误求助

问题原因 #

你遇到的URL格式错误，本质是**experimental-edge运行时与Airtable官方SDK（v0.11.6）不兼容**。Edge Runtime基于V8引擎，仅支持标准Web API，不提供Node.js专属的http/https等核心模块；而Airtable SDK内部依赖这些Node.js API，甚至在导入阶段就会触发相关逻辑，导致报错。

解决方案 #

方案1：移除Edge Runtime配置（推荐） #

getServerSideProps本身就是在Node.js环境运行的，无需启用experimental-edge。直接删除运行时配置即可正常使用Airtable SDK：

import { Component } from 'react';
import Airtable from 'airtable';

// 将Airtable配置移到函数外，避免重复初始化
Airtable.configure({
  endpointUrl: 'https://api.airtable.com',
  apiKey: process.env.AIRTABLE_API_KEY,
});
const base = Airtable.base(process.env.AIRTABLE_BASE);

export async function getServerSideProps({ query }) {
  try {
    // 执行Airtable查询并获取数据
    const records = await base('someTable').select({
      // 自定义查询参数，比如 maxRecords: 20, view: 'Grid view'
    }).all();
    
    // 格式化返回给页面的数据
    const items = records.map(record => ({
      id: record.id,
      ...record.fields
    }));
    
    return { props: { items } };
  } catch (error) {
    console.error('Airtable请求失败:', error);
    return { props: { items: [] } };
  }
}

class SomePage extends Component {
  render() {
    const { items } = this.props;
    return (
      <>
        {items.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </>
    );
  }
}

export default SomePage;

方案2：保留Edge Runtime，改用Airtable REST API直接请求 #

如果必须使用Edge Runtime，放弃Airtable SDK，直接用标准fetch调用Airtable REST API：

import { Component } from 'react';

export const config = {
  runtime: 'experimental-edge',
};

export async function getServerSideProps({ query }) {
  try {
    const baseId = process.env.AIRTABLE_BASE;
    const tableName = 'someTable';
    const apiKey = process.env.AIRTABLE_API_KEY;
    
    // 调用Airtable REST API
    const response = await fetch(`https://api.airtable.com/v0/${baseId}/${encodeURIComponent(tableName)}`, {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
      },
      // 可选：根据需求设置缓存策略
      cache: 'no-store'
    });
    
    if (!response.ok) {
      throw new Error(`请求错误：${response.status}`);
    }
    
    const data = await response.json();
    const items = data.records.map(record => ({
      id: record.id,
      ...record.fields
    }));
    
    return { props: { items } };
  } catch (error) {
    console.error('Airtable请求失败:', error);
    return { props: { items: [] } };
  }
}

class SomePage extends Component {
  render() {
    const { items } = this.props;
    return (
      <>
        {items.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </>
    );
  }
}

export default SomePage;

注意事项 #

• 确保.env.local文件中已正确配置AIRTABLE_API_KEY和AIRTABLE_BASE两个环境变量
• 使用REST API时，表名包含特殊字符需用encodeURIComponent转义
• Edge Runtime下，可通过fetch的cache参数控制请求缓存行为

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