refactor: serve 404 when ipx is disabled and no custom loader is specified

Author: ericapisani

README.md

@@ -44,7 +44,9 @@ by targeting the `/_next/image/*` route:
 
 ## Disabling `ipx`
 
-If you wish to disable the use of the `ipx` package, set the `DISABLE_IPX` environment variable to `true`.
+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
 

demos/default/package.json

@@ -22,8 +22,7 @@
     "@reach/visually-hidden": "^0.16.0",
     "next": "^12.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sharp": "^0.31.1"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@netlify/plugin-nextjs": "*",

package-lock.json

@@ -78,9 +78,7 @@ const resolveModuleRoot = (moduleName) => {
   }
 }
 
-const configureDefaultExcludedModules = () => (isEnvSet('DISABLE_IPX') ? ['electron'] : ['sharp', 'electron'])
-
-const DEFAULT_EXCLUDED_MODULES = configureDefaultExcludedModules()
+const DEFAULT_EXCLUDED_MODULES = ['sharp', 'electron']
 
 export const configureHandlerFunctions = async ({ netlifyConfig, publish, ignore = [] }) => {
   const config = await getRequiredServerFiles(publish)

packages/runtime/src/helpers/config.ts

@@ -71,7 +71,21 @@ export const setupImageFunction = async ({
   remotePatterns: RemotePattern[]
   responseHeaders?: Record<string, string>
 }): Promise<void> => {
-  if (!isEnvSet('DISABLE_IPX')) {
+  const imagePath = imageconfig.path || '/_next/image'
+  
+  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
+    if (!imageconfig.loader) {
+      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)
@@ -86,8 +100,6 @@ export const setupImageFunction = async ({
 
     await copyFile(join(__dirname, '..', '..', 'lib', 'templates', 'ipx.js'), join(functionDirectory, functionName))
 
-    const imagePath = imageconfig.path || '/_next/image'
-
     // 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({