Next.js Vercel 500 Error: "Only absolute URLs are supported" with Sanity
The error message TypeError: Only absolute URLs are supported is the key here - it's telling you exactly what's wrong. Your code works locally because your .env.local file is available, but environment variables aren't automatically transferred to Vercel when you deploy.
The issue is that process.env.SANITY_URL is likely undefined in your Vercel deployment, which means you're trying to fetch from an incomplete URL (just query=... without the base URL part), and node-fetch requires absolute URLs.
Here's how to fix it:
Add your environment variable to Vercel:
- Go to your Vercel project dashboard
- Navigate to Settings → Environment Variables
- Add
SANITY_URLwith the value:https://projectID.api.sanity.io/v2021-06-07/data/query/production?(replaceprojectIDwith your actual project ID) - Make sure it's available for Production, Preview, and Development environments
- Redeploy your site (Vercel usually auto-redeploys when you add env vars, but you can trigger it manually)
Better yet, use the official Sanity client instead of manual fetch:
Your current approach works, but using the official @sanity/client is more robust and handles a lot of edge cases for you:
import { createClient } from '@sanity/client'
export const sanityClient = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2021-06-07',
useCdn: true,
})
// Then in getServerSideProps:
export const getServerSideProps = async (context) => {
const posts = await sanityClient.fetch(`*[_type == "post"]`);
return {
props: {
posts: posts || [],
},
};
};This way you'd add NEXT_PUBLIC_SANITY_PROJECT_ID to your Vercel environment variables instead.
- Add a fallback check (good practice):
export const getServerSideProps = async (context) => {
if (!process.env.SANITY_URL) {
console.error('SANITY_URL is not defined');
return { props: { posts: [] } };
}
const query = encodeURIComponent(`*[ _type == "post" ]`);
const url = `${process.env.SANITY_URL}query=${query}`;
// ... rest of your code
};The most common mistake here is forgetting to add environment variables to Vercel - they don't get transferred from your local .env.local file automatically for security reasons. Once you add them in the Vercel dashboard, your deployment should work just like it does locally!
Show original thread20 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.