Error: only absolute urls are supported occurs in Next.js when you try to make a fetch or network request to a relative URL instead of an absolute URL.
How to fix the error?
To fix the only absolute urls are supported error in Next.js, hardcode the server address into your fetch request.
For example, if you are trying to fetch data from an API using the fetch function or any other HTTP request library.
Incorrect (Relative URL):
fetch('/api/data')Correct (Absolute URL):
fetch('http://localhost:8000/api/data')If you are working on real-time projects, then you should define your configuration like this:
const dev = process.env.NODE_ENV !== 'production';
export const server = dev ? 'http://localhost:8000' : 'https://your_main_server.com';
In a Next.js environment (especially during server-side rendering or static site generation), you must specify the full URL, including the protocol (http or https) and the domain name.
Using environment variables, you can easily switch between different base URLs depending on the environment without changing the code.
Remember to add the NEXT_PUBLIC_ prefix to environment variables if you want them to be accessible on the client side in Next.js.
Summary Table For Error, Cause, and Solution
| Topic | Details |
|---|---|
| Issue | “only absolute urls are supported” error in Next.js |
| Cause | Using relative URLs when making network requests in Next.js |
| Incorrect Way (Relative URL) | fetch('/api/data') |
| Correct Way (Absolute URL) | fetch('http://localhost:8000/api/data') |
| Solution | 1. Always use absolute URLs.
2. Use environment variables for the base URL. |
| Environment Variable Example | const BASE_URL = process.env.NEXT_PUBLIC_API_URL |
| Note on Environment Variables | Add NEXT_PUBLIC_ prefix for client-side accessibility in Next.js. |
That’s all!
Related posts
ReferenceError: fetch is not defined in Node.js
Cannot find module ‘fs/promises’ in Node.js
error: cannot find module ‘node:events’ in Node.js
Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.