Do not include the basePath while using Link

[webtonative-himanshu]

I have split a NextJS applications into 3 apps and set the basePath for 2 applications /blog and /showcase.

While using Link or useRouter to navigate it is appending basePath at start which is mentioned in the docs but I want to opt-out from the behaviour but I haven't found any way to do that .

[mutasim77]

There's an experimental feature to do this:

const nextConfig = {
    experimental: {
        manualClientBasePath: true
    }
}

However, it's important to note that this feature is still in the experimental stage.

[webtonative-himanshu]

@mutasim77 Thank you very much 🙏

[monster-anshu]

const nextConfig = {
    experimental: {
        manualClientBasePath: true
    }
}

This is experimental feature so it is showing strange behaviour and I think it is not suitable for production so have done this work around by appeding the domain to the url path . it prevents nextjs to append the basePath and it does not break the single page behaviour.

Link.tsx

import type { UrlObject } from "url";
import NextLink from "next/link";
import { ComponentProps, FC } from "react";

export interface ILinkProps extends ComponentProps<typeof NextLink> {}

const DOMAIN = process.env.NEXT_PUBLIC_HOST || "";

type Url = string | UrlObject;

export const getURL = (url: Url) => {
  const pathname = typeof url === "string" ? url : url?.pathname ?? "";
  if (!pathname) return url;
  if (!pathname.startsWith("/")) return url;

  if (typeof url === "string") {
    return DOMAIN + pathname;
  }

  return {
    ...url,
    pathname: DOMAIN + pathname,
  } as Url;
};

const Link: FC<ILinkProps> = ({
  children,
  href,
  prefetch = false,
  ...props
}) => {
  return (
    <NextLink {...props} prefetch={prefetch} href={getURL(href)}>
      {children}
    </NextLink>
  );
};

export default Link;

useRouter.tsx

import { getURL } from "@common/components/Link";
import { NextRouter, useRouter as useNextRouter } from "next/router";

export function useRouter() {
  const router = useNextRouter();

  return {
    ...router,
    push(url, as, options) {
      router.push(getURL(url), as && getURL(as), options);
    },
    replace(url, as, options) {
      router.replace(getURL(url), as && getURL(as), options);
    },
  } as NextRouter;
}