@netlify/plugin-nextjs 4.10.1 → 4.11.2

package/lib/helpers/edge.js

@@ -70,35 +70,30 @@ const writeEdgeFunction = async ({ edgeFunctionDefinition, edgeFunctionRoot, net
  * Writes Edge Functions for the Next middleware
  */
 const writeEdgeFunctions = async (netlifyConfig) => {
-    const middlewareManifest = await (0, exports.loadMiddlewareManifest)(netlifyConfig);
-    if (!middlewareManifest) {
-        console.error("Couldn't find the middleware manifest");
-        return;
-    }
     const manifest = {
         functions: [],
         version: 1,
     };
     const edgeFunctionRoot = (0, path_1.resolve)('.netlify', 'edge-functions');
     await (0, fs_extra_1.emptyDir)(edgeFunctionRoot);
-    await copyEdgeSourceFile({ edgeFunctionDir: edgeFunctionRoot, file: 'ipx.ts' });
-    manifest.functions.push({
-        function: 'ipx',
-        path: '/_next/image*',
-    });
-    for (const middleware of middlewareManifest.sortedMiddleware) {
-        const edgeFunctionDefinition = middlewareManifest.middleware[middleware];
-        const functionDefinition = await writeEdgeFunction({
-            edgeFunctionDefinition,
-            edgeFunctionRoot,
-            netlifyConfig,
+    if (!process.env.NEXT_DISABLE_EDGE_IMAGES) {
+        if (!process.env.NEXT_USE_NETLIFY_EDGE) {
+            console.log('Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.');
+        }
+        await copyEdgeSourceFile({ edgeFunctionDir: edgeFunctionRoot, file: 'ipx.ts' });
+        manifest.functions.push({
+            function: 'ipx',
+            path: '/_next/image*',
         });
-        manifest.functions.push(functionDefinition);
     }
-    // Older versions of the manifest format don't have the functions field
-    // No, the version field was not incremented
-    if (typeof middlewareManifest.functions === 'object') {
-        for (const edgeFunctionDefinition of Object.values(middlewareManifest.functions)) {
+    if (process.env.NEXT_USE_NETLIFY_EDGE) {
+        const middlewareManifest = await (0, exports.loadMiddlewareManifest)(netlifyConfig);
+        if (!middlewareManifest) {
+            console.error("Couldn't find the middleware manifest");
+            return;
+        }
+        for (const middleware of middlewareManifest.sortedMiddleware) {
+            const edgeFunctionDefinition = middlewareManifest.middleware[middleware];
             const functionDefinition = await writeEdgeFunction({
                 edgeFunctionDefinition,
                 edgeFunctionRoot,
@@ -106,6 +101,18 @@ const writeEdgeFunctions = async (netlifyConfig) => {
             });
             manifest.functions.push(functionDefinition);
         }
+        // Older versions of the manifest format don't have the functions field
+        // No, the version field was not incremented
+        if (typeof middlewareManifest.functions === 'object') {
+            for (const edgeFunctionDefinition of Object.values(middlewareManifest.functions)) {
+                const functionDefinition = await writeEdgeFunction({
+                    edgeFunctionDefinition,
+                    edgeFunctionRoot,
+                    netlifyConfig,
+                });
+                manifest.functions.push(functionDefinition);
+            }
+        }
     }
     await (0, fs_extra_1.writeJson)((0, path_1.join)(edgeFunctionRoot, 'manifest.json'), manifest);
 };

package/lib/helpers/functions.js

@@ -52,15 +52,14 @@ const setupImageFunction = async ({ constants: { INTERNAL_FUNCTIONS_SRC, FUNCTIO
     });
     await (0, fs_extra_1.copyFile)((0, pathe_1.join)(__dirname, '..', '..', 'lib', 'templates', 'ipx.js'), (0, pathe_1.join)(functionDirectory, functionName));
     const imagePath = imageconfig.path || '/_next/image';
-    // If we have edge, we use content negotiation instead of the redirect
-    if (!process.env.NEXT_USE_NETLIFY_EDGE) {
-        netlifyConfig.redirects.push({
-            from: `${imagePath}*`,
-            query: { url: ':url', w: ':width', q: ':quality' },
-            to: `${basePath}/${constants_1.IMAGE_FUNCTION_NAME}/w_:width,q_:quality/:url`,
-            status: 301,
-        });
-    }
+    // 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}/${constants_1.IMAGE_FUNCTION_NAME}/w_:width,q_:quality/:url`,
+        status: 301,
+    });
     netlifyConfig.redirects.push({
         from: `${basePath}/${constants_1.IMAGE_FUNCTION_NAME}/*`,
         to: `/.netlify/builders/${constants_1.IMAGE_FUNCTION_NAME}`,

package/lib/index.js

@@ -86,12 +86,13 @@ const plugin = {
             nextConfig: { basePath, i18n, trailingSlash, appDir },
             buildId,
         });
+        // We call this even if we don't have edge functions enabled because we still use it for images
+        await (0, edge_1.writeEdgeFunctions)(netlifyConfig);
         if (process.env.NEXT_USE_NETLIFY_EDGE) {
             console.log((0, outdent_1.outdent) `
         ✨ Deploying to ${(0, chalk_1.greenBright) `Netlify Edge Functions`} ✨
         This feature is in beta. Please share your feedback here: https://ntl.fyi/next-netlify-edge
       `);
-            await (0, edge_1.writeEdgeFunctions)(netlifyConfig);
             await (0, edge_1.updateConfig)(publish);
         }
         const middlewareManifest = await (0, edge_1.loadMiddlewareManifest)(netlifyConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.10.1",
+  "version": "4.11.2",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "lib/index.js",
   "files": [
@@ -10,7 +10,7 @@
   ],
   "dependencies": {
     "@netlify/functions": "^1.0.0",
-    "@netlify/ipx": "^1.1.2",
+    "@netlify/ipx": "^1.1.3",
     "@vercel/node-bridge": "^2.1.0",
     "chalk": "^4.1.2",
     "fs-extra": "^10.0.0",
@@ -22,13 +22,13 @@
     "p-limit": "^3.1.0",
     "pathe": "^0.2.0",
     "pretty-bytes": "^5.6.0",
-    "semver": "^7.3.5",
     "slash": "^3.0.0",
+    "semver": "^7.3.5",
     "tiny-glob": "^0.2.9"
   },
   "devDependencies": {
     "@delucis/if-env": "^1.1.2",
-    "@netlify/build": "^27.3.1",
+    "@netlify/build": "^27.3.3",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.25",

package/src/templates/edge/ipx.ts

@@ -1,32 +1,57 @@
-import { Accepts } from 'https://deno.land/x/accepts/mod.ts'
-import type { Context } from 'netlify:edge'
+import { Accepts } from "https://deno.land/x/accepts@2.1.1/mod.ts";
+import type { Context } from "netlify:edge";
+// Available at build time
+import imageconfig from "../functions-internal/_ipx/imageconfig.json" assert {
+  type: "json",
+};
+
+const defaultFormat = "webp"
+
+interface ImageConfig extends Record<string, unknown> {
+  formats?: string[];
+}
 
 /**
  * Implement content negotiation for images
  */
 
+// deno-lint-ignore require-await
 const handler = async (req: Request, context: Context) => {
-  const { searchParams } = new URL(req.url)
-  const accept = new Accepts(req.headers)
-  const type = accept.types(['avif', 'webp'])
+  const { searchParams } = new URL(req.url);
+  const accept = new Accepts(req.headers);
+  const { formats = [defaultFormat] } = imageconfig as ImageConfig;
+  if (formats.length === 0) {
+    formats.push(defaultFormat);
+  }
+  let type = accept.types(formats) || defaultFormat;
+  if(Array.isArray(type)) {
+    type = type[0];
+  }
+
 
-  const source = searchParams.get('url')
-  const width = searchParams.get('w')
-  const quality = searchParams.get('q') ?? 75
+  const source = searchParams.get("url");
+  const width = searchParams.get("w");
+  const quality = searchParams.get("q") ?? 75;
 
   if (!source || !width) {
-    return new Response('Invalid request', {
+    return new Response("Invalid request", {
       status: 400,
-    })
+    });
   }
 
-  const modifiers = [`w_${width}`, `q_${quality}`]
+  const modifiers = [`w_${width}`, `q_${quality}`];
 
   if (type) {
-    modifiers.push(`f_${type}`)
+    if(type.includes('/')) {
+      // If this is a mimetype, strip "image/"
+      type = type.split('/')[1];
+    }
+    modifiers.push(`f_${type}`);
   }
+  const target = `/_ipx/${modifiers.join(",")}/${encodeURIComponent(source)}`;
+  return context.rewrite(
+    target,
+  );
+};
 
-  return context.rewrite(`/_ipx/${modifiers.join(',')}/${encodeURIComponent(source)}`)
-}
-
-export default handler
+export default handler;