Next.js app throws malformed URL error when integrating Airtable library in server-side props

Other Questions Airtable
1

Hey folks! I’m hitting a wall with my Next.js project. I’m trying to use the Airtable library in getServerSideProps, but I keep getting this weird error about malformed URLs. Here’s what’s going on:

import Airtable from 'airtable';

export async function getServerSideProps() {
  DatabaseConfig.setup({
    apiEndpoint: 'https://api.mydatabase.com',
    secretKey: process.env.DB_SECRET_KEY,
  });
  const dataStore = DatabaseConfig.store(process.env.DB_NAME);
  dataStore('myCollection').fetch({...});
  return { props: { data: [] } };
}

When I run the dev server, it throws:

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

The error vanishes if I remove the database stuff. I’ve tried moving the config outside getServerSideProps, but no luck. I’m not using any middleware, so I’m stumped.

Anyone know how to make API calls to external services from getServerSideProps in Next.js? I’m using Next.js 13.1.1 and the latest Airtable package. Help!

2

hey, i’ve run into this before! it’s prob a config issue. make sure ur DB_SECRET_KEY and DB_NAME are set correctly in ur .env file. also, double check the apiEndpoint url - sometimes a typo can cause this. if that doesnt work, try wrapping ur db calls in a try/catch to see if theres more info in the error. good luck!

3

I’ve encountered similar issues when working with external APIs in Next.js. One thing that’s often overlooked is the timing of environment variable loading. Next.js loads env variables at build time, which can sometimes cause issues in development mode.

Try moving your environment variable declarations to a .env.local file and prefix them with NEXT_PUBLIC_ if they’re needed on the client side. For server-only variables, use them without the prefix.

Also, consider using the Airtable REST API directly with fetch instead of the Airtable library. This can sometimes circumvent issues with third-party libraries in server-side environments.

If these don’t work, you might want to look into using API routes instead of getServerSideProps for your Airtable calls. This can provide a cleaner separation of concerns and potentially avoid some of the quirks of SSR data fetching.

4

I’ve faced similar issues integrating external APIs in Next.js server-side props. One thing that helped me was moving the Airtable configuration to a separate file, like lib/airtable.js:

import Airtable from 'airtable';

const base = new Airtable({apiKey: process.env.AIRTABLE_API_KEY}).base(process.env.AIRTABLE_BASE_ID);

export { base };

Then, in getServerSideProps, you can import and use it as follows:

import { base } from '../lib/airtable';

export async function getServerSideProps() {
  try {
    const records = await base('Table Name').select().all();
    const data = records.map(record => record.fields);
    return { props: { data } };
  } catch (error) {
    console.error('Error fetching data:', error);
    return { props: { data: [] } };
  }
}

This approach has worked well for me, avoiding URL-related errors. Also, ensure your environment variables are correctly set in both development and production environments.