feat: Add ability to disable ipx

README.md

@@ -42,6 +42,12 @@ by targeting the `/_next/image/*` route:
     X-Test = 'foobar'
 ```
 
+## Disabling `ipx`
+
+If you wish to disable the use of the `ipx` package, set the `DISABLE_IPX` environment variable to `true`. Please note that some requests to `/_next/image/*` may fail unless an image loader, such as Cloudinary or Imgix, is specified as a replacement for `ipx`. 
+
+See the [Next.js documentation](https://nextjs.org/docs/api-reference/next/image#built-in-loaders) for options.
+
 ## Next.js Middleware on Netlify
 
 Next.js Middleware works out of the box on Netlify. By default, middleware runs using Netlify Edge Functions. For legacy

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/netlify.toml

@@ -18,9 +18,6 @@ NODE_VERSION = "16.15.1"
     Strict-Transport-Security = "max-age=31536000"
     X-Test = 'foobar'
 
-[dev]
-framework = "#static"
-
 [[plugins]]
 package = "../plugin-wrapper/"
 

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: false,
-    images: {
-      remotePatterns: [
-        {
-          hostname: '*.imgur.com',
-        },
-      ],
-    },
-  },
+  }
 }

demos/default/package.json

@@ -35,4 +35,4 @@
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.3"
   }
-}
+}

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}

packages/runtime/src/helpers/config.ts

@@ -8,6 +8,7 @@ import slash from 'slash'
 import { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME } from '../constants'
 
 import type { RoutesManifest } from './types'
+import { isEnvSet } from './utils'
 
 const ROUTES_MANIFEST_FILE = 'routes-manifest.json'
 
@@ -85,11 +86,13 @@ export const configureHandlerFunctions = async ({ netlifyConfig, publish, ignore
   const cssFilesToInclude = files.filter((f) => f.startsWith(`${publish}/static/css/`))
 
   /* eslint-disable no-underscore-dangle */
-  netlifyConfig.functions._ipx ||= {}
-  netlifyConfig.functions._ipx.node_bundler = 'nft'
+  if (!isEnvSet('DISABLE_IPX')) {
+    netlifyConfig.functions._ipx ||= {}
+    netlifyConfig.functions._ipx.node_bundler = 'nft'
+  }
 
   /* eslint-enable no-underscore-dangle */
-  ;[HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME].forEach((functionName) => {
+  [HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME].forEach((functionName) => {
     netlifyConfig.functions[functionName] ||= { included_files: [], external_node_modules: [] }
     netlifyConfig.functions[functionName].node_bundler = 'nft'
     netlifyConfig.functions[functionName].included_files ||= []

packages/runtime/src/helpers/edge.ts

@@ -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/functions.ts

@@ -8,6 +8,8 @@ import { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, IMAGE_FUNCTION_NAME, DEFAULT_
 import { getHandler } from '../templates/getHandler'
 import { getPageResolver } from '../templates/getPageResolver'
 
+import { isEnvSet } from './utils'
+
 export const generateFunctions = async (
   { FUNCTIONS_SRC = DEFAULT_FUNCTIONS_SRC, INTERNAL_FUNCTIONS_SRC, PUBLISH_DIR }: NetlifyPluginConstants,
   appDir: string,
@@ -55,7 +57,7 @@ export const generatePagesResolver = async ({
 
 // Move our next/image function into the correct functions directory
 export const setupImageFunction = async ({
-  constants: { INTERNAL_FUNCTIONS_SRC, FUNCTIONS_SRC = DEFAULT_FUNCTIONS_SRC },
+  constants: { INTERNAL_FUNCTIONS_SRC, FUNCTIONS_SRC = DEFAULT_FUNCTIONS_SRC, IS_LOCAL },
   imageconfig = {},
   netlifyConfig,
   basePath,
@@ -69,35 +71,50 @@ export const setupImageFunction = async ({
   remotePatterns: RemotePattern[]
   responseHeaders?: Record<string, string>
 }): Promise<void> => {
-  const functionsPath = INTERNAL_FUNCTIONS_SRC || FUNCTIONS_SRC
-  const functionName = `${IMAGE_FUNCTION_NAME}.js`
-  const functionDirectory = join(functionsPath, IMAGE_FUNCTION_NAME)
+  const imagePath = imageconfig.path || '/_next/image'
 
-  await ensureDir(functionDirectory)
-  await writeJSON(join(functionDirectory, 'imageconfig.json'), {
-    ...imageconfig,
-    basePath: [basePath, IMAGE_FUNCTION_NAME].join('/'),
-    remotePatterns,
-    responseHeaders,
-  })
-  await copyFile(join(__dirname, '..', '..', 'lib', 'templates', 'ipx.js'), join(functionDirectory, functionName))
+  if (isEnvSet('DISABLE_IPX')) {
+    // If no image loader is specified, need to redirect to a 404 page since there's no
+    // backing loader to serve local site images once deployed to Netlify
+    if (!IS_LOCAL && imageconfig.loader && imageconfig.loader === 'default') {
+      netlifyConfig.redirects.push({
+        from: `${imagePath}*`,
+        query: { url: ':url', w: ':width', q: ':quality' },
+        to: '/404.html',
+        status: 404,
+        force: true,
+      })
+    }
+  } else {
+    const functionsPath = INTERNAL_FUNCTIONS_SRC || FUNCTIONS_SRC
+    const functionName = `${IMAGE_FUNCTION_NAME}.js`
+    const functionDirectory = join(functionsPath, IMAGE_FUNCTION_NAME)
 
-  const imagePath = imageconfig.path || '/_next/image'
+    await ensureDir(functionDirectory)
+    await writeJSON(join(functionDirectory, 'imageconfig.json'), {
+      ...imageconfig,
+      basePath: [basePath, IMAGE_FUNCTION_NAME].join('/'),
+      remotePatterns,
+      responseHeaders,
+    })
 
-  // If we have edge functions then the request will have already been rewritten
-  // so this won't match. This is matched if edge is disabled or unavailable.
-  netlifyConfig.redirects.push({
-    from: `${imagePath}*`,
-    query: { url: ':url', w: ':width', q: ':quality' },
-    to: `${basePath}/${IMAGE_FUNCTION_NAME}/w_:width,q_:quality/:url`,
-    status: 301,
-  })
+    await copyFile(join(__dirname, '..', '..', 'lib', 'templates', 'ipx.js'), join(functionDirectory, functionName))
 
-  netlifyConfig.redirects.push({
-    from: `${basePath}/${IMAGE_FUNCTION_NAME}/*`,
-    to: `/.netlify/builders/${IMAGE_FUNCTION_NAME}`,
-    status: 200,
-  })
+    // If we have edge functions then the request will have already been rewritten
+    // so this won't match. This is matched if edge is disabled or unavailable.
+    netlifyConfig.redirects.push({
+      from: `${imagePath}*`,
+      query: { url: ':url', w: ':width', q: ':quality' },
+      to: `${basePath}/${IMAGE_FUNCTION_NAME}/w_:width,q_:quality/:url`,
+      status: 301,
+    })
+
+    netlifyConfig.redirects.push({
+      from: `${basePath}/${IMAGE_FUNCTION_NAME}/*`,
+      to: `/.netlify/builders/${IMAGE_FUNCTION_NAME}`,
+      status: 200,
+    })
+  }
 
   if (basePath) {
     // next/image generates image static URLs that still point at the site root

packages/runtime/src/helpers/utils.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 */

test/helpers/utils.spec.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/index.js

@@ -565,12 +565,40 @@ 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,
     })
   })
+
+  test('generates an ipx function by default', async () => {
+    await moveNextDist()
+    await nextRuntime.onBuild(defaultArgs)
+    expect(existsSync(path.join('.netlify', 'functions-internal', '_ipx', '_ipx.js'))).toBeTruthy()
+  })
+
+  test('does not generate an ipx function when DISABLE_IPX is set', async () => {
+    process.env.DISABLE_IPX = '1'
+    await moveNextDist()
+    await nextRuntime.onBuild(defaultArgs)
+    expect(existsSync(path.join('.netlify', 'functions-internal', '_ipx', '_ipx.js'))).toBeFalsy()
+    delete process.env.DISABLE_IPX
+  })
+
+  test('creates 404 redirect when DISABLE_IPX is set', async () => {
+    process.env.DISABLE_IPX = '1'
+    await moveNextDist()
+    await nextRuntime.onBuild(defaultArgs)
+    const nextImageRedirect = netlifyConfig.redirects.find(redirect => redirect.from.includes('/_next/image'))
+
+    expect(nextImageRedirect).toBeDefined()
+    expect(nextImageRedirect.to).toEqual("/404.html")
+    expect(nextImageRedirect.status).toEqual(404)
+    expect(nextImageRedirect.force).toEqual(true)
+
+    delete process.env.DISABLE_IPX
+  })
 })
 
 describe('onPostBuild', () => {