Next.js - Error: only absolute urls are supported

Question

I'm using express as my custom server for next.js. Everything is fine, when I click the products to the list of products

Step 1: I click the product Link

Step 2: It will show the products in the database.

However if I refresh the /products page, I will get this Error

Server code (Look at /products endpoint)

app.prepare() .then(() => {   const server = express()    // This is the endpoints for products   server.get('/api/products', (req, res, next) => {     // Im using Mongoose to return the data from the database     Product.find({}, (err, products) => {       res.send(products)     })   })    server.get('*', (req, res) => {     return handle(req, res)   })    server.listen(3000, (err) => {     if (err) throw err     console.log('> Ready on http://localhost:3000')   }) }) .catch((ex) => {   console.error(ex.stack)   process.exit(1) }) 

Pages - products.js (Simple layout that will loop the products json data)

import Layout from '../components/MyLayout.js' import Link from 'next/link' import fetch from 'isomorphic-unfetch'  const Products = (props) => (   <Layout>     <h1>List of Products</h1>     <ul>       { props.products.map((product) => (         <li key={product._id}>{ product.title }</li>       ))}     </ul>   </Layout> )  Products.getInitialProps = async function() {    const res = await fetch('/api/products')   const data = await res.json()    console.log(data)   console.log(`Showed data fetched. Count ${data.length}`)    return {     products: data   } }  export default Products 

Answer 1

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.

One 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:

/config/index.js

const dev = process.env.NODE_ENV !== 'production';  export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com'; 

products.js

import { server } from '../config';  // ...  Products.getInitialProps = async function() {    const res = await fetch(`${server}/api/products`)   const data = await res.json()    console.log(data)   console.log(`Showed data fetched. Count ${data.length}`)    return {     products: data   } }