Merge branch 'main' into fix/windows-require-path

Author: ascorbic

README.md

@@ -31,7 +31,11 @@ publish = ".next"
 package = "@netlify/plugin-nextjs"
 ```
 
-If you previously set `target: "serverless"`, `node_bundler` or `external_node_modules` in your `next.config.js` these are no longer needed and can be removed.
+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 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`. 
 
 ## Beta feedback
 

docs/large-functions.md

@@ -0,0 +1,16 @@
+## Troubleshooting large functions
+
+You may see an error about generated functions being too large. This is because when deploying your site it is packaged into a zipfile, which is limited by AWS to 50MB in size. 
+There are two possible causes for this, each with its own solution. The list of largest files shown in the build logs will help you see what the cause is.
+
+- **Large dependencies**
+    This is the most common cause of the problem. Some node modules are very large, mostly those that include native modules. Examples include `electron` and `chromium`. The function bundler is usually able to find out which modules are actually used by your code, but sometimes it will incorrectly include unneeded modules. If this is the case, you can either remove the module from your dependencies if you installed it yourself, or exclude it manually by adding something like this to your `netlify.toml`, changing the value according to the problematic module:
+
+    ```toml
+    [functions]
+    excluded_files = "node_modules/electron/**/*"
+    ```
+    If you do need large modules (e.g. if you are running Puppeteer in a Next API route), consider changing to a Netlify function.
+
+- **Large numbers of pre-rendered pages**
+If you have a very large number of pre-rendered pages, these can take up a lot of space in the function. There are two approaches to fixing this. One is to consider deferring the building of the pages. If you set `fallback = "blocking"`, the rendering will be deferred until the first user requests the page. This is a good choice for low-traffic pages. It reduces build and deploy time, and can make your bundle a lot smaller. The other option is to enable an experimental feature that moves static files out of the function bundle. To do this, set the environment variable `EXPERIMENTAL_MOVE_STATIC_PAGES` to true.

src/helpers/config.js

@@ -1,6 +1,7 @@
 // @ts-check
 const { readJSON } = require('fs-extra')
 const { join, dirname, relative } = require('pathe')
+const slash = require('slash')
 
 const defaultFailBuild = (message, { error }) => {
   throw new Error(`${message}\n${error && error.stack}`)
@@ -131,7 +132,7 @@ exports.configureHandlerFunctions = ({ netlifyConfig, publish, ignore = [] }) =>
       `${publish}/serverless/**`,
       `${publish}/*.json`,
       `${publish}/BUILD_ID`,
-      ...ignore.map((path) => `!${path}`),
+      ...ignore.map((path) => `!${slash(path)}`),
     )
 
     const nextRoot = resolveModuleRoot('next')

src/helpers/verification.js

@@ -59,13 +59,13 @@ exports.checkForRootPublish = ({ publish, failBuild }) => {
 // 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) => {
+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 < LAMBDA_MAX_SIZE) {
+  if (size < maxSize) {
     return
   }
   // We don't fail the build, because the actual hard max size is larger so it might still succeed
@@ -74,7 +74,7 @@ exports.checkZipSize = async (file) => {
 
     The function zip ${yellowBright(relative(process.cwd(), file))} size is ${prettyBytes(
       size,
-    )}, which is larger than the maximum supported size of ${prettyBytes(LAMBDA_MAX_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.
   
@@ -85,7 +85,7 @@ exports.checkZipSize = async (file) => {
   const sortedFiles = Object.values(await zip.entries()).sort((a, b) => b.size - a.size)
 
   const largest = {}
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < 10 && i < sortedFiles.length; i++) {
     largest[`${i + 1}`] = {
       File: sortedFiles[i].name,
       'Compressed Size': prettyBytes(sortedFiles[i].compressedSize),
@@ -94,14 +94,17 @@ exports.checkZipSize = async (file) => {
   }
   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 at ${blueBright`https://ntl.fyi/next-beta-feedback`}
+        Please share feedback (both good and bad) at ${blueBright`https://ntl.fyi/next-beta-feedback`}
       `,
     ),
   )

src/templates/getHandler.js

@@ -136,6 +136,11 @@ const makeHandler =
         multiValueHeaders['cache-control'] = ['no-cache']
       }
 
+      // Sending SWR headers causes undefined behaviour with the Netlify CDN
+      if (multiValueHeaders['cache-control']?.[0]?.includes('stale-while-revalidate')) {
+        multiValueHeaders['cache-control'] = ['public, max-age=0, must-revalidate']
+      }
+
       return {
         ...result,
         multiValueHeaders,

src/templates/getPageResolver.js

@@ -1,8 +1,5 @@
-const {
-  posix: { resolve, join, relative },
-} = require('path')
-
 const { outdent } = require('outdent')
+const { resolve, join, relative } = require('pathe')
 const slash = require('slash')
 const glob = require('tiny-glob')
 
@@ -13,13 +10,13 @@ const { HANDLER_FUNCTION_NAME } = require('../constants')
 
 exports.getPageResolver = async ({ netlifyConfig, target }) => {
   const functionDir = resolve(join('.netlify', 'functions', HANDLER_FUNCTION_NAME))
-  const root = join(netlifyConfig.build.publish, target === 'server' ? 'server' : 'serverless', 'pages')
+  const root = join(slash(netlifyConfig.build.publish), target === 'server' ? 'server' : 'serverless', 'pages')
 
   const pages = await glob('**/*.js', {
     cwd: root,
     dot: true,
   })
-  const pageFiles = pages.map((page) => `require.resolve('${relative(functionDir, join(root, slash(page)))}')`).sort()
+  const pageFiles = pages.map((page) => `require.resolve('${relative(functionDir, join(root, page))}')`).sort()
 
   return outdent`
     // This file is purely to allow nft to know about these pages. It should be temporary.

test/index.js

@@ -1,4 +1,4 @@
-const { writeJSON, unlink, existsSync, readFileSync, copy, ensureDir } = require('fs-extra')
+const { writeJSON, unlink, existsSync, readFileSync, copy, ensureDir, readJson } = require('fs-extra')
 const path = require('path')
 const process = require('process')
 const os = require('os')
@@ -41,6 +41,14 @@ const changeCwd = function (cwd) {
 const onBuildHasRun = (netlifyConfig) =>
   Boolean(netlifyConfig.functions[HANDLER_FUNCTION_NAME]?.included_files?.some((file) => file.includes('BUILD_ID')))
 
+const rewriteAppDir = async function () {
+  const manifest = path.join('.next', 'required-server-files.json')
+  const manifestContent = await readJson(manifest)
+  manifestContent.appDir = process.cwd()
+
+  await writeJSON(manifest, manifestContent)
+}
+
 // Move .next from sample project to current directory
 const moveNextDist = async function () {
   await stubModules(['next', 'sharp'])
@@ -225,20 +233,17 @@ describe('onBuild()', () => {
   })
 
   test('generates entrypoints with correct references', async () => {
+    await moveNextDist()
+    await rewriteAppDir()
+
+    await plugin.onBuild(defaultArgs)
+
     const handlerFile = path.join(
-      SAMPLE_PROJECT_DIR,
-      '.netlify',
-      'functions-internal',
+      constants.INTERNAL_FUNCTIONS_SRC,
       HANDLER_FUNCTION_NAME,
       `${HANDLER_FUNCTION_NAME}.js`,
     )
-    const odbHandlerFile = path.join(
-      SAMPLE_PROJECT_DIR,
-      '.netlify',
-      'functions-internal',
-      ODB_FUNCTION_NAME,
-      `${ODB_FUNCTION_NAME}.js`,
-    )
+    const odbHandlerFile = path.join(constants.INTERNAL_FUNCTIONS_SRC, ODB_FUNCTION_NAME, `${ODB_FUNCTION_NAME}.js`)
     expect(existsSync(handlerFile)).toBeTruthy()
     expect(existsSync(odbHandlerFile)).toBeTruthy()