@netlify/plugin-nextjs 4.0.0-beta.5 → 4.0.0-beta.9

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">
@@ -16,16 +16,19 @@
 
 ## What's new in this version
 
-Version 4 is a complete rewrite of the Essential Next.js plugin. For full details of everything that's new, see [the v4 release notes](https://github.com/netlify/netlify-plugin-nextjs/blob/main/docs/release-notes/v4.md)
+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"
@@ -34,14 +37,27 @@ publish = ".next"
 package = "@netlify/plugin-nextjs"
 ```
 
-If you previously set `target: "serverless"` or 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. 
+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.
 
-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 are using Nx, then you will need to point `publish` to the folder inside `dist`, e.g. `dist/apps/myapp/.next`.
 
-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 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 are using Nx, then you will need to point `publish` to the folder inside `dist`, e.g. `dist/apps/myapp/.next`. 
+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).
+Please share any thoughts, feedback or questions about the beta
+[in our discussion](https://github.com/netlify/netlify-plugin-nextjs/discussions/706).

package/lib/helpers/config.js

@@ -59,24 +59,13 @@ exports.generateRedirects = async ({ netlifyConfig, basePath, i18n }) => {
     if (i18n) {
         netlifyConfig.redirects.push({ from: `${basePath}/:locale/_next/static/*`, to: `/static/:splat`, status: 200 });
     }
-    const staticManifest = join(netlifyConfig.build.publish, 'static-manifest.json');
-    if (process.env.EXPERIMENTAL_MOVE_STATIC_PAGES && existsSync(staticManifest)) {
-        // Static page files need to have a forced redirect for preview mode. Otherwise it's non-forced
-        const staticFiles = await readJSON(staticManifest);
-        netlifyConfig.redirects.push(...staticFiles.map((file) => ({
-            from: `${basePath}/${file}`,
-            to: HANDLER_FUNCTION_PATH,
-            status: 200,
-            force: true,
-            conditions: { Cookie: ['__prerender_bypass', '__next_preview_data'] },
-        })));
-    }
     // This is only used in prod, so dev uses `next dev` directly
     netlifyConfig.redirects.push({ from: `${basePath}/_next/static/*`, to: `/static/:splat`, status: 200 }, {
         from: `${basePath}/*`,
         to: HANDLER_FUNCTION_PATH,
         status: 200,
         conditions: { Cookie: ['__prerender_bypass', '__next_preview_data'] },
+        force: true,
     }, ...redirects.map((redirect) => ({
         from: `${basePath}${redirect}`,
         to: ODB_FUNCTION_PATH,
@@ -114,7 +103,7 @@ exports.configureHandlerFunctions = ({ netlifyConfig, publish, ignore = [] }) =>
         (_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`, `${publish}/static/chunks/webpack-middleware*.js`, ...ignore.map((path) => `!${slash(path)}`));
+        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`);

package/lib/helpers/files.js

@@ -1,43 +1,99 @@
 //  @ts-check
+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 TEST_ROUTE = /\/\[[^/]+?](?=\/|$)/;
+const slash = require('slash');
+const TEST_ROUTE = /(|\/)\[[^/]+?](\/|\.html|$)/;
 const isDynamicRoute = (route) => TEST_ROUTE.test(route);
-exports.moveStaticPages = async ({ netlifyConfig, target, i18n, failBuild }) => {
-    const root = join(netlifyConfig.build.publish, target === 'server' ? 'server' : 'serverless');
-    const pagesManifestPath = join(root, 'pages-manifest.json');
-    if (!existsSync(pagesManifestPath)) {
-        failBuild(`Could not find pages manifest at ${pagesManifestPath}`);
+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}/`)));
+exports.matchMiddleware = matchMiddleware;
+exports.stripLocale = stripLocale;
+exports.isDynamicRoute = isDynamicRoute;
+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 files = [];
     const moveFile = async (file) => {
         const source = join(root, file);
-        // Trim the initial "pages"
-        const filePath = file.slice(6);
-        files.push(filePath);
-        const dest = join(netlifyConfig.build.publish, filePath);
+        files.push(file);
+        const dest = join(netlifyConfig.build.publish, file);
         await move(source, dest);
     };
-    const pagesManifest = await readJson(pagesManifestPath);
-    // Arbitrary limit of 10 concurrent file moves
-    const limit = pLimit(10);
-    const promises = Object.entries(pagesManifest).map(async ([route, filePath]) => {
-        if (isDynamicRoute(route) ||
-            !(filePath.endsWith('.html') || filePath.endsWith('.json')) ||
-            filePath.endsWith('/404.html') ||
-            filePath.endsWith('/500.html')) {
+    // 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();
+    // 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);
+        if (isDynamicRoute(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} page files`);
+    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'))}
+        `);
+        }
+    }
     // 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
-        await copy(join(netlifyConfig.build.publish, i18n.defaultLocale), `${netlifyConfig.build.publish}/`);
+        const defaultLocaleDir = join(netlifyConfig.build.publish, i18n.defaultLocale);
+        if (existsSync(defaultLocaleDir)) {
+            await copy(defaultLocaleDir, `${netlifyConfig.build.publish}/`);
+        }
     }
 };
 exports.movePublicFiles = async ({ appDir, publish }) => {

package/lib/helpers/verification.js

@@ -1,7 +1,7 @@
 const { existsSync, promises } = require('fs');
 const path = require('path');
 const { relative } = require('path');
-const { yellowBright, greenBright, blueBright, redBright } = require('chalk');
+const { yellowBright, greenBright, blueBright, redBright, reset } = require('chalk');
 const { async: StreamZip } = require('node-stream-zip');
 const outdent = require('outdent');
 const prettyBytes = require('pretty-bytes');
@@ -17,26 +17,42 @@ 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
@@ -52,11 +68,9 @@ exports.checkZipSize = async (file, maxSize = LAMBDA_MAX_SIZE) => {
     }
     // 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.
-  
+      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`);

package/lib/index.js

@@ -1,12 +1,11 @@
-// @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, checkForRootPublish, logBetaMessage, checkZipSize, } = 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;
@@ -28,6 +27,9 @@ module.exports = {
         await generatePagesResolver({ netlifyConfig, target, constants });
         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 });
@@ -37,8 +39,9 @@ module.exports = {
             i18n,
         });
     },
-    async onPostBuild({ netlifyConfig, utils: { cache }, constants: { FUNCTIONS_DIST } }) {
+    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() {

package/lib/templates/getHandler.js

@@ -103,6 +103,8 @@ const makeHandler = () =>
     bridge.listen();
     return async (event, context) => {
         var _a, _b, _c, _d;
+        // 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.9",
   "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,11 +52,12 @@
   },
   "homepage": "https://github.com/netlify/netlify-plugin-nextjs#readme",
   "dependencies": {
-    "@netlify/functions": "^0.8.0",
+    "@netlify/functions": "^0.9.0",
     "@netlify/ipx": "^0.0.7",
     "@vercel/node": "^1.11.2-canary.4",
     "chalk": "^4.1.2",
     "fs-extra": "^10.0.0",
+    "globby": "^11.0.4",
     "moize": "^6.1.0",
     "node-fetch": "^2.6.6",
     "node-stream-zip": "^1.15.0",
@@ -71,7 +72,8 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
-    "@netlify/eslint-config-node": "^3.3.0",
+    "@netlify/build": "^18.25.1",
+    "@netlify/eslint-config-node": "^3.3.7",
     "@testing-library/cypress": "^8.0.1",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.0.2",