React external url image with prefix

When you want to deploy your site for example on github page. You need to use prefix in react config and allow all external domain for url.

But with NextReact Image component this will fail because he will add the prefix to the url....

Solution

Create a custom loader for the image component, that will juste return the url without the prefix.

const loaderProp =({ src }: { src: string}) => {
  return src;
}
<Image
    src={row.original.logo || "next.svg"}
    alt={row.original.name}
    loader={loaderProp}
    ...

const nextConfig = {
  basePath: process.env.BASE_PATH || "",
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
        port: "",
      },
      {
        protocol: "https",
        hostname: "**",
        port: "",
      }
    ],
  },
};