Next.js throws malformed URL error when importing Airtable library in getServerSideProps

Other Questions Airtable
1

I’m working on a Next.js application and trying to fetch data from Airtable inside the getServerSideProps function. However, I keep getting this error whenever I try to import the Airtable library.

Here’s my code setup:

pages/dataPage.js

import React from 'react';
import Airtable from 'airtable';

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

export async function getServerSideProps({ params }) {
  Airtable.configure({
    endpointUrl: 'https://api.airtable.com',
    apiKey: process.env.AIRTABLE_KEY,
  });
  
  const database = Airtable.base(process.env.AIRTABLE_DATABASE);
  const records = database('myTable').select({});
  
  return { 
    props: { 
      data: [] 
    } 
  };
}

function DataPage(props) {
  return (
    <div>
      <h1>My Data</h1>
    </div>
  );
}

export default DataPage;

The error message I get is:

Error: URL is malformed "". Please use only absolute URLs

I’ve tried setting the endpoint URL explicitly but that didn’t help. The strange thing is that just importing Airtable causes this issue, even without calling any functions. It seems to be related to the experimental edge runtime configuration.

Has anyone successfully used Airtable with Next.js in this setup? What am I missing here?

2

The experimental edge runtime is your problem. I hit the same issue when moving pages to edge runtime. The Airtable library needs Node.js APIs that don’t exist in edge environments - that’s what’s causing the malformed URL error.

Two fixes: ditch the edge runtime config and go back to default Node.js runtime, or skip the library entirely and use fetch() with Airtable’s REST API directly. I went with the second option to keep the performance gains. Just make sure you add your API key in the Authorization header as ‘Bearer YOUR_KEY’.