Export utilities from ExportedImage component

[jack828]

Hello, thank you for the great library. I'm using it with great success on cloudflare pages using next-on-pages.

I have a situation where I want to use optimised images from this library outside of react components - specifically, in nextjs' dynamic metadata. My use case is using remote images, but i'm sure for local ones there's a better way too.

After simply lifting out the functions imageURLForRemoteImage, urlToFilename (available in dist/utils), generateImageUrl, and splitFilePath into my project, i can mock something up like so:

In a app router page, e.g. src/app/foo/page.tsx

const imageURLForRemoteImage // as in ExportedImage
const urlToFilename // as in ExportedImage
const generateImageUrl // as in ExportedImage
const splitFilePath // as in ExportedImage

export async function generateMetadata(
  { params }: PageProps,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const item = items[params.id]
  return {
    title: item.title,
    openGraph: {
      images: [imageURLForRemoteImage({ src: item.images.cover /* a remote image i.e. https://example.com/foo.jpg */, width: 256 })]
    }
  }
}

This works as expected (thankfully) and outputs the correct optimised URL.

I suppose the question is either:

• is exporting the functions a good idea?
• or is there a better way?

Thanks again!

[Niels-IO]

Hi @jack828,

Interesting approach! I haven't thought about this use case yet. I have to look into it, how and if exporting these functions is a good idea. Currently, these are internal helpers.