Next.js Absolute API URL Helper
This package provides a quick solution around the common Next.js error that happens while trying to fetch data in the server side without providing a full url:
Server Error: Only absolute URLs are supported
Why does this happen though? Since these data fetching functions run only on the server, they have no way of knowing the origin
like code on the client side does, so Next.js reminds you that an absolute URL has to be provided.
Warning: this helper only works for getServerSideProps
and getInitialProps
(both client and server) -- For getStaticProps
you should either hard code the URL or use enviroment variables.
Usage
Simply provide the context to the function:
; ; // http://localhost:3000/api; // https://blog.com/api; // https://blog.com/api; // https://blog.com
Examples
getServerSideProps
; ;
getInitialProps (works on server and client 😊)
; Page.getInitialProps = ;
getServerSideProps using wrapper
; ;
getInitialProps using wrapper
; Page.getInitialProps = withApiUrl;