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.
Simply provide the context to the function:
import apiUrl from "next-api-url";
fetch(`${apiUrl(ctx)}/posts`); // http://localhost:3000/api
fetch(`${apiUrl(ctx)}/posts`); // https://blog.com/api
fetch(`${apiUrl({ req: ctx.req })}/posts`); // https://blog.com/api
fetch(`${apiUrl({ req: ctx.req })}/posts`, false); // https://blog.comimport apiUrl from "next-api-url";
export const getServerSideProps: GetServerSideProps = async (context) => {
const posts = await (await fetch(`${apiUrl(context)}/api/posts`)).json();
return {
props: { posts },
};
};import apiUrl from "next-api-url";
Page.getInitialProps = async (context) => {
const posts = await (await fetch(`${apiUrl(context)}/api/posts`)).json();
return {
posts,
};
};import { withApiUrl } from "next-api-url";
export const getServerSideProps = withApiUrl(async (context, url) => {
const posts = await (await fetch(`${url}/api/posts`)).json();
return {
props: {
posts,
},
};
});import { withApiUrl } from "next-api-url";
Page.getInitialProps = withApiUrl(async (context, url) => {
const posts = await (await fetch(`${url}/api/posts`)).json();
return {
posts,
};
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent