@netlify/plugin-nextjs 4.13.0 → 4.14.1

package/lib/helpers/files.js

@@ -270,13 +270,21 @@ const baseServerReplacements = [
 ];
 const nextServerReplacements = [
     [
-        `getMiddlewareManifest() {\n        if (!this.minimalMode) {`,
-        `getMiddlewareManifest() {\n        if (!this.minimalMode && !process.env.NEXT_USE_NETLIFY_EDGE) {`,
+        `getMiddlewareManifest() {\n        if (this.minimalMode) return null;`,
+        `getMiddlewareManifest() {\n        if (this.minimalMode || process.env.NEXT_USE_NETLIFY_EDGE) return null;`,
+    ],
+    [
+        `generateCatchAllMiddlewareRoute(devReady) {\n        if (this.minimalMode) return []`,
+        `generateCatchAllMiddlewareRoute(devReady) {\n        if (this.minimalMode || process.env.NEXT_USE_NETLIFY_EDGE) return [];`,
     ],
     [
         `generateCatchAllMiddlewareRoute() {\n        if (this.minimalMode) return undefined;`,
         `generateCatchAllMiddlewareRoute() {\n        if (this.minimalMode || process.env.NEXT_USE_NETLIFY_EDGE) return undefined;`,
     ],
+    [
+        `getMiddlewareManifest() {\n        if (this.minimalMode) {`,
+        `getMiddlewareManifest() {\n        if (!this.minimalMode && !process.env.NEXT_USE_NETLIFY_EDGE) {`,
+    ],
 ];
 const patchNextFiles = async (root) => {
     const baseServerFile = getServerFile(root);

package/lib/helpers/utils.js

@@ -136,7 +136,7 @@ const findModuleFromBase = ({ paths, candidates }) => {
 exports.findModuleFromBase = findModuleFromBase;
 const isNextAuthInstalled = () => {
     try {
-        // eslint-disable-next-line import/no-unassigned-import, import/no-unresolved, node/no-missing-require
+        // eslint-disable-next-line import/no-unassigned-import, import/no-unresolved, n/no-missing-require
         require('next-auth');
         return true;
     }

package/lib/middleware/html-rewriter.js

@@ -0,0 +1,4 @@
+"use strict";
+/* eslint-disable max-classes-per-file */
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-enable max-classes-per-file */

package/lib/middleware/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./response"), exports);
+__exportStar(require("./request"), exports);
+__exportStar(require("./html-rewriter"), exports);

package/lib/middleware/request.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddlewareRequest = void 0;
+const server_1 = require("next/server");
+const response_1 = require("./response");
+/**
+ * Supercharge your Next middleware with Netlify Edge Functions
+ */
+class MiddlewareRequest extends Request {
+    constructor(nextRequest) {
+        super(nextRequest);
+        this.nextRequest = nextRequest;
+        if (!('Deno' in globalThis)) {
+            throw new Error('MiddlewareRequest only works in a Netlify Edge Function environment');
+        }
+        const requestId = nextRequest.headers.get('x-nf-request-id');
+        if (!requestId) {
+            throw new Error('Missing x-nf-request-id header');
+        }
+        const requestContext = globalThis.NFRequestContextMap.get(requestId);
+        if (!requestContext) {
+            throw new Error(`Could not find request context for request id ${requestId}`);
+        }
+        this.context = requestContext.context;
+        this.originalRequest = requestContext.request;
+    }
+    // Add the headers to the original request, which will be passed to the origin
+    applyHeaders() {
+        this.headers.forEach((value, name) => {
+            this.originalRequest.headers.set(name, value);
+        });
+    }
+    async next() {
+        this.applyHeaders();
+        const response = await this.context.next();
+        return new response_1.MiddlewareResponse(response);
+    }
+    rewrite(destination, init) {
+        if (typeof destination === 'string' && destination.startsWith('/')) {
+            destination = new URL(destination, this.url);
+        }
+        this.applyHeaders();
+        return server_1.NextResponse.rewrite(destination, init);
+    }
+    get headers() {
+        return this.nextRequest.headers;
+    }
+    get cookies() {
+        return this.nextRequest.cookies;
+    }
+    get geo() {
+        return this.nextRequest.geo;
+    }
+    get ip() {
+        return this.nextRequest.ip;
+    }
+    get nextUrl() {
+        return this.nextRequest.url;
+    }
+    get url() {
+        return this.nextRequest.url.toString();
+    }
+}
+exports.MiddlewareRequest = MiddlewareRequest;

package/lib/middleware/response.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddlewareResponse = void 0;
+const server_1 = require("next/server");
+// A NextResponse that wraps the Netlify origin response
+// We can't pass it through directly, because Next disallows returning a response body
+class MiddlewareResponse extends server_1.NextResponse {
+    constructor(originResponse) {
+        super();
+        this.originResponse = originResponse;
+        // These are private in Node when compiling, but we access them in Deno at runtime
+        Object.defineProperty(this, 'dataTransforms', {
+            value: [],
+            enumerable: false,
+            writable: false,
+        });
+        Object.defineProperty(this, 'elementHandlers', {
+            value: [],
+            enumerable: false,
+            writable: false,
+        });
+    }
+    /**
+     * Transform the page props before they are passed to the client.
+     * This works for both HTML pages and JSON data
+     */
+    transformData(transform) {
+        // The transforms are evaluated after the middleware is returned
+        this.dataTransforms.push(transform);
+    }
+    /**
+     * Rewrite the response HTML with the given selector and handlers
+     */
+    rewriteHTML(selector, handlers) {
+        this.elementHandlers.push([selector, handlers]);
+    }
+    /**
+     * Sets the value of a page prop.
+     * @see transformData if you need more control
+     */
+    setPageProp(key, value) {
+        this.transformData((props) => {
+            props.pageProps || (props.pageProps = {});
+            props.pageProps[key] = value;
+            return props;
+        });
+    }
+    /**
+     * Replace the text of the given element. Takes either a string or a function
+     * that is passed the original string and returns new new string.
+     * @see rewriteHTML for more control
+     */
+    replaceText(selector, valueOrReplacer) {
+        // If it's a string then our job is simpler, because we don't need to collect the current text
+        if (typeof valueOrReplacer === 'string') {
+            this.rewriteHTML(selector, {
+                text(textChunk) {
+                    if (textChunk.lastInTextNode) {
+                        textChunk.replace(valueOrReplacer);
+                    }
+                    else {
+                        textChunk.remove();
+                    }
+                },
+            });
+        }
+        else {
+            let text = '';
+            this.rewriteHTML(selector, {
+                text(textChunk) {
+                    text += textChunk.text;
+                    // We're finished, so we can replace the text
+                    if (textChunk.lastInTextNode) {
+                        textChunk.replace(valueOrReplacer(text));
+                    }
+                    else {
+                        // Remove the chunk, because we'll be adding it back later
+                        textChunk.remove();
+                    }
+                },
+            });
+        }
+    }
+    get headers() {
+        var _a;
+        // If we have the origin response, we should use its headers
+        return ((_a = this.originResponse) === null || _a === void 0 ? void 0 : _a.headers) || super.headers;
+    }
+}
+exports.MiddlewareResponse = MiddlewareResponse;

package/lib/templates/getHandler.js

@@ -6,7 +6,7 @@ const outdent_1 = require("outdent");
 const { promises } = require('fs');
 const { Server } = require('http');
 const path = require('path');
-// eslint-disable-next-line node/prefer-global/url, node/prefer-global/url-search-params
+// eslint-disable-next-line n/prefer-global/url, n/prefer-global/url-search-params
 const { URLSearchParams, URL } = require('url');
 const { Bridge } = require('@vercel/node-bridge/bridge');
 const { augmentFsModule, getMaxAge, getMultiValueHeaders, getNextServer } = require('./handlerUtils');
@@ -22,7 +22,7 @@ const makeHandler = (conf, app, pageRoot, staticManifest = [], mode = 'ssr') =>
     }
     // This is just so nft knows about the page entrypoints. It's not actually used
     try {
-        // eslint-disable-next-line node/no-missing-require
+        // eslint-disable-next-line n/no-missing-require
         require.resolve('./pages.js');
     }
     catch { }
@@ -121,7 +121,7 @@ const getHandler = ({ isODB = false, publishDir = '../../../.next', appDir = '..
 
   const { builder } = require("@netlify/functions");
   const { config }  = require("${publishDir}/required-server-files.json")
-  let staticManifest 
+  let staticManifest
   try {
     staticManifest = require("${publishDir}/static-manifest.json")
   } catch {}

package/lib/templates/handlerUtils.js

@@ -160,7 +160,7 @@ const getNextServer = () => {
     if (!NextServer) {
         try {
             // next < 11.0.1
-            // eslint-disable-next-line node/no-missing-require, import/no-unresolved, @typescript-eslint/no-var-requires
+            // eslint-disable-next-line n/no-missing-require, import/no-unresolved, @typescript-eslint/no-var-requires
             NextServer = require('next/dist/next-server/server/next-server').default;
         }
         catch (error) {

package/lib/templates/ipx.js

@@ -9,4 +9,4 @@ exports.handler = (0, ipx_1.createIPXHandler)({
     domains: imageconfig_json_1.domains,
     remotePatterns: imageconfig_json_1.remotePatterns,
 });
-/* eslint-enable node/no-missing-import, import/no-unresolved, @typescript-eslint/ban-ts-comment  */
+/* eslint-enable n/no-missing-import, import/no-unresolved, @typescript-eslint/ban-ts-comment  */

package/package.json

@@ -1,13 +1,25 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.13.0",
+  "version": "4.14.1",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "lib/index.js",
   "files": [
     "lib/**/*",
     "src/templates/edge/*",
-    "manifest.yml"
+    "manifest.yml",
+    "middleware.js"
   ],
+  "typesVersions": {
+    "*": {
+      "middleware": [
+        "dist-types/middleware"
+      ]
+    }
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./middleware": "./lib/middleware/index.js"
+  },
   "dependencies": {
     "@netlify/functions": "^1.0.0",
     "@netlify/ipx": "^1.1.3",
@@ -28,7 +40,7 @@
   },
   "devDependencies": {
     "@delucis/if-env": "^1.1.2",
-    "@netlify/build": "^27.4.2",
+    "@netlify/build": "^27.8.1",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.25",
@@ -41,7 +53,7 @@
     "publish:pull": "git pull",
     "publish:install": "npm ci",
     "publish:test": "cd .. && npm ci && npm test",
-    "clean": "rimraf lib",
+    "clean": "rimraf lib dist-types",
     "build": "tsc",
     "watch": "tsc --watch",
     "prepare": "npm run build"
@@ -62,4 +74,4 @@
   "engines": {
     "node": ">=12.0.0"
   }
-}
+}

package/src/templates/edge/bundle.js

@@ -1,7 +1,7 @@
 /**
  * This placeholder is replaced with the compiled Next.js bundle at build time
- * @args {Object}
- * @args.request {import("./runtime.ts").RequestData}
+ * @param {Object} props
+ * @param {import("./runtime.ts").RequestData} props.request
  * @returns {Promise<import("./utils.ts").FetchEventResult>}
  */
-export default async (props) => {}
+export default async ({ request }) => {}

package/src/templates/edge/ipx.ts

@@ -1,14 +1,12 @@
-import { Accepts } from "https://deno.land/x/accepts@2.1.1/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 'https://edge.netlify.com'
 // Available at build time
-import imageconfig from "./imageconfig.json" assert {
-  type: "json",
-};
+import imageconfig from './imageconfig.json' assert { type: 'json' }
 
-const defaultFormat = "webp"
+const defaultFormat = 'webp'
 
 interface ImageConfig extends Record<string, unknown> {
-  formats?: string[];
+  formats?: string[]
 }
 
 /**
@@ -17,41 +15,38 @@ interface ImageConfig extends Record<string, unknown> {
 
 // 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;
+  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);
+    formats.push(defaultFormat)
   }
-  let type = accept.types(formats) || defaultFormat;
-  if(Array.isArray(type)) {
-    type = type[0];
+  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) {
-    if(type.includes('/')) {
+    if (type.includes('/')) {
       // If this is a mimetype, strip "image/"
-      type = type.split('/')[1];
+      type = type.split('/')[1]
     }
-    modifiers.push(`f_${type}`);
+    modifiers.push(`f_${type}`)
   }
-  const target = `/_ipx/${modifiers.join(",")}/${encodeURIComponent(source)}`;
-  return context.rewrite(
-    target,
-  );
-};
+  const target = `/_ipx/${modifiers.join(',')}/${encodeURIComponent(source)}`
+  return context.rewrite(target)
+}
 
-export default handler;
+export default handler

package/src/templates/edge/runtime.ts

@@ -1,4 +1,4 @@
-import type { Context } from 'netlify:edge'
+import type { Context } from 'https://edge.netlify.com'
 
 import edgeFunction from './bundle.js'
 import { buildResponse } from './utils.ts'
@@ -32,19 +32,43 @@ export interface RequestData {
   body?: ReadableStream<Uint8Array>
 }
 
+export interface RequestContext {
+  request: Request
+  context: Context
+}
+
+declare global {
+  // deno-lint-ignore no-var
+  var NFRequestContextMap: Map<string, RequestContext>
+}
+
+globalThis.NFRequestContextMap ||= new Map()
+
 const handler = async (req: Request, context: Context) => {
   const url = new URL(req.url)
   if (url.pathname.startsWith('/_next/static/')) {
     return
   }
 
+  const geo = {
+    country: context.geo.country?.code,
+    region: context.geo.subdivision?.code,
+    city: context.geo.city,
+  }
+
+  const requestId = req.headers.get('x-nf-request-id')
+  if (!requestId) {
+    console.error('Missing x-nf-request-id header')
+  } else {
+    globalThis.NFRequestContextMap.set(requestId, {
+      request: req,
+      context,
+    })
+  }
+
   const request: RequestData = {
     headers: Object.fromEntries(req.headers.entries()),
-    geo: {
-      country: context.geo.country?.code,
-      region: context.geo.subdivision?.code,
-      city: context.geo.city,
-    },
+    geo,
     url: url.toString(),
     method: req.method,
     ip: context.ip,
@@ -57,6 +81,10 @@ const handler = async (req: Request, context: Context) => {
   } catch (error) {
     console.error(error)
     return new Response(error.message, { status: 500 })
+  } finally {
+    if (requestId) {
+      globalThis.NFRequestContextMap.delete(requestId)
+    }
   }
 }
 

package/src/templates/edge/utils.ts

@@ -1,14 +1,17 @@
-import type { Context } from 'netlify:edge'
+import type { Context } from 'https://edge.netlify.com'
+import { ElementHandlers, HTMLRewriter } from 'https://deno.land/x/html_rewriter@v0.1.0-pre.17/index.ts'
 
 export interface FetchEventResult {
   response: Response
   waitUntil: Promise<any>
 }
 
+type NextDataTransform = <T>(data: T) => T
+
 /**
  * This is how Next handles rewritten URLs.
  */
- export function relativizeURL(url: string | string, base: string | URL) {
+export function relativizeURL(url: string | string, base: string | URL) {
   const baseURL = typeof base === 'string' ? new URL(base) : base
   const relative = new URL(url, base)
   const origin = `${baseURL.protocol}//${baseURL.host}`
@@ -17,7 +20,6 @@ export interface FetchEventResult {
     : relative.toString()
 }
 
-
 export const addMiddlewareHeaders = async (
   originResponse: Promise<Response> | Response,
   middlewareResponse: Response,
@@ -34,6 +36,29 @@ export const addMiddlewareHeaders = async (
   })
   return response
 }
+
+interface MiddlewareResponse extends Response {
+  originResponse: Response
+  dataTransforms: NextDataTransform[]
+  elementHandlers: Array<[selector: string, handlers: ElementHandlers]>
+}
+
+interface MiddlewareRequest {
+  request: Request
+  context: Context
+  originalRequest: Request
+  next(): Promise<MiddlewareResponse>
+  rewrite(destination: string | URL, init?: ResponseInit): Response
+}
+
+function isMiddlewareRequest(response: Response | MiddlewareRequest): response is MiddlewareRequest {
+  return 'originalRequest' in response
+}
+
+function isMiddlewareResponse(response: Response | MiddlewareResponse): response is MiddlewareResponse {
+  return 'dataTransforms' in response
+}
+
 export const buildResponse = async ({
   result,
   request,
@@ -43,13 +68,65 @@ export const buildResponse = async ({
   request: Request
   context: Context
 }) => {
+  // They've returned the MiddlewareRequest directly, so we'll call `next()` for them.
+  if (isMiddlewareRequest(result.response)) {
+    result.response = await result.response.next()
+  }
+  if (isMiddlewareResponse(result.response)) {
+    const { response } = result
+    if (request.method === 'HEAD' || request.method === 'OPTIONS') {
+      return response.originResponse
+    }
+    // If it's JSON we don't need to use the rewriter, we can just parse it
+    if (response.originResponse.headers.get('content-type')?.includes('application/json')) {
+      const props = await response.originResponse.json()
+      const transformed = response.dataTransforms.reduce((prev, transform) => {
+        return transform(prev)
+      }, props)
+      return context.json(transformed)
+    }
+    // This var will hold the contents of the script tag
+    let buffer = ''
+    // Create an HTMLRewriter that matches the Next data script tag
+    const rewriter = new HTMLRewriter()
+
+    if (response.dataTransforms.length > 0) {
+      rewriter.on('script[id="__NEXT_DATA__"]', {
+        text(textChunk) {
+          // Grab all the chunks in the Next data script tag
+          buffer += textChunk.text
+          if (textChunk.lastInTextNode) {
+            try {
+              // When we have all the data, try to parse it as JSON
+              const data = JSON.parse(buffer.trim())
+              // Apply all of the transforms to the props
+              const props = response.dataTransforms.reduce((prev, transform) => transform(prev), data.props)
+              // Replace the data with the transformed props
+              textChunk.replace(JSON.stringify({ ...data, props }))
+            } catch (err) {
+              console.log('Could not parse', err)
+            }
+          } else {
+            // Remove the chunk after we've appended it to the buffer
+            textChunk.remove()
+          }
+        },
+      })
+    }
+
+    if (response.elementHandlers.length > 0) {
+      response.elementHandlers.forEach(([selector, handlers]) => rewriter.on(selector, handlers))
+    }
+    return rewriter.transform(response.originResponse)
+  }
   const res = new Response(result.response.body, result.response)
   request.headers.set('x-nf-next-middleware', 'skip')
+
   const rewrite = res.headers.get('x-middleware-rewrite')
   if (rewrite) {
     const rewriteUrl = new URL(rewrite, request.url)
     const baseUrl = new URL(request.url)
-    if(rewriteUrl.hostname !== baseUrl.hostname) {
+    if (rewriteUrl.hostname !== baseUrl.hostname) {
       // Netlify Edge Functions don't support proxying to external domains, but Next middleware does
       const proxied = fetch(new Request(rewriteUrl.toString(), request))
       return addMiddlewareHeaders(proxied, res)