Troubleshooting Next.js app: 'URL is malformed' error when using Airtable library in server-side props

Other Questions Airtable
1

I’m having trouble with my Next.js app. I’m trying to use the Airtable library in getServerSideProps, but I keep getting an error about malformed URLs. Here’s what I’ve got:

import Airtable from 'airtable';

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

export async function getServerSideProps({ query }) {
  Airtable.configure({
    endpointUrl: 'https://api.airtable.com',
    apiKey: process.env.AIRTABLE_API_KEY,
  });
  const base = Airtable.base(process.env.AIRTABLE_BASE);
  base('myTable').select({});
  return { props: { items: [] } };
}

When I run the app, I get this error:

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

The weird thing is, I’m not even using any URLs in my code except for the Airtable endpoint. I’ve tried moving the Airtable config outside of getServerSideProps, but no luck. I’ve also checked that I’m not using any middleware.

I’m pretty sure I should be able to make API calls from getServerSideProps. So what’s going on here? How can I fix this and use Airtable in my Next.js app?

Oh, and I’m using Next.js 13.1.1 and Airtable 0.11.6, if that helps. Thanks!

2

hey mate, i’ve seen this before. try removing that experimental-edge thing. it’s causing issues with airtable. also, make sure ur env vars are set up right. sometimes they don’t load properly in next.js. if that doesn’t work, u might wanna use fetch instead of the airtable library. it’s more reliable for server-side stuff in next.js. good luck!

3

I’ve run into this issue before, and it’s a tricky one. The problem likely stems from the Airtable library not playing well with Next.js’s server-side environment.

First, ditch the ‘experimental-edge’ runtime. It’s causing more trouble than it’s worth here. Then, try initializing Airtable outside of getServerSideProps. Something like this at the top of your file:

const Airtable = require('airtable');
Airtable.configure({
  endpointUrl: 'https://api.airtable.com',
  apiKey: process.env.AIRTABLE_API_KEY
});
const base = Airtable.base(process.env.AIRTABLE_BASE);

Now in getServerSideProps, you can just use ‘base’ directly. If that doesn’t work, you might need to wrap your Airtable calls in a try/catch block to handle any weird errors. Hope this helps!

4

I’ve encountered a similar issue when working with Airtable in a Next.js project. The problem might be related to how the Airtable library interacts with the Edge runtime.

Here’s what worked for me:

  1. Remove the runtime: 'experimental-edge' config. Edge runtime has limitations with certain APIs.

  2. Use the fetch API instead of the Airtable library for server-side requests. It’s more compatible with Next.js server-side rendering.

  3. If you must use the Airtable library, consider moving the data fetching to an API route, then call that from getServerSideProps.

Example using fetch:

export async function getServerSideProps() {
  const res = await fetch(`https://api.airtable.com/v0/${process.env.AIRTABLE_BASE}/myTable`, {
    headers: { Authorization: `Bearer ${process.env.AIRTABLE_API_KEY}` },
  });
  const data = await res.json();
  return { props: { items: data.records } };
}

This approach should resolve the URL malformation error and allow you to fetch data from Airtable in your Next.js app.