It works also with other React framework, eg. Next

[tomekrozalski]

remix-image works pretty fine with Next, did you know about it? And it is much better than native next/image :) Maybe it should be mentioned in the documentation?

[Josh-McFarlin]

@tomekrozalski I'm actually really happy to hear Remix-Image works on Next.js. I'm not too surprised, considering it is just an API route, but I never tried testing it on other frameworks.

How are you using it in Next.js? Does it require any modifications to the library to work? If you could provide an example on how you are setting up the loader function that would be great! I'm wondering if I should make another package specifically for Next.js (including its own documentation)

[tomekrozalski]

@Josh-McFarlin Recently I was in a e-commerce project using NextJS + remix-image. It works pretty awesome, the project will go live soon :) The only change we had to make was in loader file (app/routes/api/image.js). It looks like that in our case:

import { MimeType } from 'remix-image';
import { DiskCache, imageLoader } from 'remix-image/server';

const config = {
  cache: new DiskCache({
    path: './.tmp',
  }),
  defaultOptions: {
    contentType: MimeType.WEBP,
  },
  selfUrl: process.env.NEXT_PUBLIC_SELF_URL,
};

export default async function handler(req, res) {
  const { body, headers } = await imageLoader(config, {
    url: `${process.env.NEXT_PUBLIC_SELF_URL}${req.url}`,
  });

  const responseHeaders = {};

  Array.from(headers).forEach(([property, value]) => {
    responseHeaders[property] = value;
  });

  res.writeHead(200, responseHeaders);
  res.end(body);
}