Merge branch 'main' into mk/canary-demo

Author: ascorbic

.release-please-manifest.json

@@ -1,4 +1,4 @@
 {
-  "packages/runtime": "4.23.4",
+  "packages/runtime": "4.24.0",
   "packages/next": "1.3.1"
 }

README.md

@@ -42,6 +42,14 @@ by targeting the `/_next/image/*` route:
     X-Test = 'foobar'
 ```
 
+## Disabling included image loader
+
+If you wish to disable the use of the image loader which is bundled into the runtime by default, set the `DISABLE_IPX` environment variable to `true`. 
+
+This should only be done if the site is not using `next/image` or is using a different loader (such as Cloudinary or Imgix).
+
+See the [Next.js documentation](https://nextjs.org/docs/api-reference/next/image#built-in-loaders) for image loader 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/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}

package-lock.json

@@ -48,7 +48,7 @@
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-typescript": "^7.16.0",
     "@delucis/if-env": "^1.1.2",
-    "@netlify/build": "^27.20.0",
+    "@netlify/build": "^27.20.1",
     "@netlify/eslint-config-node": "^7.0.0",
     "@testing-library/cypress": "^8.0.1",
     "@types/fs-extra": "^9.0.13",

package.json

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.24.0](https://github.com/netlify/next-runtime/compare/plugin-nextjs-v4.23.4...plugin-nextjs-v4.24.0) (2022-10-03)
+
+
+### Features
+
+* Add ability to disable ipx ([#1653](https://github.com/netlify/next-runtime/issues/1653)) ([ee7ceda](https://github.com/netlify/next-runtime/commit/ee7ceda4ba7b9822188865cac02074b034b761af))
+
 ## [4.23.4](https://github.com/netlify/next-runtime/compare/plugin-nextjs-v4.23.3...plugin-nextjs-v4.23.4) (2022-10-03)
 
 

packages/runtime/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.23.4",
+  "version": "4.24.0",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "lib/index.js",
   "files": [
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@delucis/if-env": "^1.1.2",
-    "@netlify/build": "^27.20.0",
+    "@netlify/build": "^27.20.1",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/merge-stream": "^1.1.2",

packages/runtime/package.json

@@ -1,4 +1,5 @@
 import type { NetlifyConfig } from '@netlify/build'
+import destr from 'destr'
 import { readJSON, writeJSON } from 'fs-extra'
 import type { Header } from 'next/dist/lib/load-custom-routes'
 import type { NextConfigComplete } from 'next/dist/server/config-shared'
@@ -85,10 +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 (!destr(process.env.DISABLE_IPX)) {
+    netlifyConfig.functions._ipx ||= {}
+    netlifyConfig.functions._ipx.node_bundler = 'nft'
+  }
   /* eslint-enable no-underscore-dangle */
+
+  // eslint-disable-next-line @typescript-eslint/no-extra-semi
   ;[HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME].forEach((functionName) => {
     netlifyConfig.functions[functionName] ||= { included_files: [], external_node_modules: [] }
     netlifyConfig.functions[functionName].node_bundler = 'nft'

packages/runtime/src/helpers/config.ts

@@ -238,7 +238,11 @@ export const writeEdgeFunctions = async ({
   await copy(getEdgeTemplatePath('../edge-shared'), join(edgeFunctionRoot, 'edge-shared'))
   await writeJSON(join(edgeFunctionRoot, 'edge-shared', 'nextConfig.json'), nextConfig)
 
-  if (!destr(process.env.NEXT_DISABLE_EDGE_IMAGES) && !destr(process.env.NEXT_DISABLE_NETLIFY_EDGE)) {
+  if (
+    !destr(process.env.NEXT_DISABLE_EDGE_IMAGES) &&
+    !destr(process.env.NEXT_DISABLE_NETLIFY_EDGE) &&
+    !destr(process.env.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

@@ -1,5 +1,6 @@
 import type { NetlifyConfig, NetlifyPluginConstants } from '@netlify/build'
 import bridgeFile from '@vercel/node-bridge'
+import destr from 'destr'
 import { copyFile, ensureDir, writeFile, writeJSON } from 'fs-extra'
 import type { ImageConfigComplete, RemotePattern } from 'next/dist/shared/lib/image-config'
 import { join, relative, resolve } from 'pathe'
@@ -55,7 +56,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 +70,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 (destr(process.env.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 === '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/functions.ts

@@ -228,4 +228,5 @@ export const getRemotePatterns = (experimental: ExperimentalConfigWithLegacy, im
   }
   return []
 }
+
 /* eslint-enable max-lines */