Next.js – Error: only absolute urls are supported

by

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
  }
}

More Related Contents:

  1. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  2. What is mapDispatchToProps?
  3. What is the best way to access redux store outside a react component?
  4. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  5. How to access files uploaded to the public folder in Next.js?
  6. Simple Conditional Routing in Reactjs
  7. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  8. Stop useEffect from running on mount
  9. Use Connect or pass data as props to children
  10. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  11. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  12. How does connect work without mapDispatchToProps
  13. NextJs CORS issue
  14. React router, pass data when navigating programmatically?
  15. How does the revalidate process in Incremental Static Regeneration work?
  16. How to hash CSS class names in Nextjs?
  17. Persistent navigation in a NextJs _app
  18. How to dynamically import non-React client side libraries in Next.js?
  19. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  20. Next.js router is returning query parameters as undefined on first render?
  21. How to enable file upload on React’s Material UI simple input?
  22. how to async/await redux-thunk actions?
  23. Cache busting with CRA React
  24. how to set initial state in redux
  25. How to detect window size in Next.js SSR using react hook?
  26. My Redux state has changed, why doesn’t React trigger a re-render?
  27. How do I see state when logging to the console instead of Proxy object inside reducer action?
  28. Unable to load images from static folder
  29. Get URL pathname in nextjs
  30. Next Image not taking class properties

Leave a Comment