{"id":153,"hash":"b98675ed73265e765a62504d6e347772228471aa7e9b0c267d55771c326858f5","pattern":"Next.js - Error: only absolute urls are supported","full_message":"I'm using express as my custom server for next.js. Everything is fine, when I click the products to the list of products\n\nStep 1: I click the product Link\n\nStep 2: It will show the products in the database.\n\nHowever if I refresh the /products page, I will get this Error\n\nServer code (Look at /products endpoint)\n\napp.prepare()\n.then(() => {\n  const server = express()\n\n  // This is the endpoints for products\n  server.get('/api/products', (req, res, next) => {\n    // Im using Mongoose to return the data from the database\n    Product.find({}, (err, products) => {\n      res.send(products)\n    })\n  })\n\n  server.get('*', (req, res) => {\n    return handle(req, res)\n  })\n\n  server.listen(3000, (err) => {\n    if (err) throw err\n    console.log('> Ready on http://localhost:3000')\n  })\n})\n.catch((ex) => {\n  console.error(ex.stack)\n  process.exit(1)\n})\n\nPages - products.js (Simple layout that will loop the products json data)\n\nimport Layout from '../components/MyLayout.js'\nimport Link from 'next/link'\nimport fetch from 'isomorphic-unfetch'\n\nconst Products = (props) => (\n  <Layout>\n    <h1>List of Products</h1>\n    <ul>\n      { props.products.map((product) => (\n        <li key={product._id}>{ product.title }</li>\n      ))}\n    </ul>\n  </Layout>\n)\n\nProducts.getInitialProps = async function() {\n\n  const res = await fetch('/api/products')\n  const data = await res.json()\n\n  console.log(data)\n  console.log(`Showed data fetched. Count ${data.length}`)\n\n  return {\n    products: data\n  }\n}\n\nexport default Products","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"As the error states, you will have to use an absolute URL for the fetch you're making. I'm assuming it has something to do with the different environments (client & server) on which your code can be executed. Relative URLs are just not explicit & reliable enough in this case.\n\nOne way to solve this would be to just hardcode the server address into your fetch request, another to set up a config module that reacts to your environment:\n\n/config/index.js\n\nconst dev = process.env.NODE_ENV !== 'production';\n\nexport const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';\n\nproducts.js\n\nimport { server } from '../config';\n\n// ...\n\nProducts.getInitialProps = async function() {\n\n  const res = await fetch(`${server}/api/products`)\n  const data = await res.json()\n\n  console.log(data)\n  console.log(`Showed data fetched. Count ${data.length}`)\n\n  return {\n    products: data\n  }\n}","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/44342226/next-js-error-only-absolute-urls-are-supported","votes":91,"created_at":"2026-04-19T04:41:25.072065+00:00","updated_at":"2026-04-19T04:51:06.842659+00:00"}