next-api-url
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Next.js Absolute API URL Helper

    roniemeque

    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:

    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.com

    Examples

    getServerSideProps

    import apiUrl from "next-api-url";
     
    export const getServerSideProps: GetServerSideProps = async (context) => {
      const posts = await (await fetch(`${apiUrl(context)}/api/posts`)).json();
     
      return {
        props: { posts },
      };
    };

    getInitialProps (works on server and client 😊)

    import apiUrl from "next-api-url";
     
    Page.getInitialProps = async (context) => {
      const posts = await (await fetch(`${apiUrl(context)}/api/posts`)).json();
     
      return {
        posts,
      };
    };

    getServerSideProps using wrapper

    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,
        },
      };
    });

    getInitialProps using wrapper

    import { withApiUrl } from "next-api-url";
     
    Page.getInitialProps = withApiUrl(async (context, url) => {
      const posts = await (await fetch(`${url}/api/posts`)).json();
     
      return {
        posts,
      };
    });

    Install

    npm i next-api-url

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.22 kB

    Total Files

    4

    Last publish

    Collaborators

    • roniemeque