setup loaderFile for next/image and avoid a rewrite

Author: pieh

src/adapter.ts

@@ -6,7 +6,12 @@ const adapter: NextAdapter = {
     // Enable Next.js standalone mode at build time
     config.output = 'standalone'
 
-    console.log('modifyConfig hook called')
+    if (config.images.loader === 'default') {
+      // Set up Netlify Image CDN image's loaderFile
+      config.images.loader = 'custom'
+      config.images.loaderFile = '@netlify/plugin-nextjs/dist/next-image-loader.cjs'
+    }
+
     return config
   },
   async onBuildComplete(ctx) {

src/build/image-cdn.ts

@@ -12,22 +12,13 @@ function generateRegexFromPattern(pattern: string): string {
  */
 export const setImageConfig = async (ctx: PluginContext): Promise<void> => {
   const {
-    images: { domains, remotePatterns, path: imageEndpointPath, loader: imageLoader },
+    images: { domains, remotePatterns, loader: imageLoader },
   } = await ctx.buildConfig
   if (imageLoader !== 'default') {
     return
   }
 
   ctx.netlifyConfig.redirects.push(
-    {
-      from: imageEndpointPath,
-      // w and q are too short to be used as params with id-length rule
-      // but we are forced to do so because of the next/image loader decides on their names
-      // eslint-disable-next-line id-length
-      query: { url: ':url', w: ':width', q: ':quality' },
-      to: '/.netlify/images?url=:url&w=:width&q=:quality',
-      status: 200,
-    },
     // when migrating from @netlify/plugin-nextjs@4 image redirect to ipx might be cached in the browser
     {
       from: '/_ipx/*',

src/next-image-loader.cts

@@ -0,0 +1,12 @@
+import type { ImageLoader } from 'next/dist/shared/lib/image-external.js'
+
+const netlifyImageLoader: ImageLoader = ({ src, width, quality }) => {
+  const url = new URL(`.netlify/images`, 'http://n')
+  url.searchParams.set('url', src)
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', (quality || 75).toString())
+  console.log(url)
+  return url.pathname + url.search
+}
+
+export default netlifyImageLoader