close
Error: only absolute urls are supported, only absolute urls are supported, Error: only absolute urls, absolute urls are supported, Error only absolute urls are supported

[Solved] Error: only absolute urls are supported

by

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.

Contents
  1. How Error: only absolute urls are supported Occurs?
  2. How To Solve Error: only absolute urls are supported?
  3. Solution 1: setup config
  4. Solution 2: Use .env
  5. Conclusion

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?

  1. How To Solve Error: only absolute urls are supported?

    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. and then you can Import this URL variable in your code. and then you can Import this URL variable in your code. By Defining Environment your error will be solved. Thank you.

  2. Error: only absolute urls are supported

    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 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. And Now, Your error must be solved. Thank you.

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

Leave a Comment