Nextjs imgix configuration issue with ?url params

Question

I'm trying to setup the built-in imgix loader for nextjs 12+.

When I look in the dom the srcsets are as follows: https://account.imgix.net/?url=%2Fhero.jpeg%26fm%3Dwebp&w=640&q=20

It appends this ?url= and the image isn't shown because of it. Not sure if there is something I'm missing or not understanding ?

Thank you in advance!

My setup:

Next.config.js
    loader: "imgix",
    path: "https://account.imgix.net/",
    domains: ["account.imgix.net"],

Then I try to render a next/image component like so:

  <Image
    alt="hero"
    src={`/hero.jpeg`}
    fill
    quality={20}
    style={{
      objectFit: "cover",
      objectPosition: "20% center",
      borderRadius: 10,
    }}
    priority
  />

Answer 1

As was mentioned in the first comment, next/image no longer supports global loader configurations. You have to use the loader prop.

// Example next/image loader

import Image from "next/image";

const normalizeSrc = (src) => (src[0] === "/" ? src.slice(1) : src);

const imgixLoader = ({ src, width, quality }) => {
  const url = new URL("https://example.com/" + normalizeSrc(src));
  const params = url.searchParams;
  params.set("auto", params.getAll("auto").join(",") || "format");
  params.set("fit", params.get("fit") || "max");
  params.set("w", params.get("w") || width.toString());
  if (quality) {
    params.set("q", quality.toString());
  }
  return url.href;
};

const MyImage = (props) => {
  return (
    <Image
      loader={imgixLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

However, if you'd like to avoid having to do this each time you use the component, you can use the React Provider Pattern to provide that prop to any next/image component you're using. This will remove the need to set it inline on each instance of the component.

Take a look at this CodeSandbox where we use the Provider pattern to give all the Next <Image /> components the same imgix loader configuration if you want to learn more.

Answer 2

Seems like next 13 doesn't support global loaders anymore. So I will have to add the loader to each image component I'm rendering.