Merge branch 'main' into mk/middleware-package

Author: kodiakhq[bot]

README.md

@@ -53,6 +53,19 @@ In order to deliver the correct format to a visitor's browser, this uses a Netli
 site may not support Edge Functions, in which case it will instead fall back to delivering the original file format. You
 may also manually disable the Edge Function by setting the environment variable `NEXT_DISABLE_EDGE_IMAGES` to `true`.
 
+## Returning custom response headers on images handled by `ipx`
+
+Should you wish to return custom response headers on images handled by the [`netlify-ipx`](https://github.com/netlify/netlify-ipx) package, you can add them within your project's `netlify.toml` by targeting the `/_next/image/*` route:
+
+```
+[[headers]]
+  for = "/_next/image/*"
+  
+  [headers.values]
+    Strict-Transport-Security = "max-age=31536000"
+    X-Test = 'foobar'
+```
+
 ## Next.js Middleware on Netlify
 
 Next.js Middleware works out of the box on Netlify, but check out the

demos/default/netlify.toml

@@ -11,6 +11,13 @@ CYPRESS_CACHE_FOLDER = "../node_modules/.CypressBinary"
 TERM = "xterm"
 NODE_VERSION = "16.15.1"
 
+[[headers]]
+  for = "/_next/image/*"
+  
+  [headers.values]
+    Strict-Transport-Security = "max-age=31536000"
+    X-Test = 'foobar'
+
 [dev]
 framework = "#static"
 

package-lock.json

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

package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@delucis/if-env": "^1.1.2",
-    "@netlify/build": "^27.11.3",
+    "@netlify/build": "^27.11.4",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.25",
@@ -62,4 +62,4 @@
   "engines": {
     "node": ">=12.0.0"
   }
-}
+}

packages/runtime/package.json

@@ -60,12 +60,14 @@ export const setupImageFunction = async ({
   netlifyConfig,
   basePath,
   remotePatterns,
+  responseHeaders,
 }: {
   constants: NetlifyPluginConstants
   netlifyConfig: NetlifyConfig
   basePath: string
   imageconfig: Partial<ImageConfigComplete>
   remotePatterns: RemotePattern[]
+  responseHeaders?: Record<string, string>
 }): Promise<void> => {
   const functionsPath = INTERNAL_FUNCTIONS_SRC || FUNCTIONS_SRC
   const functionName = `${IMAGE_FUNCTION_NAME}.js`
@@ -76,6 +78,7 @@ export const setupImageFunction = async ({
     ...imageconfig,
     basePath: [basePath, IMAGE_FUNCTION_NAME].join('/'),
     remotePatterns,
+    responseHeaders,
   })
   await copyFile(join(__dirname, '..', '..', 'lib', 'templates', 'ipx.js'), join(functionDirectory, functionName))