this package is inspired by next-absolute-url

nextjs-url

Get the protocol, host and all for your Next.js app

This module enables you to easily get the protocol, host and all URL params of your Next.js app, both on the server and the client.

Install

With npm installed, run

npm install nextjs-url --save

or with yarn installed, run

yarn add nextjs-url

This package will let you get the current url of your running Next.js website. You can get the url server side or clientside. For server side calling, you have to provide a request object as a prop. You can get this object from getServerSideFunction. So it is important to note that you can not run this module in a static page as your domain is assigned after you page is built. You may consider calling it client side in this senario or use environment variable for preknown domains.

If you are deploying with Vercel, you may consider using System Environment Variables.

Structure

By default the function return an URL Object which is structured something like:

URL {
    hash,
    host,
    hostname,
    href,
    origin,
    password,
    pathname,
    port,
    protocol,
    search,
    searchParams: URLSearchParams {},
    username,
}

Usage

For server side calling:

You must provide a request for server side calling which can be acured by calling getServerSideProps.

import { getBaseUrl, getApiRoot } from "nextjs-url";

export async function getServerSideProps({ req }) {
  const baseUrl = getBaseUrl(req).href; // http://localhost:<PORT>/
  const apiRoot = getApiRoot(req).href; // http://localhost:<PORT>/api/

  //Do something with the data

  return {
    props: {
      apiRoot,
      baseUrl,
    },
  };
}

For calling in API:

You may sometimes need to call another API from a API. In that case you can call the module with the API request prop.

import { getBaseUrl, getApiRoot } from "nextjs-url";

export default function Test(req, res) {
  const baseUrl = getBaseUrl(req).href; // http://localhost:<PORT>/
  const apiRoot = getApiRoot(req).href; // http://localhost:<PORT>/api/

  //Do something with the data

  res.send({ apiRoot, baseUrl });
}

For client side calling:

For client side calling you don't need the request object just call the function without any prop. Remeber that you can't call it without request prop in server side.

import { getBaseUrl, getApiRoot } from "nextjs-url";
import { useEffect } from "react";

export default function MyApp() {
  useEffect(() => {
    const baseUrl = getBaseUrl().href; // http://localhost:<PORT>/
    const apiRoot = getApiRoot().href; // http://localhost:<PORT>/api/

    //Do something with the data
  }, []);
  return <h>Hello World 🙋‍♂️</h>;
}

If you deployed your Next.js app with Vercel the baseUrl will be something like https://<your-app>.vercel.app/.

However, if you are running the app locally the baseUrl will be http://localhost:<PORT>/ instead.

Same thing with the apiRoot.

MIT