feat: add env var to disable IPX function

includes some domain path and test updates

Author: ericapisani

demos/canary/pages/index.js

@@ -17,7 +17,7 @@ export default function Home() {
       </main>
 
       <Image
-        src="https://raw.githubusercontent.com/netlify/next-runtime/main/next-on-netlify.png"
+        src="https://raw.githubusercontent.com/netlify/next-runtime/main/demos/default/public/next-on-netlify.png"
         alt="Picture of the author"
         width={540}
         height={191}

demos/default/next.config.js

@@ -71,20 +71,18 @@ module.exports = {
   },
   // https://nextjs.org/docs/basic-features/image-optimization#domains
   images: {
-    domains: ['raw.githubusercontent.com'],
+    domains: ['raw.githubusercontent.com', 'upload.wikimedia.org'],
+    remotePatterns: [
+      {
+        hostname: '*.imgur.com',
+      }
+    ]
   },
   // https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles-sass-test')],
   },
   experimental: {
     optimizeCss: true,
-    images: {
-      remotePatterns: [
-        {
-          hostname: '*.imgur.com',
-        },
-      ],
-    },
-  },
+  }
 }

demos/default/pages/image.js

@@ -15,7 +15,7 @@ const Images = () => (
     <p>
       <Image src={logo} alt="netlify logomark" />
       <Image
-        src="https://raw.githubusercontent.com/netlify/next-runtime/main/next-on-netlify.png"
+        src="https://raw.githubusercontent.com/netlify/next-runtime/main/demos/default/public/next-on-netlify.png"
         alt="Picture of the author"
         width={500}
         height={500}

package-lock.json

@@ -8,6 +8,7 @@ import type { MiddlewareManifest } from 'next/dist/build/webpack/plugins/middlew
 import type { RouteHas } from 'next/dist/lib/load-custom-routes'
 
 import { getRequiredServerFiles } from './config'
+import { isEnvSet } from './utils'
 
 // This is the format as of [email protected]
 interface EdgeFunctionDefinitionV1 {
@@ -205,7 +206,7 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
   const nextConfig = nextConfigFile.config
   await writeJSON(join(edgeFunctionRoot, 'edge-shared', 'nextConfig.json'), nextConfig)
 
-  if (!process.env.NEXT_DISABLE_EDGE_IMAGES) {
+  if (!process.env.NEXT_DISABLE_EDGE_IMAGES || !isEnvSet('DISABLE_IPX')) {
     console.log(
       'Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.',
     )

packages/runtime/src/helpers/edge.ts

@@ -228,4 +228,7 @@ export const getRemotePatterns = (experimental: ExperimentalConfigWithLegacy, im
   }
   return []
 }
+
+export const isEnvSet = (envVar: string) => process.env[envVar] === 'true' || process.env[envVar] === '1'
+
 /* eslint-enable max-lines */

packages/runtime/src/helpers/utils.ts

@@ -25,7 +25,13 @@ import {
 import { moveStaticPages, movePublicFiles, patchNextFiles } from './helpers/files'
 import { generateFunctions, setupImageFunction, generatePagesResolver } from './helpers/functions'
 import { generateRedirects, generateStaticRedirects } from './helpers/redirects'
-import { shouldSkip, isNextAuthInstalled, getCustomImageResponseHeaders, getRemotePatterns } from './helpers/utils'
+import {
+  shouldSkip,
+  isNextAuthInstalled,
+  getCustomImageResponseHeaders,
+  getRemotePatterns,
+  isEnvSet,
+} from './helpers/utils'
 import {
   verifyNetlifyBuildVersion,
   checkNextSiteHasBuilt,
@@ -64,6 +70,7 @@ const plugin: NetlifyPlugin = {
     netlifyConfig.build.environment.NEXT_PRIVATE_TARGET = 'server'
   },
 
+  // eslint-disable-next-line max-lines-per-function
   async onBuild({
     constants,
     netlifyConfig,
@@ -163,14 +170,16 @@ const plugin: NetlifyPlugin = {
       nextConfig: { basePath, i18n },
     })
 
-    await setupImageFunction({
-      constants,
-      imageconfig: images,
-      netlifyConfig,
-      basePath,
-      remotePatterns: getRemotePatterns(experimental, images),
-      responseHeaders: getCustomImageResponseHeaders(netlifyConfig.headers),
-    })
+    if (!isEnvSet('DISABLE_IPX')) {
+      await setupImageFunction({
+        constants,
+        imageconfig: images,
+        netlifyConfig,
+        basePath,
+        remotePatterns: getRemotePatterns(experimental, images),
+        responseHeaders: getCustomImageResponseHeaders(netlifyConfig.headers),
+      })
+    }
 
     await generateRedirects({
       netlifyConfig,

packages/runtime/src/index.ts

@@ -59,7 +59,8 @@ describe('getRemotePatterns', () => {
       formats: [ 'image/avif', 'image/webp' ],
       dangerouslyAllowSVG: false,
       contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;",
-      unoptimized: false
+      unoptimized: false,
+      remotePatterns: []
     } as ImagesConfig
 
   })

test/helpers/utils.spec.ts

@@ -567,7 +567,7 @@ describe('onBuild()', () => {
     const imageConfigPath = path.join(constants.INTERNAL_FUNCTIONS_SRC, IMAGE_FUNCTION_NAME, 'imageconfig.json')
     const imageConfigJson = await readJson(imageConfigPath)
 
-    expect(imageConfigJson.domains.length).toBe(1)
+    expect(imageConfigJson.domains.length).toBe(2)
     expect(imageConfigJson.remotePatterns.length).toBe(1)
     expect(imageConfigJson.responseHeaders).toStrictEqual({
       'X-Foo': mockHeaderValue,