@netlify/plugin-nextjs 4.30.4-ipx-layer.0 → 4.31.0

package/lib/helpers/edge.js

@@ -14,7 +14,7 @@ const config_1 = require("./config");
 const matchers_1 = require("./matchers");
 const maybeLoadJson = (path) => {
     if ((0, fs_1.existsSync)(path)) {
-        return (0, fs_extra_1.readJson)(path);
+        return (0, fs_extra_1.readJSON)(path);
     }
 };
 const isAppDirRoute = (route, appPathRoutesManifest) => Boolean(appPathRoutesManifest) && Object.values(appPathRoutesManifest).includes(route);
@@ -29,53 +29,6 @@ exports.loadPrerenderManifest = loadPrerenderManifest;
  * Convert the Next middleware name into a valid Edge Function name
  */
 const sanitizeName = (name) => `next_${name.replace(/\W/g, '_')}`;
-/**
- * Initialization added to the top of the edge function bundle
- */
-const preamble = /* js */ `
-import {
-  decode as _base64Decode,
-} from "https://deno.land/std@0.159.0/encoding/base64.ts";
-// Deno defines "window", but naughty libraries think this means it's a browser
-delete globalThis.window
-globalThis.process = { env: {...Deno.env.toObject(), NEXT_RUNTIME: 'edge', 'NEXT_PRIVATE_MINIMAL_MODE': '1' } }
-globalThis.EdgeRuntime = "netlify-edge"
-let _ENTRIES = {}
-
-// Next.js uses this extension to the Headers API implemented by Cloudflare workerd
-if(!('getAll' in Headers.prototype)) {
-  Headers.prototype.getAll = function getAll(name) {
-    name = name.toLowerCase();
-    if (name !== "set-cookie") {
-      throw new Error("Headers.getAll is only supported for Set-Cookie");
-    }
-    return [...this.entries()]
-      .filter(([key]) => key === name)
-      .map(([, value]) => value);
-  };
-}
-//  Next uses blob: urls to refer to local assets, so we need to intercept these
-const _fetch = globalThis.fetch
-const fetch = async (url, init) => {
-  try {
-    if (typeof url === 'object' && url.href?.startsWith('blob:')) {
-      const key = url.href.slice(5)
-      if (key in _ASSETS) {
-        return new Response(_base64Decode(_ASSETS[key]))
-      }
-    }
-    return await _fetch(url, init)
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
-}
-
-// Next edge runtime uses "self" as a function-scoped global-like object, but some of the older polyfills expect it to equal globalThis
-// See https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills
-const self = { ...globalThis, fetch }
-
-`;
 // Slightly different spacing in different versions!
 const IMPORT_UNSUPPORTED = [
     `Object.defineProperty(globalThis,"__import_unsupported"`,
@@ -86,7 +39,8 @@ const IMPORT_UNSUPPORTED = [
  */
 const getMiddlewareBundle = async ({ edgeFunctionDefinition, netlifyConfig, }) => {
     const { publish } = netlifyConfig.build;
-    const chunks = [preamble];
+    const shims = await fs_1.promises.readFile(getEdgeTemplatePath('shims.js'), 'utf8');
+    const chunks = [shims];
     chunks.push(`export const _DEFINITION = ${JSON.stringify(edgeFunctionDefinition)}`);
     if ('wasm' in edgeFunctionDefinition) {
         for (const { name, filePath } of edgeFunctionDefinition.wasm) {
@@ -234,7 +188,6 @@ const writeEdgeFunctions = async ({ netlifyConfig, routesManifest, }) => {
     var _a;
     const manifest = {
         functions: [],
-        layers: [],
         version: 1,
     };
     const edgeFunctionRoot = (0, path_1.resolve)('.netlify', 'edge-functions');
@@ -246,105 +199,108 @@ const writeEdgeFunctions = async ({ netlifyConfig, routesManifest, }) => {
     await (0, fs_extra_1.copy)(getEdgeTemplatePath('../edge-shared'), (0, path_1.join)(edgeFunctionRoot, 'edge-shared'));
     await (0, fs_extra_1.writeJSON)((0, path_1.join)(edgeFunctionRoot, 'edge-shared', 'nextConfig.json'), nextConfig);
     await (0, fs_extra_1.copy)((0, path_1.join)(publish, 'prerender-manifest.json'), (0, path_1.join)(edgeFunctionRoot, 'edge-shared', 'prerender-manifest.json'));
-    if (!(0, destr_1.default)(process.env.NEXT_DISABLE_EDGE_IMAGES) &&
-        !(0, destr_1.default)(process.env.NEXT_DISABLE_NETLIFY_EDGE) &&
-        !(0, destr_1.default)(process.env.DISABLE_IPX)) {
-        console.log('Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.');
-        const edgeFunctionDir = (0, path_1.join)(edgeFunctionRoot, 'ipx');
-        await (0, fs_extra_1.ensureDir)(edgeFunctionDir);
-        await copyEdgeSourceFile({ edgeFunctionDir, file: 'ipx.ts', target: 'index.ts' });
-        await (0, fs_extra_1.copyFile)((0, path_1.join)('.netlify', 'functions-internal', '_ipx', 'imageconfig.json'), (0, path_1.join)(edgeFunctionDir, 'imageconfig.json'));
-        manifest.functions.push({
-            function: 'ipx',
-            name: 'next/image handler',
-            path: nextConfig.images.path || '/_next/image',
+    // early return if edge is disabled
+    if ((0, destr_1.default)(process.env.NEXT_DISABLE_NETLIFY_EDGE)) {
+        console.log('Environment variable NEXT_DISABLE_NETLIFY_EDGE has been set, skipping Netlify Edge Function creation.');
+        return;
+    }
+    const rscFunctions = await (0, exports.writeRscDataEdgeFunction)({
+        prerenderManifest: await (0, exports.loadPrerenderManifest)(netlifyConfig),
+        appPathRoutesManifest: await (0, exports.loadAppPathRoutesManifest)(netlifyConfig),
+    });
+    manifest.functions.push(...rscFunctions);
+    const middlewareManifest = await (0, exports.loadMiddlewareManifest)(netlifyConfig);
+    if (!middlewareManifest) {
+        console.error("Couldn't find the middleware manifest");
+        return;
+    }
+    let usesEdge = false;
+    for (const middleware of middlewareManifest.sortedMiddleware) {
+        usesEdge = true;
+        const edgeFunctionDefinition = middlewareManifest.middleware[middleware];
+        const functionName = sanitizeName(edgeFunctionDefinition.name);
+        const matchers = generateEdgeFunctionMiddlewareMatchers({
+            edgeFunctionDefinition,
+            edgeFunctionRoot,
+            nextConfig,
         });
-        manifest.layers.push({
-            name: 'https://ipx-edge-function-layer.netlify.app/mod.ts',
-            flag: 'ipx-edge-function-layer-url',
+        await writeEdgeFunction({
+            edgeFunctionDefinition,
+            edgeFunctionRoot,
+            netlifyConfig,
+            functionName,
+            matchers,
+            middleware: true,
         });
+        manifest.functions.push(...matchers.map((matcher) => middlewareMatcherToEdgeFunctionDefinition(matcher, functionName)));
     }
-    if (!(0, destr_1.default)(process.env.NEXT_DISABLE_NETLIFY_EDGE)) {
-        const rscFunctions = await (0, exports.writeRscDataEdgeFunction)({
-            prerenderManifest: await (0, exports.loadPrerenderManifest)(netlifyConfig),
-            appPathRoutesManifest: await (0, exports.loadAppPathRoutesManifest)(netlifyConfig),
-        });
-        manifest.functions.push(...rscFunctions);
-        const middlewareManifest = await (0, exports.loadMiddlewareManifest)(netlifyConfig);
-        if (!middlewareManifest) {
-            console.error("Couldn't find the middleware manifest");
-            return;
-        }
-        let usesEdge = false;
-        for (const middleware of middlewareManifest.sortedMiddleware) {
+    // Functions (i.e. not middleware, but edge SSR and API routes)
+    if (typeof middlewareManifest.functions === 'object') {
+        // When using the app dir, we also need to check if the EF matches a page
+        const appPathRoutesManifest = await (0, exports.loadAppPathRoutesManifest)(netlifyConfig);
+        // A map of all route pages to their page regex. This is used for pages dir and appDir.
+        const pageRegexMap = new Map([...(routesManifest.dynamicRoutes || []), ...(routesManifest.staticRoutes || [])].map((route) => [
+            route.page,
+            route.regex,
+        ]));
+        // Create a map of pages-dir routes to their data route regex (appDir uses the same route as the HTML)
+        const dataRoutesMap = new Map([...(routesManifest.dataRoutes || [])].map((route) => [route.page, route.dataRouteRegex]));
+        for (const edgeFunctionDefinition of Object.values(middlewareManifest.functions)) {
             usesEdge = true;
-            const edgeFunctionDefinition = middlewareManifest.middleware[middleware];
             const functionName = sanitizeName(edgeFunctionDefinition.name);
-            const matchers = generateEdgeFunctionMiddlewareMatchers({
-                edgeFunctionDefinition,
-                edgeFunctionRoot,
-                nextConfig,
-            });
             await writeEdgeFunction({
                 edgeFunctionDefinition,
                 edgeFunctionRoot,
                 netlifyConfig,
                 functionName,
-                matchers,
-                middleware: true,
             });
-            manifest.functions.push(...matchers.map((matcher) => middlewareMatcherToEdgeFunctionDefinition(matcher, functionName)));
-        }
-        // Functions (i.e. not middleware, but edge SSR and API routes)
-        if (typeof middlewareManifest.functions === 'object') {
-            // When using the app dir, we also need to check if the EF matches a page
-            const appPathRoutesManifest = await (0, exports.loadAppPathRoutesManifest)(netlifyConfig);
-            // A map of all route pages to their page regex. This is used for pages dir and appDir.
-            const pageRegexMap = new Map([...(routesManifest.dynamicRoutes || []), ...(routesManifest.staticRoutes || [])].map((route) => [
-                route.page,
-                route.regex,
-            ]));
-            // Create a map of pages-dir routes to their data route regex (appDir uses the same route as the HTML)
-            const dataRoutesMap = new Map([...(routesManifest.dataRoutes || [])].map((route) => [route.page, route.dataRouteRegex]));
-            for (const edgeFunctionDefinition of Object.values(middlewareManifest.functions)) {
-                usesEdge = true;
-                const functionName = sanitizeName(edgeFunctionDefinition.name);
-                await writeEdgeFunction({
-                    edgeFunctionDefinition,
-                    edgeFunctionRoot,
-                    netlifyConfig,
-                    functionName,
-                });
-                const pattern = (0, exports.getEdgeFunctionPatternForPage)({
-                    edgeFunctionDefinition,
-                    pageRegexMap,
-                    appPathRoutesManifest,
-                });
+            const pattern = (0, exports.getEdgeFunctionPatternForPage)({
+                edgeFunctionDefinition,
+                pageRegexMap,
+                appPathRoutesManifest,
+            });
+            manifest.functions.push({
+                function: functionName,
+                name: edgeFunctionDefinition.name,
+                pattern,
+                // cache: "manual" is currently experimental, so we restrict it to sites that use experimental appDir
+                cache: usesAppDir ? 'manual' : undefined,
+            });
+            // pages-dir page routes also have a data route. If there's a match, add an entry mapping that to the function too
+            const dataRoute = dataRoutesMap.get(edgeFunctionDefinition.page);
+            if (dataRoute) {
                 manifest.functions.push({
                     function: functionName,
                     name: edgeFunctionDefinition.name,
-                    pattern,
-                    // cache: "manual" is currently experimental, so we restrict it to sites that use experimental appDir
+                    pattern: dataRoute,
                     cache: usesAppDir ? 'manual' : undefined,
                 });
-                // pages-dir page routes also have a data route. If there's a match, add an entry mapping that to the function too
-                const dataRoute = dataRoutesMap.get(edgeFunctionDefinition.page);
-                if (dataRoute) {
-                    manifest.functions.push({
-                        function: functionName,
-                        name: edgeFunctionDefinition.name,
-                        pattern: dataRoute,
-                        cache: usesAppDir ? 'manual' : undefined,
-                    });
-                }
             }
         }
-        if (usesEdge) {
-            console.log((0, outdent_1.outdent) `
-        ✨ Deploying middleware and functions to ${(0, chalk_1.greenBright) `Netlify Edge Functions`} ✨
-        This feature is in beta. Please share your feedback here: https://ntl.fyi/next-netlify-edge
-      `);
-        }
+    }
+    if ((0, destr_1.default)(process.env.NEXT_FORCE_EDGE_IMAGES) &&
+        !(0, destr_1.default)(process.env.NEXT_DISABLE_EDGE_IMAGES) &&
+        !(0, destr_1.default)(process.env.DISABLE_IPX)) {
+        usesEdge = true;
+        console.log('Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.');
+        const edgeFunctionDir = (0, path_1.join)(edgeFunctionRoot, 'ipx');
+        await (0, fs_extra_1.ensureDir)(edgeFunctionDir);
+        await copyEdgeSourceFile({ edgeFunctionDir, file: 'ipx.ts', target: 'index.ts' });
+        await (0, fs_extra_1.copyFile)((0, path_1.join)('.netlify', 'functions-internal', '_ipx', 'imageconfig.json'), (0, path_1.join)(edgeFunctionDir, 'imageconfig.json'));
+        manifest.functions.push({
+            function: 'ipx',
+            name: 'next/image handler',
+            path: '/_next/image*',
+        });
+    }
+    else {
+        console.log('You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.');
+    }
+    if (usesEdge) {
+        console.log((0, outdent_1.outdent) `
+      ✨ Deploying middleware and functions 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, fs_extra_1.writeJson)((0, path_1.join)(edgeFunctionRoot, 'manifest.json'), manifest);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.30.4-ipx-layer.0",
+  "version": "4.31.0",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "index.js",
   "files": [
@@ -36,12 +36,12 @@
   },
   "devDependencies": {
     "@delucis/if-env": "^1.1.2",
-    "@netlify/build": "^29.5.2",
+    "@netlify/build": "^29.6.4",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/merge-stream": "^1.1.2",
     "@types/node": "^17.0.25",
-    "next": "^13.0.7",
+    "next": "^13.1.6",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.3"
   },

package/src/templates/edge/ipx.ts

@@ -1,5 +1,73 @@
-import { getHandler } from 'https://ipx-edge-function-layer.netlify.app/mod.ts'
-
+import { Accepts } from 'https://deno.land/x/accepts@2.1.1/mod.ts'
+import type { Context } from 'https://edge.netlify.com'
+// Available at build time
 import imageconfig from './imageconfig.json' assert { type: 'json' }
 
-export default getHandler({ formats: imageconfig?.formats })
+const defaultFormat = 'webp'
+
+interface ImageConfig extends Record<string, unknown> {
+  formats?: string[]
+}
+
+// Checks if a URL param is numeric
+const isNumeric = (value: string | null) => Number(value).toString() === value
+
+/**
+ * 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 { 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 errors: Array<string> = []
+
+  if (!source) {
+    errors.push('Missing "url" parameter')
+  } else if (!source.startsWith('http') && !source.startsWith('/')) {
+    errors.push('The "url" parameter must be a valid URL or path')
+  }
+
+  if (!width) {
+    errors.push('Missing "w" parameter')
+  } else if (!isNumeric(width)) {
+    errors.push('Invalid "w" parameter')
+  }
+
+  if (!isNumeric(quality)) {
+    errors.push('Invalid "q" parameter')
+  }
+
+  if (!source || errors.length > 0) {
+    return new Response(`Invalid request: \n${errors.join('\n')}`, {
+      status: 400,
+    })
+  }
+
+  const modifiers = [`w_${width}`, `q_${quality}`]
+
+  if (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)
+}
+
+export default handler

package/src/templates/edge/shims.js

@@ -0,0 +1,53 @@
+// @ts-check
+// deno-lint-ignore-file no-var prefer-const no-unused-vars no-explicit-any
+import { decode as _base64Decode } from 'https://deno.land/std@0.175.0/encoding/base64.ts'
+import { AsyncLocalStorage as ALSCompat } from 'https://deno.land/std@0.175.0/node/async_hooks.ts'
+
+/**
+ * These are the shims, polyfills and other kludges to make Next.js work in standards-compliant runtime.
+ * This file isn't imported, but is instead inlined along with other chunks into the edge bundle.
+ */
+
+// Deno defines "window", but naughty libraries think this means it's a browser
+// @ts-ignore
+delete globalThis.window
+globalThis.process = {
+  env: { ...Deno.env.toObject(), NEXT_RUNTIME: 'edge', NEXT_PRIVATE_MINIMAL_MODE: '1' },
+}
+globalThis.EdgeRuntime = 'netlify-edge'
+let _ENTRIES = {}
+
+// Next.js expects this as a global
+globalThis.AsyncLocalStorage = ALSCompat
+
+// Next.js uses this extension to the Headers API implemented by Cloudflare workerd
+if (!('getAll' in Headers.prototype)) {
+  // @ts-ignore
+  Headers.prototype.getAll = function getAll(name) {
+    name = name.toLowerCase()
+    if (name !== 'set-cookie') {
+      throw new Error('Headers.getAll is only supported for Set-Cookie')
+    }
+    return [...this.entries()].filter(([key]) => key === name).map(([, value]) => value)
+  }
+}
+//  Next uses blob: urls to refer to local assets, so we need to intercept these
+const _fetch = globalThis.fetch
+const fetch /* type {typeof globalThis.fetch} */ = async (url, init) => {
+  try {
+    if (url instanceof URL && url.href?.startsWith('blob:')) {
+      const key = url.href.slice(5)
+      if (key in _ASSETS) {
+        return new Response(_base64Decode(_ASSETS[key]))
+      }
+    }
+    return await _fetch(url, init)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+// Next edge runtime uses "self" as a function-scoped global-like object, but some of the older polyfills expect it to equal globalThis
+// See https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills
+const self = { ...globalThis, fetch }

package/src/templates/edge/imageconfig.json

@@ -1,3 +0,0 @@
-{
-  "formats": ["webp"]
-}