@netlify/plugin-nextjs 4.0.0-beta.1 → 4.0.0-beta.10

package/README.md

@@ -2,8 +2,8 @@
 
 # Essential Next.js Build Plugin (beta)
 
-
-:warning: This is the beta version of the Essential Next.js plugin. For the stable version, see [Essential Next.js plugin v3](https://github.com/netlify/netlify-plugin-nextjs/tree/v3#readme) :warning:
+:warning: This is the beta version of the Essential Next.js plugin. For the stable version, refer to
+[Essential Next.js plugin v3](https://github.com/netlify/netlify-plugin-nextjs/tree/v3#readme) :warning:
 
 <p align="center">
   <a aria-label="npm version" href="https://www.npmjs.com/package/@netlify/plugin-nextjs">
@@ -14,15 +14,21 @@
   </a>
 </p>
 
+## What's new in this version
 
-## Installing the beta
+Version 4 is a complete rewrite of the Essential Next.js plugin. For full details of everything that's new, check out
+[the v4 release notes](https://github.com/netlify/netlify-plugin-nextjs/blob/main/docs/release-notes/v4.md)
 
+## Installing the beta
 
 - Install the module:
+
 ```shell
 npm install -D @netlify/plugin-nextjs@beta
 ```
-- Change the `publish` directory to `.next`  and add the plugin to `netlify.toml` if not already installed:
+
+- Change the `publish` directory to `.next` and add the plugin to `netlify.toml` if not already installed:
+
 ```toml
 [build]
 publish = ".next"
@@ -31,4 +37,27 @@ publish = ".next"
 package = "@netlify/plugin-nextjs"
 ```
 
-If you previously set `target: "serverless"` in your `next.config.js` this is no longer needed and can be removed.
+If you previously set a custom `distDir` in your `next.config.js`, or set `node_bundler` or `external_node_modules` in
+your `netlify.toml` these are no longer needed and can be removed.
+
+The `serverless` and `experimental-serverless-trace` targets are deprecated in Next 12, and all builds with this plugin
+will now use the default `server` target. If you previously set the target in your `next.config.js`, you should remove
+it.
+
+If you are using a monorepo you will need to change `publish` to point to the full path to the built `.next` directory,
+which may be in a subdirectory. If you have changed your `distDir` then it will need to match that.
+
+If you are using Nx, then you will need to point `publish` to the folder inside `dist`, e.g. `dist/apps/myapp/.next`.
+
+If you currently use redirects or rewrites on your site, see
+[the Rewrites and Redirects guide](https://github.com/netlify/netlify-plugin-nextjs/blob/main/docs/redirects-rewrites.md)
+for information on changes to how they are handled in this version.
+
+If you want to use Next 12's beta Middleware feature, this will mostly work as expected but please
+[read the docs on some caveats and workarounds](https://github.com/netlify/netlify-plugin-nextjs/blob/main/docs/middleware.md)
+that are currently needed.
+
+## Beta feedback
+
+Please share any thoughts, feedback or questions about the beta
+[in our discussion](https://github.com/netlify/netlify-plugin-nextjs/discussions/706).

package/lib/constants.js

@@ -1,8 +1,6 @@
-const destr = require('destr');
 const HANDLER_FUNCTION_NAME = '___netlify-handler';
 const ODB_FUNCTION_NAME = '___netlify-odb-handler';
 const IMAGE_FUNCTION_NAME = '_ipx';
-const ODB_PATH = destr(process.env.EXPERIMENTAL_PERSISTENT_BUILDERS) ? 'builders' : 'functions';
 // These are paths in .next that shouldn't be publicly accessible
 const HIDDEN_PATHS = [
     '/cache/*',
@@ -20,5 +18,4 @@ module.exports = {
     IMAGE_FUNCTION_NAME,
     HANDLER_FUNCTION_NAME,
     ODB_FUNCTION_NAME,
-    ODB_PATH,
 };

package/lib/helpers/config.js

@@ -1,11 +1,14 @@
-// @ts-check
-const { join } = require('path');
-const { readJSON } = require('fs-extra');
+/* eslint-disable max-lines */
+const { yellowBright } = require('chalk');
+const { readJSON, existsSync } = require('fs-extra');
+const { outdent } = require('outdent');
+const { join, dirname, relative } = require('pathe');
+const slash = require('slash');
 const defaultFailBuild = (message, { error }) => {
     throw new Error(`${message}\n${error && error.stack}`);
 };
-const { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, HIDDEN_PATHS, ODB_PATH } = require('../constants');
-const ODB_FUNCTION_PATH = `/.netlify/${ODB_PATH}/${ODB_FUNCTION_NAME}`;
+const { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, HIDDEN_PATHS } = require('../constants');
+const ODB_FUNCTION_PATH = `/.netlify/builders/${ODB_FUNCTION_NAME}`;
 const HANDLER_FUNCTION_PATH = `/.netlify/functions/${HANDLER_FUNCTION_NAME}`;
 const CATCH_ALL_REGEX = /\/\[\.{3}(.*)](.json)?$/;
 const OPTIONAL_CATCH_ALL_REGEX = /\/\[{2}\.{3}(.*)]{2}(.json)?$/;
@@ -38,58 +41,134 @@ const getNetlifyRoutes = (nextRoute) => {
     return netlifyRoutes;
 };
 exports.generateRedirects = async ({ netlifyConfig, basePath, i18n }) => {
-    const { dynamicRoutes } = await readJSON(join(netlifyConfig.build.publish, 'prerender-manifest.json'));
-    const redirects = [];
+    const { dynamicRoutes, routes: staticRoutes } = await readJSON(join(netlifyConfig.build.publish, 'prerender-manifest.json'));
     netlifyConfig.redirects.push(...HIDDEN_PATHS.map((path) => ({
         from: `${basePath}${path}`,
         to: '/404.html',
         status: 404,
         force: true,
     })));
+    const dataRedirects = [];
+    const pageRedirects = [];
+    const isrRedirects = [];
+    let hasIsr = false;
     const dynamicRouteEntries = Object.entries(dynamicRoutes);
-    dynamicRouteEntries.sort((a, b) => a[0].localeCompare(b[0]));
+    const staticRouteEntries = Object.entries(staticRoutes);
+    staticRouteEntries.forEach(([route, { dataRoute, initialRevalidateSeconds }]) => {
+        // Only look for revalidate as we need to rewrite these to SSR rather than ODB
+        if (initialRevalidateSeconds === false) {
+            // These can be ignored, as they're static files handled by the CDN
+            return;
+        }
+        if (i18n.defaultLocale && route.startsWith(`/${i18n.defaultLocale}/`)) {
+            route = route.slice(i18n.defaultLocale.length + 1);
+        }
+        hasIsr = true;
+        isrRedirects.push(...getNetlifyRoutes(dataRoute), ...getNetlifyRoutes(route));
+    });
     dynamicRouteEntries.forEach(([route, { dataRoute, fallback }]) => {
         // Add redirects if fallback is "null" (aka blocking) or true/a string
         if (fallback === false) {
             return;
         }
-        redirects.push(...getNetlifyRoutes(route), ...getNetlifyRoutes(dataRoute));
+        pageRedirects.push(...getNetlifyRoutes(route));
+        dataRedirects.push(...getNetlifyRoutes(dataRoute));
     });
     if (i18n) {
         netlifyConfig.redirects.push({ from: `${basePath}/:locale/_next/static/*`, to: `/static/:splat`, status: 200 });
     }
     // This is only used in prod, so dev uses `next dev` directly
-    netlifyConfig.redirects.push({ from: `${basePath}/_next/static/*`, to: `/static/:splat`, status: 200 }, {
+    netlifyConfig.redirects.push(
+    // Static files are in `static`
+    { from: `${basePath}/_next/static/*`, to: `/static/:splat`, status: 200 }, 
+    // API routes always need to be served from the regular function
+    {
+        from: `${basePath}/api`,
+        to: HANDLER_FUNCTION_PATH,
+        status: 200,
+    }, {
+        from: `${basePath}/api/*`,
+        to: HANDLER_FUNCTION_PATH,
+        status: 200,
+    }, 
+    // Preview mode gets forced to the function, to bypess pre-rendered pages
+    {
         from: `${basePath}/*`,
         to: HANDLER_FUNCTION_PATH,
         status: 200,
-        force: true,
         conditions: { Cookie: ['__prerender_bypass', '__next_preview_data'] },
-    }, ...redirects.map((redirect) => ({
+        force: true,
+    }, 
+    // ISR redirects are handled by the regular function. Forced to avoid pre-rendered pages
+    ...isrRedirects.map((redirect) => ({
+        from: `${basePath}${redirect}`,
+        to: HANDLER_FUNCTION_PATH,
+        status: 200,
+        force: true,
+    })), 
+    // These are pages with fallback set, which need an ODB
+    // Data redirects go first, to avoid conflict with splat redirects
+    ...dataRedirects.map((redirect) => ({
+        from: `${basePath}${redirect}`,
+        to: ODB_FUNCTION_PATH,
+        status: 200,
+    })), 
+    // ...then all the other fallback pages
+    ...pageRedirects.map((redirect) => ({
         from: `${basePath}${redirect}`,
         to: ODB_FUNCTION_PATH,
         status: 200,
-    })), { from: `${basePath}/*`, to: HANDLER_FUNCTION_PATH, status: 200 });
+    })), 
+    // Everything else is handled by the regular function
+    { from: `${basePath}/*`, to: HANDLER_FUNCTION_PATH, status: 200 });
+    if (hasIsr) {
+        console.log(yellowBright(outdent `
+        You have some pages that use ISR (pages that use getStaticProps with revalidate set), which is not currently fully-supported by this plugin. Be aware that results may be unreliable.
+      `));
+    }
 };
 exports.getNextConfig = async function getNextConfig({ publish, failBuild = defaultFailBuild }) {
     try {
-        const { config, appDir } = await readJSON(join(publish, 'required-server-files.json'));
+        const { config, appDir, ignore } = await readJSON(join(publish, 'required-server-files.json'));
         if (!config) {
             return failBuild('Error loading your Next config');
         }
-        return { ...config, appDir };
+        return { ...config, appDir, ignore };
     }
     catch (error) {
         return failBuild('Error loading your Next config', { error });
     }
 };
-exports.configureHandlerFunctions = ({ netlifyConfig, publish }) => {
-    ;
+const resolveModuleRoot = (moduleName) => {
+    try {
+        return dirname(relative(process.cwd(), require.resolve(`${moduleName}/package.json`, { paths: [process.cwd()] })));
+    }
+    catch (error) {
+        return null;
+    }
+};
+const DEFAULT_EXCLUDED_MODULES = ['sharp', 'electron'];
+exports.configureHandlerFunctions = ({ netlifyConfig, publish, ignore = [] }) => {
+    var _a;
+    /* eslint-disable no-underscore-dangle */
+    (_a = netlifyConfig.functions)._ipx || (_a._ipx = {});
+    netlifyConfig.functions._ipx.node_bundler = 'nft';
     [HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME].forEach((functionName) => {
         var _a, _b;
         (_a = netlifyConfig.functions)[functionName] || (_a[functionName] = { included_files: [], external_node_modules: [] });
         netlifyConfig.functions[functionName].node_bundler = 'nft';
         (_b = netlifyConfig.functions[functionName]).included_files || (_b.included_files = []);
-        netlifyConfig.functions[functionName].included_files.push(`${publish}/server/**`, `${publish}/serverless/**`, `${publish}/*.json`, `${publish}/BUILD_ID`, '!node_modules/@next/swc-*/**/*', '!node_modules/next/dist/compiled/@ampproject/toolbox-optimizer/**/*', '!node_modules/next/dist/pages/**/*', `!node_modules/next/dist/server/lib/squoosh/**/*.wasm`, `!node_modules/next/dist/next-server/server/lib/squoosh/**/*.wasm`, '!node_modules/next/dist/compiled/webpack/(bundle4|bundle5).js', '!node_modules/react/**/*.development.js', '!node_modules/react-dom/**/*.development.js', '!node_modules/use-subscription/**/*.development.js', '!node_modules/sharp/**/*');
+        netlifyConfig.functions[functionName].included_files.push(`${publish}/server/**`, `${publish}/serverless/**`, `${publish}/*.json`, `${publish}/BUILD_ID`, `${publish}/static/chunks/webpack-middleware*.js`, `!${publish}/server/**/*.js.nft.json`, ...ignore.map((path) => `!${slash(path)}`));
+        const nextRoot = resolveModuleRoot('next');
+        if (nextRoot) {
+            netlifyConfig.functions[functionName].included_files.push(`!${nextRoot}/dist/server/lib/squoosh/**/*.wasm`, `!${nextRoot}/dist/next-server/server/lib/squoosh/**/*.wasm`, `!${nextRoot}/dist/compiled/webpack/bundle4.js`, `!${nextRoot}/dist/compiled/webpack/bundle5.js`, `!${nextRoot}/dist/compiled/terser/bundle.min.js`);
+        }
+        DEFAULT_EXCLUDED_MODULES.forEach((moduleName) => {
+            const moduleRoot = resolveModuleRoot(moduleName);
+            if (moduleRoot) {
+                netlifyConfig.functions[functionName].included_files.push(`!${moduleRoot}/**/*`);
+            }
+        });
     });
 };
+/* eslint-enable max-lines */

package/lib/helpers/files.js

@@ -0,0 +1,187 @@
+/* eslint-disable max-lines */
+const { cpus } = require('os');
+const { yellowBright } = require('chalk');
+const { existsSync, readJson, move, cpSync, copy, writeJson } = require('fs-extra');
+const globby = require('globby');
+const { outdent } = require('outdent');
+const pLimit = require('p-limit');
+const { join } = require('pathe');
+const slash = require('slash');
+const TEST_ROUTE = /(|\/)\[[^/]+?](\/|\.html|$)/;
+const isDynamicRoute = (route) => TEST_ROUTE.test(route);
+const stripLocale = (rawPath, locales = []) => {
+    const [locale, ...segments] = rawPath.split('/');
+    if (locales.includes(locale)) {
+        return segments.join('/');
+    }
+    return rawPath;
+};
+const matchMiddleware = (middleware, filePath) => (middleware === null || middleware === void 0 ? void 0 : middleware.includes('')) ||
+    (middleware === null || middleware === void 0 ? void 0 : middleware.find((middlewarePath) => filePath === middlewarePath || filePath === `${middlewarePath}.html` || filePath.startsWith(`${middlewarePath}/`)));
+const matchesRedirect = (file, redirects) => {
+    if (!Array.isArray(redirects)) {
+        return false;
+    }
+    return redirects.some((redirect) => {
+        if (!redirect.regex || redirect.internal) {
+            return false;
+        }
+        // Strips the extension from the file path
+        return new RegExp(redirect.regex).test(`/${file.slice(0, -5)}`);
+    });
+};
+const matchesRewrite = (file, rewrites) => {
+    if (Array.isArray(rewrites)) {
+        return matchesRedirect(file, rewrites);
+    }
+    if (!Array.isArray(rewrites === null || rewrites === void 0 ? void 0 : rewrites.beforeFiles)) {
+        return false;
+    }
+    return matchesRedirect(file, rewrites.beforeFiles);
+};
+exports.matchesRedirect = matchesRedirect;
+exports.matchesRewrite = matchesRewrite;
+exports.matchMiddleware = matchMiddleware;
+exports.stripLocale = stripLocale;
+exports.isDynamicRoute = isDynamicRoute;
+// eslint-disable-next-line max-lines-per-function
+exports.moveStaticPages = async ({ netlifyConfig, target, i18n }) => {
+    console.log('Moving static page files to serve from CDN...');
+    const outputDir = join(netlifyConfig.build.publish, target === 'server' ? 'server' : 'serverless');
+    const root = join(outputDir, 'pages');
+    // Load the middleware manifest so we can check if a file matches it before moving
+    let middleware;
+    const manifestPath = join(outputDir, 'middleware-manifest.json');
+    if (existsSync(manifestPath)) {
+        const manifest = await readJson(manifestPath);
+        if (manifest === null || manifest === void 0 ? void 0 : manifest.middleware) {
+            middleware = Object.keys(manifest.middleware).map((path) => path.slice(1));
+        }
+    }
+    const prerenderManifest = await readJson(join(netlifyConfig.build.publish, 'prerender-manifest.json'));
+    const { redirects, rewrites } = await readJson(join(netlifyConfig.build.publish, 'routes-manifest.json'));
+    const isrFiles = new Set();
+    Object.entries(prerenderManifest.routes).forEach(([route, { initialRevalidateSeconds }]) => {
+        if (initialRevalidateSeconds) {
+            // Find all files used by ISR routes
+            const trimmedPath = route.slice(1);
+            isrFiles.add(`${trimmedPath}.html`);
+            isrFiles.add(`${trimmedPath}.json`);
+        }
+    });
+    const files = [];
+    const moveFile = async (file) => {
+        const source = join(root, file);
+        files.push(file);
+        const dest = join(netlifyConfig.build.publish, file);
+        try {
+            await move(source, dest);
+        }
+        catch (error) {
+            console.warn('Error moving file', source, error);
+        }
+    };
+    // Move all static files, except error documents and nft manifests
+    const pages = await globby(['**/*.{html,json}', '!**/(500|404|*.js.nft).{html,json}'], {
+        cwd: root,
+        dot: true,
+    });
+    const matchingMiddleware = new Set();
+    const matchedPages = new Set();
+    const matchedRedirects = new Set();
+    const matchedRewrites = new Set();
+    // Limit concurrent file moves to number of cpus or 2 if there is only 1
+    const limit = pLimit(Math.max(2, cpus().length));
+    const promises = pages.map(async (rawPath) => {
+        const filePath = slash(rawPath);
+        // Don't move ISR files, as they're used for the first request
+        if (isrFiles.has(filePath)) {
+            return;
+        }
+        if (isDynamicRoute(filePath)) {
+            return;
+        }
+        if (matchesRedirect(filePath, redirects)) {
+            matchedRedirects.add(filePath);
+            return;
+        }
+        if (matchesRewrite(filePath, rewrites)) {
+            matchedRewrites.add(filePath);
+            return;
+        }
+        // Middleware matches against the unlocalised path
+        const unlocalizedPath = stripLocale(rawPath, i18n === null || i18n === void 0 ? void 0 : i18n.locales);
+        const middlewarePath = matchMiddleware(middleware, unlocalizedPath);
+        // If a file matches middleware it can't be offloaded to the CDN, and needs to stay at the origin to be served by next/server
+        if (middlewarePath) {
+            matchingMiddleware.add(middlewarePath);
+            matchedPages.add(rawPath);
+            return;
+        }
+        return limit(moveFile, filePath);
+    });
+    await Promise.all(promises);
+    console.log(`Moved ${files.length} files`);
+    if (matchedPages.size !== 0) {
+        console.log(yellowBright(outdent `
+        Skipped moving ${matchedPages.size} ${matchedPages.size === 1 ? 'file because it matches' : 'files because they match'} middleware, so cannot be deployed to the CDN and will be served from the origin instead. 
+        This is fine, but we're letting you know because it may not be what you expect.
+      `));
+        console.log(outdent `
+        The following middleware matched statically-rendered pages:
+
+        ${yellowBright([...matchingMiddleware].map((mid) => `- /${mid}/_middleware`).join('\n'))}
+
+        ────────────────────────────────────────────────────────────────
+      `);
+        // There could potentially be thousands of matching pages, so we don't want to spam the console with this
+        if (matchedPages.size < 50) {
+            console.log(outdent `
+          The following files matched middleware and were not moved to the CDN:
+
+          ${yellowBright([...matchedPages].map((mid) => `- ${mid}`).join('\n'))}
+
+          ────────────────────────────────────────────────────────────────
+        `);
+        }
+    }
+    if (matchedRedirects.size !== 0 || matchedRewrites.size !== 0) {
+        console.log(yellowBright(outdent `
+        Skipped moving ${matchedRedirects.size + matchedRewrites.size} files because they match redirects or beforeFiles rewrites, so cannot be deployed to the CDN and will be served from the origin instead.
+      `));
+        if (matchedRedirects.size < 50 && matchedRedirects.size !== 0) {
+            console.log(outdent `
+          The following files matched redirects and were not moved to the CDN:
+
+          ${yellowBright([...matchedRedirects].map((mid) => `- ${mid}`).join('\n'))}
+
+          ────────────────────────────────────────────────────────────────
+        `);
+        }
+        if (matchedRewrites.size < 50 && matchedRewrites.size !== 0) {
+            console.log(outdent `
+          The following files matched beforeFiles rewrites and were not moved to the CDN:
+
+          ${yellowBright([...matchedRewrites].map((mid) => `- ${mid}`).join('\n'))}
+
+          ────────────────────────────────────────────────────────────────
+        `);
+        }
+    }
+    // Write the manifest for use in the serverless functions
+    await writeJson(join(netlifyConfig.build.publish, 'static-manifest.json'), files);
+    if (i18n === null || i18n === void 0 ? void 0 : i18n.defaultLocale) {
+        // Copy the default locale into the root
+        const defaultLocaleDir = join(netlifyConfig.build.publish, i18n.defaultLocale);
+        if (existsSync(defaultLocaleDir)) {
+            await copy(defaultLocaleDir, `${netlifyConfig.build.publish}/`);
+        }
+    }
+};
+exports.movePublicFiles = async ({ appDir, publish }) => {
+    const publicDir = join(appDir, 'public');
+    if (existsSync(publicDir)) {
+        await copy(publicDir, `${publish}/`);
+    }
+};
+/* eslint-enable max-lines */

package/lib/helpers/functions.js

@@ -1,6 +1,6 @@
-const { join, relative } = require('path');
 const { copyFile, ensureDir, writeFile, writeJSON } = require('fs-extra');
-const { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, IMAGE_FUNCTION_NAME, ODB_PATH } = require('../constants');
+const { join, relative } = require('pathe');
+const { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, IMAGE_FUNCTION_NAME } = require('../constants');
 const getHandler = require('../templates/getHandler');
 const { getPageResolver } = require('../templates/getPageResolver');
 const DEFAULT_FUNCTIONS_SRC = 'netlify/functions';
@@ -14,6 +14,7 @@ exports.generateFunctions = async ({ FUNCTIONS_SRC = DEFAULT_FUNCTIONS_SRC, INTE
         await ensureDir(join(functionsDir, func));
         await writeFile(join(functionsDir, func, `${func}.js`), handlerSource);
         await copyFile(bridgeFile, join(functionsDir, func, 'bridge.js'));
+        await copyFile(join(__dirname, '..', '..', 'lib', 'templates', 'handlerUtils.js'), join(functionsDir, func, 'handlerUtils.js'));
     };
     await writeHandler(HANDLER_FUNCTION_NAME, false);
     await writeHandler(ODB_FUNCTION_NAME, true);
@@ -50,7 +51,7 @@ exports.setupImageFunction = async ({ constants: { INTERNAL_FUNCTIONS_SRC, FUNCT
         status: 301,
     }, {
         from: `${basePath}/${IMAGE_FUNCTION_NAME}/*`,
-        to: `/.netlify/${ODB_PATH}/${IMAGE_FUNCTION_NAME}`,
+        to: `/.netlify/builders/${IMAGE_FUNCTION_NAME}`,
         status: 200,
     });
     if (basePath) {

package/lib/helpers/verification.js

@@ -1,13 +1,11 @@
+const { existsSync, promises } = require('fs');
 const path = require('path');
-const { yellowBright } = require('chalk');
-const { existsSync } = require('fs-extra');
+const { relative } = require('path');
+const { yellowBright, greenBright, blueBright, redBright, reset } = require('chalk');
+const { async: StreamZip } = require('node-stream-zip');
 const outdent = require('outdent');
+const prettyBytes = require('pretty-bytes');
 const { satisfies } = require('semver');
-exports.verifyBuildTarget = (target) => {
-    if (target !== 'server') {
-        console.log(yellowBright `Setting target to ${target} is no longer required. You should check if target=server works for you.`);
-    }
-};
 // This is when nft support was added
 const REQUIRED_BUILD_VERSION = '>=18.16.0';
 exports.verifyNetlifyBuildVersion = ({ IS_LOCAL, NETLIFY_BUILD_VERSION, failBuild }) => {
@@ -19,25 +17,77 @@ exports.verifyNetlifyBuildVersion = ({ IS_LOCAL, NETLIFY_BUILD_VERSION, failBuil
     `);
     }
 };
+exports.checkForOldFunctions = async ({ functions }) => {
+    const oldFunctions = (await functions.list()).filter(({ name }) => name.startsWith('next_'));
+    if (oldFunctions.length !== 0) {
+        console.log(yellowBright(outdent `
+        We have found the following functions in your site that seem to be left over from the old Next.js plugin (v3). We have guessed this because the name starts with "next_".
+
+        ${reset(oldFunctions.map(({ name }) => `- ${name}`).join('\n'))}
+
+        If they were created by the old plugin, these functions are likely to cause errors so should be removed. You can do this by deleting the following directories:
+
+        ${reset(oldFunctions.map(({ mainFile }) => `- ${path.relative(process.cwd(), path.dirname(mainFile))}`).join('\n'))}
+      `));
+    }
+};
 exports.checkNextSiteHasBuilt = ({ publish, failBuild }) => {
     if (!existsSync(path.join(publish, 'BUILD_ID'))) {
         return failBuild(outdent `
       The directory "${path.relative(process.cwd(), publish)}" does not contain a Next.js production build. Perhaps the build command was not run, or you specified the wrong publish directory. 
       In most cases it should be set to the site's ".next" directory path, unless you have chosen a custom "distDir" in your Next config. 
       If you are using "next export" then the Essential Next.js plugin should be removed. See https://ntl.fyi/remove-plugin for details.
-      `);
+    `);
     }
     if (existsSync(path.join(publish, 'export-detail.json'))) {
         failBuild(outdent `
       Detected that "next export" was run, but site is incorrectly publishing the ".next" directory.
       This plugin is not needed for "next export" so should be removed, and publish directory set to "out".
-      See https://ntl.fyi/remove-plugin for more details on how to remove this plugin.`);
+      See https://ntl.fyi/remove-plugin for more details on how to remove this plugin.
+    `);
     }
 };
 exports.checkForRootPublish = ({ publish, failBuild }) => {
     if (path.resolve(publish) === path.resolve('.')) {
         failBuild(outdent `
       Your publish directory is pointing to the base directory of your site. This is not supported for Next.js sites, and is probably a mistake. 
-      In most cases it should be set to ".next", unless you have chosen a custom "distDir" in your Next config, or the Next site is in a subdirectory.`);
+      In most cases it should be set to ".next", unless you have chosen a custom "distDir" in your Next config, or the Next site is in a subdirectory.
+    `);
+    }
+};
+// 50MB, which is the documented max, though the hard max seems to be higher
+const LAMBDA_MAX_SIZE = 1024 * 1024 * 50;
+exports.checkZipSize = async (file, maxSize = LAMBDA_MAX_SIZE) => {
+    if (!existsSync(file)) {
+        console.warn(`Could not check zip size because ${file} does not exist`);
+        return;
+    }
+    const size = await promises.stat(file).then(({ size }) => size);
+    if (size < maxSize) {
+        return;
+    }
+    // We don't fail the build, because the actual hard max size is larger so it might still succeed
+    console.log(redBright(outdent `
+      The function zip ${yellowBright(relative(process.cwd(), file))} size is ${prettyBytes(size)}, which is larger than the maximum supported size of ${prettyBytes(maxSize)}.
+      There are a few reasons this could happen. You may have accidentally bundled a large dependency, or you might have a
+      large number of pre-rendered pages included.
+    `));
+    const zip = new StreamZip({ file });
+    console.log(`Contains ${await zip.entriesCount} files`);
+    const sortedFiles = Object.values(await zip.entries()).sort((a, b) => b.size - a.size);
+    const largest = {};
+    for (let i = 0; i < 10 && i < sortedFiles.length; i++) {
+        largest[`${i + 1}`] = {
+            File: sortedFiles[i].name,
+            'Compressed Size': prettyBytes(sortedFiles[i].compressedSize),
+            'Uncompressed Size': prettyBytes(sortedFiles[i].size),
+        };
     }
+    console.log(yellowBright `\n\nThese are the largest files in the zip:`);
+    console.table(largest);
+    console.log(greenBright `\n\nFor more information on fixing this, see ${blueBright `https://ntl.fyi/large-next-functions`}`);
 };
+exports.logBetaMessage = () => console.log(greenBright(outdent `
+        Thank you for trying the Essential Next.js beta plugin. 
+        Please share feedback (both good and bad) at ${blueBright `https://ntl.fyi/next-beta-feedback`}
+      `));

package/lib/index.js

@@ -1,28 +1,36 @@
-// @ts-check
 const { join, relative } = require('path');
-const { copy, existsSync } = require('fs-extra');
+const { ODB_FUNCTION_NAME } = require('./constants');
 const { restoreCache, saveCache } = require('./helpers/cache');
 const { getNextConfig, configureHandlerFunctions, generateRedirects } = require('./helpers/config');
+const { moveStaticPages, movePublicFiles } = require('./helpers/files');
 const { generateFunctions, setupImageFunction, generatePagesResolver } = require('./helpers/functions');
-const { verifyNetlifyBuildVersion, checkNextSiteHasBuilt, verifyBuildTarget, checkForRootPublish, } = require('./helpers/verification');
+const { verifyNetlifyBuildVersion, checkNextSiteHasBuilt, checkForRootPublish, logBetaMessage, checkZipSize, checkForOldFunctions, } = require('./helpers/verification');
+/** @type import("@netlify/build").NetlifyPlugin */
 module.exports = {
     async onPreBuild({ constants, netlifyConfig, utils: { build: { failBuild }, cache, }, }) {
+        var _a;
+        logBetaMessage();
         const { publish } = netlifyConfig.build;
         checkForRootPublish({ publish, failBuild });
         verifyNetlifyBuildVersion({ failBuild, ...constants });
         await restoreCache({ cache, publish });
+        (_a = netlifyConfig.build).environment || (_a.environment = {});
+        // eslint-disable-next-line unicorn/consistent-destructuring
+        netlifyConfig.build.environment.NEXT_PRIVATE_TARGET = 'server';
     },
     async onBuild({ constants, netlifyConfig, utils: { build: { failBuild }, }, }) {
         const { publish } = netlifyConfig.build;
         checkNextSiteHasBuilt({ publish, failBuild });
-        const { appDir, basePath, i18n, images, target } = await getNextConfig({ publish, failBuild });
-        verifyBuildTarget(target);
-        configureHandlerFunctions({ netlifyConfig, publish: relative(process.cwd(), publish) });
+        const { appDir, basePath, i18n, images, target, ignore } = await getNextConfig({ publish, failBuild });
+        configureHandlerFunctions({ netlifyConfig, ignore, publish: relative(process.cwd(), publish) });
         await generateFunctions(constants, appDir);
         await generatePagesResolver({ netlifyConfig, target, constants });
-        const publicDir = join(appDir, 'public');
-        if (existsSync(publicDir)) {
-            await copy(publicDir, `${publish}/`);
+        await movePublicFiles({ appDir, publish });
+        if (process.env.EXPERIMENTAL_MOVE_STATIC_PAGES) {
+            console.log("The flag 'EXPERIMENTAL_MOVE_STATIC_PAGES' is no longer required, as it is now the default. To disable this behavior, set the env var 'SERVE_STATIC_FILES_FROM_ORIGIN' to 'true'");
+        }
+        if (!process.env.SERVE_STATIC_FILES_FROM_ORIGIN) {
+            await moveStaticPages({ target, failBuild, netlifyConfig, i18n });
         }
         await setupImageFunction({ constants, imageconfig: images, netlifyConfig, basePath });
         await generateRedirects({
@@ -31,7 +39,12 @@ module.exports = {
             i18n,
         });
     },
-    async onPostBuild({ netlifyConfig, utils: { cache } }) {
-        return saveCache({ cache, publish: netlifyConfig.build.publish });
+    async onPostBuild({ netlifyConfig, utils: { cache, functions }, constants: { FUNCTIONS_DIST } }) {
+        await saveCache({ cache, publish: netlifyConfig.build.publish });
+        await checkForOldFunctions({ functions });
+        await checkZipSize(join(FUNCTIONS_DIST, `${ODB_FUNCTION_NAME}.zip`));
+    },
+    onEnd() {
+        logBetaMessage();
     },
 };

package/lib/templates/getHandler.js

@@ -1,30 +1,80 @@
+const { promises, existsSync } = require('fs');
 const { Server } = require('http');
+const { tmpdir } = require('os');
 const path = require('path');
 const { Bridge } = require('@vercel/node/dist/bridge');
+const { downloadFile } = require('./handlerUtils');
 const makeHandler = () => 
 // We return a function and then call `toString()` on it to serialise it as the launcher function
-(conf, app) => {
+// eslint-disable-next-line max-params
+(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
+        require.resolve('./pages.js');
+    }
+    catch { }
+    // We don't want to write ISR files to disk in the lambda environment
+    conf.experimental.isrFlushToDisk = false;
+    // Set during the request as it needs the host header. Hoisted so we can define the function once
+    let base;
+    // Only do this if we have some static files moved to the CDN
+    if (staticManifest.length !== 0) {
+        // These are static page files that have been removed from the function bundle
+        // In most cases these are served from the CDN, but for rewrites Next may try to read them
+        // from disk. We need to intercept these and load them from the CDN instead
+        // Sadly the only way to do this is to monkey-patch fs.promises. Yeah, I know.
+        const staticFiles = new Set(staticManifest);
+        // Yes, you can cache stuff locally in a Lambda
+        const cacheDir = path.join(tmpdir(), 'next-static-cache');
+        // Grab the real fs.promises.readFile...
+        const readfileOrig = promises.readFile;
+        // ...then money-patch it to see if it's requesting a CDN file
+        promises.readFile = async (file, options) => {
+            // We only care about page files
+            if (file.startsWith(pageRoot)) {
+                // We only want the part after `pages/`
+                const filePath = file.slice(pageRoot.length + 1);
+                // Is it in the CDN and not local?
+                if (staticFiles.has(filePath) && !existsSync(file)) {
+                    // This name is safe to use, because it's one that was already created by Next
+                    const cacheFile = path.join(cacheDir, filePath);
+                    // Have we already cached it? We ignore the cache if running locally to avoid staleness
+                    if ((!existsSync(cacheFile) || process.env.NETLIFY_DEV) && base) {
+                        await promises.mkdir(path.dirname(cacheFile), { recursive: true });
+                        // Append the path to our host and we can load it like a regular page
+                        const url = `${base}/${filePath}`;
+                        await downloadFile(url, cacheFile);
+                    }
+                    // Return the cache file
+                    return readfileOrig(cacheFile, options);
+                }
+            }
+            return readfileOrig(file, options);
+        };
+    }
     let NextServer;
     try {
         // next >= 11.0.1. Yay breaking changes in patch releases!
         NextServer = require('next/dist/server/next-server').default;
     }
-    catch {
+    catch (error) {
+        if (!error.message.includes("Cannot find module 'next/dist/server/next-server'")) {
+            // A different error, so rethrow it
+            throw error;
+        }
         // Probably an old version of next
     }
-    // This is just so nft knows about the page entrypoints
-    try {
-        // eslint-disable-next-line node/no-missing-require
-        require.resolve('./pages.js');
-    }
-    catch { }
     if (!NextServer) {
         try {
             // next < 11.0.1
             // eslint-disable-next-line node/no-missing-require, import/no-unresolved
             NextServer = require('next/dist/next-server/server/next-server').default;
         }
-        catch {
+        catch (error) {
+            if (!error.message.includes("Cannot find module 'next/dist/next-server/server/next-server'")) {
+                throw error;
+            }
             throw new Error('Could not find Next.js server');
         }
     }
@@ -46,6 +96,18 @@ const makeHandler = () =>
     const bridge = new Bridge(server);
     bridge.listen();
     return async (event, context) => {
+        var _a, _b, _c;
+        // Ensure that paths are encoded - but don't double-encode them
+        event.path = new URL(event.path, event.rawUrl).pathname;
+        // Next expects to be able to parse the query from the URL
+        const query = new URLSearchParams(event.queryStringParameters).toString();
+        event.path = query ? `${event.path}?${query}` : event.path;
+        // Only needed if we're intercepting static files
+        if (staticManifest.length !== 0) {
+            const { host } = event.headers;
+            const protocol = event.headers['x-forwarded-proto'] || 'http';
+            base = `${protocol}://${host}`;
+        }
         const { headers, ...result } = await bridge.launcher(event, context);
         /** @type import("@netlify/functions").HandlerResponse */
         // Convert all headers to multiValueHeaders
@@ -58,12 +120,17 @@ const makeHandler = () =>
                 multiValueHeaders[key] = [headers[key]];
             }
         }
-        if (multiValueHeaders['set-cookie'] &&
-            multiValueHeaders['set-cookie'][0] &&
-            multiValueHeaders['set-cookie'][0].includes('__prerender_bypass')) {
+        if ((_b = (_a = multiValueHeaders['set-cookie']) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.includes('__prerender_bypass')) {
             delete multiValueHeaders.etag;
             multiValueHeaders['cache-control'] = ['no-cache'];
         }
+        // Sending SWR headers causes undefined behaviour with the Netlify CDN
+        const cacheHeader = (_c = multiValueHeaders['cache-control']) === null || _c === void 0 ? void 0 : _c[0];
+        if (cacheHeader === null || cacheHeader === void 0 ? void 0 : cacheHeader.includes('stale-while-revalidate')) {
+            console.log({ cacheHeader });
+            multiValueHeaders['cache-control'] = ['public, max-age=0, must-revalidate'];
+        }
+        multiValueHeaders['x-render-mode'] = [mode];
         return {
             ...result,
             multiValueHeaders,
@@ -73,13 +140,22 @@ const makeHandler = () =>
 };
 const getHandler = ({ isODB = false, publishDir = '../../../.next', appDir = '../../..' }) => `
 const { Server } = require("http");
+const { tmpdir } = require('os')
+const { promises, existsSync } = require("fs");
 // We copy the file here rather than requiring from the node module
 const { Bridge } = require("./bridge");
+const { downloadFile } = require('./handlerUtils')
+
 const { builder } = require("@netlify/functions");
 const { config }  = require("${publishDir}/required-server-files.json")
+let staticManifest 
+try {
+  staticManifest = require("${publishDir}/static-manifest.json")
+} catch {}
 const path = require("path");
+const pageRoot = path.resolve(path.join(__dirname, "${publishDir}", config.target === "server" ? "server" : "serverless", "pages"));
 exports.handler = ${isODB
-    ? `builder((${makeHandler().toString()})(config, "${appDir}"));`
-    : `(${makeHandler().toString()})(config, "${appDir}");`}
+    ? `builder((${makeHandler().toString()})(config, "${appDir}", pageRoot, staticManifest, 'odb'));`
+    : `(${makeHandler().toString()})(config, "${appDir}", pageRoot, staticManifest, 'ssr');`}
 `;
 module.exports = getHandler;

package/lib/templates/handlerUtils.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadFile = void 0;
+const fs_1 = require("fs");
+const http_1 = __importDefault(require("http"));
+const https_1 = __importDefault(require("https"));
+const stream_1 = require("stream");
+const util_1 = require("util");
+const streamPipeline = (0, util_1.promisify)(stream_1.pipeline);
+const downloadFile = async (url, destination) => {
+    console.log(`Downloading ${url} to ${destination}`);
+    const httpx = url.startsWith('https') ? https_1.default : http_1.default;
+    await new Promise((resolve, reject) => {
+        const req = httpx.get(url, { timeout: 10000 }, (response) => {
+            if (response.statusCode < 200 || response.statusCode > 299) {
+                reject(new Error(`Failed to download ${url}: ${response.statusCode} ${response.statusMessage || ''}`));
+                return;
+            }
+            const fileStream = (0, fs_1.createWriteStream)(destination);
+            streamPipeline(response, fileStream)
+                .then(resolve)
+                .catch((error) => {
+                console.log(`Error downloading ${url}`, error);
+                reject(error);
+            });
+        });
+        req.on('error', (error) => {
+            console.log(`Error downloading ${url}`, error);
+            reject(error);
+        });
+    });
+};
+exports.downloadFile = downloadFile;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.10",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "lib/index.js",
   "files": [
@@ -10,7 +10,7 @@
   "scripts": {
     "build:demo": "next build demo",
     "cy:open": "cypress open --config-file cypress/config/all.json",
-    "cy:run": "cypress run --config-file cypress/config/all.json",
+    "cy:run": "cypress run --config-file ../cypress/config/ci.json",
     "dev:demo": "next dev demo",
     "format": "run-s format:check-fix:*",
     "format:ci": "run-s format:check:*",
@@ -52,14 +52,19 @@
   },
   "homepage": "https://github.com/netlify/netlify-plugin-nextjs#readme",
   "dependencies": {
-    "@netlify/functions": "^0.7.2",
+    "@netlify/functions": "^0.10.0",
     "@netlify/ipx": "^0.0.7",
     "@vercel/node": "^1.11.2-canary.4",
     "chalk": "^4.1.2",
-    "destr": "^1.1.0",
     "fs-extra": "^10.0.0",
+    "globby": "^11.0.4",
     "moize": "^6.1.0",
+    "node-fetch": "^2.6.6",
+    "node-stream-zip": "^1.15.0",
     "outdent": "^0.8.0",
+    "p-limit": "^3.1.0",
+    "pathe": "^0.2.0",
+    "pretty-bytes": "^5.6.0",
     "semver": "^7.3.5",
     "slash": "^3.0.0",
     "tiny-glob": "^0.2.9"
@@ -67,18 +72,20 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
-    "@netlify/eslint-config-node": "^3.3.0",
+    "@netlify/build": "^18.25.2",
+    "@netlify/eslint-config-node": "^3.3.7",
     "@testing-library/cypress": "^8.0.1",
+    "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.0.2",
     "@types/mocha": "^9.0.0",
     "babel-jest": "^27.2.5",
     "cpy": "^8.1.2",
-    "cypress": "^8.5.0",
+    "cypress": "^9.0.0",
     "eslint-config-next": "^11.0.0",
     "husky": "^4.3.0",
     "jest": "^27.0.0",
     "netlify-plugin-cypress": "^2.2.0",
-    "next": "^11.1.3-canary.70",
+    "next": "^12.0.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "react": "^17.0.1",