[Solved] Error: only absolute urls are supported

Hello Guys. Today I am trying to get data from my APIs but I am facing the following error: Error: only absolute urls are supported in NextJs. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How Error: only absolute urls are supported Occurs?

I am trying to get data from my APIs but I am facing the following error:

Error: only absolute urls are supported

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Error: only absolute urls are supported?

Solution 1: setup config

This error usually occurs when your different environments for client and server that’s why this error occurs, To solve Error: only absolute urls are supported you need to set up the config with env variables. First of all make /config/index.js and add following code in your index.js

const dev = process.env.NODE_ENV !== 'production';

export const server = dev ? 'http://localhost:3000' : 'https://your_live_url';

And then you can use this config in your App.js You just need to import the server from the config/index.js file and it will decide on your server production environment variable if your environment is development then it will return your development URL else it will return your production URL.

import { server } from '../config';

Products.getInitialProps = async function() {

  const res = await fetch(`${server}/api/products`)
  const data = await res.json()


  return {
    products: data
  }
}

And Now, Your error must be solved. Thank you.

Solution 2: Use .env

By Initializing the environment in your .env file your error will be solved. Just define your Environment in your .env file and For both environment You have to give URL. if your Production environment then your URL will be Different and if your environment is development then your URL will be different. Just like this.

// Local
URL="http://localhost:3000"

// Production
URL="https://your_live_url"

and then you can Import this URL variable in your code Just like this.

const { URL } = process.env;
const data = await fetcher(URL + '/api');

By Defining Environment your error will be solved. Thank you.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• How to use create-react-app with an older React version?
• How to display SVG image in React Component?
• Warning: A component is changing an uncontrolled input of type text to be controlled
• Unexpected reserved word ‘await’
• How to use a switch Case statement inside a React component?