GraphCMS image loader for Next.js example

graphcms-loader.js

// GraphQL query

const GetPhotos = gql`
  query GetPhotos {
    assets {
      id
      url
      width
      height
    }
  }
`;

// render function

const Home = ({photos}) => (
  <>
    {photos.map((photo) => (
      <div key={photo.id}>
        <Image
          src={photo.url}
          width={photo.width}
          height={photo.height}
          layout="responsive"
          loader={graphCmsLoader} />
      </div>
    ))}
  </>
);

export default Home;

// loader implementation

function graphCmsLoader({src, width}) {
  const match = /^(https?:\/\/media.graphcms.com)(?:\/[^\/]+)?\/([^\/]+)$/.exec(src);

  if (!match) {
    throw new Error('Invalid GraphCMS asset URL');
  }

  const [prefix, handle] = match.slice(1);
  const resizedSrc = `${prefix}/resize=width:${width}/${handle}`;

  return resizedSrc;
}