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**
<!-- language: lang-js -->
const dev = process.env.NODE_ENV !== 'production';
export const API_BASE_URL = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';
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*
<!-- language: lang-js -->
const dev = process.env.NODE_ENV !== 'production';
export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';
*products.js*
<!-- language: lang-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
}
}