@netlify/plugin-nextjs 4.17.1-runtime.0 → 4.17.1-runtime.3

package/lib/helpers/dev.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onPreDev = void 0;
+const path_1 = require("path");
+const execa_1 = __importDefault(require("execa"));
+const fs_extra_1 = require("fs-extra");
+const edge_1 = require("./edge");
+const files_1 = require("./files");
+// The types haven't been updated yet
+const onPreDev = async ({ constants, netlifyConfig }) => {
+    var _a;
+    const base = (_a = netlifyConfig.build.base) !== null && _a !== void 0 ? _a : process.cwd();
+    // Need to patch the files, because build might not have been run
+    await (0, files_1.patchNextFiles)(base);
+    //  Clean up old functions
+    await (0, fs_extra_1.unlink)((0, path_1.resolve)('.netlify', 'middleware.js')).catch(() => {
+        // Ignore if it doesn't exist
+    });
+    await (0, edge_1.writeDevEdgeFunction)(constants);
+    if (!(0, fs_extra_1.existsSync)((0, path_1.resolve)(base, 'middleware.ts')) && !(0, fs_extra_1.existsSync)((0, path_1.resolve)(base, 'middleware.js'))) {
+        console.log("No middleware found. Create a 'middleware.ts' or 'middleware.js' file in your project root to add custom middleware.");
+    }
+    else {
+        console.log('Watching for changes in Next.js middleware...');
+    }
+    // Eventually we might want to do this via esbuild's API, but for now the CLI works fine
+    const childProcess = (0, execa_1.default)(`esbuild`, [
+        `--bundle`,
+        `--outdir=${(0, path_1.resolve)('.netlify')}`,
+        `--format=esm`,
+        '--watch',
+        // Watch for both, because it can have either ts or js
+        (0, path_1.resolve)(base, 'middleware.ts'),
+        (0, path_1.resolve)(base, 'middleware.js'),
+    ]);
+    childProcess.stdout.pipe(process.stdout);
+    childProcess.stderr.pipe(process.stderr);
+    // Don't return the promise because we don't want to wait for the child process to finish
+};
+exports.onPreDev = onPreDev;

package/lib/helpers/edge.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateConfig = exports.writeEdgeFunctions = exports.loadMiddlewareManifest = void 0;
+exports.enableEdgeInNextConfig = exports.writeEdgeFunctions = exports.writeDevEdgeFunction = exports.loadMiddlewareManifest = void 0;
 /* eslint-disable max-lines */
 const fs_1 = require("fs");
 const path_1 = require("path");
@@ -67,6 +67,25 @@ const writeEdgeFunction = async ({ edgeFunctionDefinition, edgeFunctionRoot, net
         pattern: stripLookahead(edgeFunctionDefinition.regexp),
     };
 };
+const writeDevEdgeFunction = async ({ INTERNAL_EDGE_FUNCTIONS_SRC = '.netlify/edge-functions', }) => {
+    const manifest = {
+        functions: [
+            {
+                function: 'next-dev',
+                path: '/*',
+            },
+        ],
+        version: 1,
+    };
+    const edgeFunctionRoot = (0, path_1.resolve)(INTERNAL_EDGE_FUNCTIONS_SRC);
+    await (0, fs_extra_1.emptyDir)(edgeFunctionRoot);
+    await (0, fs_extra_1.writeJson)((0, path_1.join)(edgeFunctionRoot, 'manifest.json'), manifest);
+    const edgeFunctionDir = (0, path_1.join)(edgeFunctionRoot, 'next-dev');
+    await (0, fs_extra_1.ensureDir)(edgeFunctionDir);
+    await copyEdgeSourceFile({ edgeFunctionDir, file: 'next-dev.js', target: 'index.js' });
+    await copyEdgeSourceFile({ edgeFunctionDir, file: 'utils.ts' });
+};
+exports.writeDevEdgeFunction = writeDevEdgeFunction;
 /**
  * Writes Edge Functions for the Next middleware
  */
@@ -78,9 +97,7 @@ const writeEdgeFunctions = async (netlifyConfig) => {
     const edgeFunctionRoot = (0, path_1.resolve)('.netlify', 'edge-functions');
     await (0, fs_extra_1.emptyDir)(edgeFunctionRoot);
     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.');
-        }
+        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' });
@@ -90,7 +107,7 @@ const writeEdgeFunctions = async (netlifyConfig) => {
             path: '/_next/image*',
         });
     }
-    if (process.env.NEXT_USE_NETLIFY_EDGE) {
+    if (!process.env.NEXT_DISABLE_NETLIFY_EDGE) {
         const middlewareManifest = await (0, exports.loadMiddlewareManifest)(netlifyConfig);
         if (!middlewareManifest) {
             console.error("Couldn't find the middleware manifest");
@@ -121,11 +138,10 @@ const writeEdgeFunctions = async (netlifyConfig) => {
     await (0, fs_extra_1.writeJson)((0, path_1.join)(edgeFunctionRoot, 'manifest.json'), manifest);
 };
 exports.writeEdgeFunctions = writeEdgeFunctions;
-const updateConfig = async (publish) => {
+const enableEdgeInNextConfig = async (publish) => {
     const configFile = (0, path_1.join)(publish, 'required-server-files.json');
     const config = await (0, fs_extra_1.readJSON)(configFile);
-    config.config.env.NEXT_USE_NETLIFY_EDGE = 'true';
     await (0, fs_extra_1.writeJSON)(configFile, config);
 };
-exports.updateConfig = updateConfig;
+exports.enableEdgeInNextConfig = enableEdgeInNextConfig;
 /* eslint-enable max-lines */

package/lib/helpers/files.js

@@ -54,7 +54,7 @@ const matchesRewrite = (file, rewrites) => {
 exports.matchesRewrite = matchesRewrite;
 const getMiddleware = async (publish) => {
     var _a;
-    if (process.env.NEXT_USE_NETLIFY_EDGE) {
+    if (!process.env.NEXT_DISABLE_NETLIFY_EDGE) {
         return [];
     }
     const manifestPath = (0, pathe_1.join)(publish, 'server', 'middleware-manifest.json');
@@ -276,19 +276,19 @@ const baseServerReplacements = [
 const nextServerReplacements = [
     [
         `getMiddlewareManifest() {\n        if (this.minimalMode) return null;`,
-        `getMiddlewareManifest() {\n        if (this.minimalMode || process.env.NEXT_USE_NETLIFY_EDGE) return null;`,
+        `getMiddlewareManifest() {\n        if (this.minimalMode || !process.env.NEXT_DISABLE_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(devReady) {\n        if (this.minimalMode || !process.env.NEXT_DISABLE_NETLIFY_EDGE) return [];`,
     ],
     [
         `generateCatchAllMiddlewareRoute() {\n        if (this.minimalMode) return undefined;`,
-        `generateCatchAllMiddlewareRoute() {\n        if (this.minimalMode || process.env.NEXT_USE_NETLIFY_EDGE) return undefined;`,
+        `generateCatchAllMiddlewareRoute() {\n        if (this.minimalMode || !process.env.NEXT_DISABLE_NETLIFY_EDGE) return undefined;`,
     ],
     [
         `getMiddlewareManifest() {\n        if (this.minimalMode) {`,
-        `getMiddlewareManifest() {\n        if (!this.minimalMode && !process.env.NEXT_USE_NETLIFY_EDGE) {`,
+        `getMiddlewareManifest() {\n        if (!this.minimalMode && process.env.NEXT_DISABLE_NETLIFY_EDGE) {`,
     ],
 ];
 const patchNextFiles = async (root) => {

package/lib/index.js

@@ -8,6 +8,7 @@ const outdent_1 = require("outdent");
 const constants_1 = require("./constants");
 const cache_1 = require("./helpers/cache");
 const config_1 = require("./helpers/config");
+const dev_1 = require("./helpers/dev");
 const edge_1 = require("./helpers/edge");
 const files_1 = require("./helpers/files");
 const functions_1 = require("./helpers/functions");
@@ -34,7 +35,6 @@ const plugin = {
         netlifyConfig.build.environment.NEXT_PRIVATE_TARGET = 'server';
     },
     async onBuild({ constants, netlifyConfig, utils: { build: { failBuild }, }, }) {
-        var _a;
         if ((0, utils_1.shouldSkip)()) {
             return;
         }
@@ -45,6 +45,28 @@ const plugin = {
             publish,
             failBuild,
         });
+        const middlewareManifest = await (0, edge_1.loadMiddlewareManifest)(netlifyConfig);
+        let usingEdge = false;
+        if (Object.keys(middlewareManifest === null || middlewareManifest === void 0 ? void 0 : middlewareManifest.functions).length !== 0) {
+            usingEdge = true;
+            if (process.env.NEXT_DISABLE_NETLIFY_EDGE) {
+                failBuild((0, outdent_1.outdent) `
+          You are using Next.js experimental edge runtime, but have set NEXT_DISABLE_NETLIFY_EDGE to true. This is not supported.
+          To use edge runtime, remove the env var ${(0, chalk_1.bold) `NEXT_DISABLE_NETLIFY_EDGE`}.
+        `);
+            }
+        }
+        if (Object.keys(middlewareManifest === null || middlewareManifest === void 0 ? void 0 : middlewareManifest.middleware).length !== 0) {
+            usingEdge = true;
+            if (process.env.NEXT_DISABLE_NETLIFY_EDGE) {
+                console.log((0, chalk_1.redBright)((0, outdent_1.outdent) `
+            You are using Next.js Middleware without Netlify Edge Functions.
+            This is deprecated because it negatively affects performance and will disable ISR and static rendering.
+            It also disables advanced middleware features from @netlify/next
+            To get the best performance and use Netlify Edge Functions, remove the env var ${(0, chalk_1.bold) `NEXT_DISABLE_NETLIFY_EDGE`}.
+          `));
+            }
+        }
         if (experimental.images) {
             experimentalRemotePatterns = experimental.images.remotePatterns || [];
         }
@@ -87,22 +109,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) {
+        if (usingEdge) {
+            await (0, edge_1.writeEdgeFunctions)(netlifyConfig);
+            await (0, edge_1.enableEdgeInNextConfig)(publish);
             console.log((0, outdent_1.outdent) `
-        ✨ Deploying to ${(0, chalk_1.greenBright) `Netlify Edge Functions`} ✨
+        ✨ 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, edge_1.updateConfig)(publish);
-        }
-        const middlewareManifest = await (0, edge_1.loadMiddlewareManifest)(netlifyConfig);
-        if (!process.env.NEXT_USE_NETLIFY_EDGE && ((_a = middlewareManifest === null || middlewareManifest === void 0 ? void 0 : middlewareManifest.sortedMiddleware) === null || _a === void 0 ? void 0 : _a.length)) {
-            console.log((0, chalk_1.yellowBright)((0, outdent_1.outdent) `
-          You are using Next.js Middleware without Netlify Edge Functions.
-          This will soon be deprecated because it negatively affects performance and will disable ISR and static rendering.
-          To get the best performance and use Netlify Edge Functions, set the env var ${(0, chalk_1.bold) `NEXT_USE_NETLIFY_EDGE=true`}.
-        `));
         }
     },
     async onPostBuild({ netlifyConfig: { build: { publish }, redirects, headers, }, utils: { status, cache, functions, build: { failBuild }, }, constants: { FUNCTIONS_DIST }, }) {
@@ -125,5 +138,24 @@ const plugin = {
         (0, verification_1.warnForRootRedirects)({ appDir });
     },
 };
-module.exports = plugin;
+// The types haven't been updated yet
+const nextRuntime = (_inputs, meta = {}) => {
+    var _a;
+    if (!((_a = meta === null || meta === void 0 ? void 0 : meta.events) === null || _a === void 0 ? void 0 : _a.has('onPreDev'))) {
+        return {
+            ...plugin,
+            onEnd: ({ utils }) => {
+                utils.status.show({
+                    title: 'Please upgrade to the latest version of the Netlify CLI',
+                    summary: 'To support for the latest Next.js features, please upgrade to the latest version of the Netlify CLI',
+                });
+            },
+        };
+    }
+    return {
+        ...plugin,
+        onPreDev: dev_1.onPreDev,
+    };
+};
+module.exports = nextRuntime;
 /* eslint-enable max-lines */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.17.1-runtime.0",
+  "version": "4.17.1-runtime.3",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "lib/index.js",
   "files": [
@@ -9,10 +9,12 @@
     "manifest.yml"
   ],
   "dependencies": {
+    "@netlify/esbuild": "0.14.25",
     "@netlify/functions": "^1.2.0",
     "@netlify/ipx": "^1.2.2",
     "@vercel/node-bridge": "^2.1.0",
     "chalk": "^4.1.2",
+    "execa": "^5.1.1",
     "fs-extra": "^10.0.0",
     "globby": "^11.0.4",
     "moize": "^6.1.0",
@@ -22,8 +24,8 @@
     "p-limit": "^3.1.0",
     "pathe": "^0.2.0",
     "pretty-bytes": "^5.6.0",
-    "slash": "^3.0.0",
     "semver": "^7.3.5",
+    "slash": "^3.0.0",
     "tiny-glob": "^0.2.9"
   },
   "devDependencies": {

package/src/templates/edge/next-dev.js

@@ -0,0 +1,87 @@
+import { NextRequest } from 'https://esm.sh/v91/next@12.2.5/deno/dist/server/web/spec-extension/request.js'
+import { NextResponse } from 'https://esm.sh/v91/next@12.2.5/deno/dist/server/web/spec-extension/response.js'
+import { fromFileUrl } from 'https://deno.land/std@0.151.0/path/mod.ts'
+import { buildResponse } from './utils.ts'
+
+globalThis.NFRequestContextMap ||= new Map()
+globalThis.__dirname = fromFileUrl(new URL('./', import.meta.url)).slice(0, -1)
+
+// Check if a file exists, given a relative path
+const exists = async (relativePath) => {
+  const path = fromFileUrl(new URL(relativePath, import.meta.url))
+  try {
+    await Deno.stat(path)
+    return true
+  } catch (error) {
+    if (error instanceof Deno.errors.NotFound) {
+      return false
+    }
+    throw error
+  }
+}
+
+const handler = async (req, context) => {
+  // Uncomment when CLI update lands
+  // if (!Deno.env.get('NETLIFY_DEV')) {
+  //   // Only run in dev
+  //   return
+  // }
+
+  let middleware
+  // Dynamic imports and FS operations aren't allowed when deployed,
+  // but that's fine because this is only ever used locally.
+  // We don't want to just try importing and use that to test,
+  // because that would also throw if there's an error in the middleware,
+  // which we would want to surface not ignore.
+  if (await exists('../../middleware.js')) {
+    // These will be user code
+    const nextMiddleware = await import('../../middleware.js')
+    middleware = nextMiddleware.middleware
+  } else {
+    //  No middleware, so we silently return
+    return
+  }
+
+  //  This is the format expected by Next.js
+  const geo = {
+    country: context.geo.country?.code,
+    region: context.geo.subdivision?.code,
+    city: context.geo.city,
+  }
+
+  // A default request id is fine locally
+  const requestId = req.headers.get('x-nf-request-id') || 'request-id'
+
+  globalThis.NFRequestContextMap.set(requestId, {
+    request: req,
+    context,
+  })
+
+  const request = {
+    headers: Object.fromEntries(req.headers.entries()),
+    geo,
+    method: req.method,
+    ip: context.ip,
+    body: req.body || undefined,
+  }
+
+  const nextRequest = new NextRequest(req, request)
+
+  try {
+    const response = await middleware(nextRequest)
+    return buildResponse({
+      result: { response: response || NextResponse.next(), waitUntil: Promise.resolve() },
+      request: req,
+      context,
+    })
+  } catch (error) {
+    console.error(error)
+    return new Response(error.message, { status: 500 })
+  } finally {
+    if (requestId) {
+      globalThis.NFRequestContextMap.delete(requestId)
+    }
+  }
+}
+
+export default handler

package/src/templates/edge/runtime.ts

@@ -45,6 +45,10 @@ declare global {
 globalThis.NFRequestContextMap ||= new Map()
 
 const handler = async (req: Request, context: Context) => {
+  if (Deno.env.get('NETLIFY_DEV')) {
+    // Don't run in dev
+    return
+  }
   const url = new URL(req.url)
 
   const geo = {

package/src/templates/edge/utils.ts

@@ -123,17 +123,38 @@ export const buildResponse = async ({
   request.headers.set('x-nf-next-middleware', 'skip')
 
   const rewrite = res.headers.get('x-middleware-rewrite')
+
+  // Data requests (i.e. requests for /_next/data ) need special handling
+  const isDataReq = request.headers.get('x-nextjs-data')
+
   if (rewrite) {
     const rewriteUrl = new URL(rewrite, request.url)
     const baseUrl = new URL(request.url)
+    const relativeUrl = relativizeURL(rewrite, request.url)
+
+    // Data requests might be rewritten to an external URL
+    // This header tells the client router the redirect target, and if it's external then it will do a full navigation
+    if (isDataReq) {
+      res.headers.set('x-nextjs-rewrite', relativeUrl)
+    }
     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)
     }
-    res.headers.set('x-middleware-rewrite', relativizeURL(rewrite, request.url))
+    res.headers.set('x-middleware-rewrite', relativeUrl)
+
     return addMiddlewareHeaders(context.rewrite(rewrite), res)
   }
+
+  const redirect = res.headers.get('Location')
+
+  // Data requests shouldn;t automatically redirect in the browser (they might be HTML pages): they're handled by the router
+  if (redirect && isDataReq) {
+    res.headers.delete('location')
+    res.headers.set('x-nextjs-redirect', relativizeURL(redirect, request.url))
+  }
+
   if (res.headers.get('x-middleware-next') === '1') {
     return addMiddlewareHeaders(context.next(), res)
   }