Merge branch 'canary' into fix/incoming-message-cookies-type

.github/workflows/cancel.yml

@@ -0,0 +1,17 @@
+name: Cancel
+on:
+  pull_request_target:
+    types:
+      - edited
+      - synchronize
+
+jobs:
+  cancel:
+    name: 'Cancel Previous Runs'
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - uses: styfle/[email protected]
+        with:
+          workflow_id: 444921, 444987
+          access_token: ${{ github.token }}

errors/next-export-no-build-id.md

@@ -0,0 +1,10 @@
+# Could not find a production build
+
+#### Why This Error Occurred
+
+When running `next export` a production build is needed.
+
+#### Possible Ways to Fix It
+
+- Run `next build` to create a production build before running `next export`.
+- If your intention was to run the development server run `next dev` instead.

errors/production-start-no-build-id.md

@@ -0,0 +1,10 @@
+# Could not find a production build
+
+#### Why This Error Occurred
+
+When running `next start` or a custom server in production mode a production build is needed.
+
+#### Possible Ways to Fix It
+
+- Run `next build` to create a production build before booting up the production server.
+- If your intention was to run the development server run `next dev` instead.

examples/with-apollo/pages/client-only.js

@@ -8,7 +8,7 @@ const ClientOnlyPage = (props) => (
   <App>
     <Header />
     <InfoBox>
-      ℹ️ This page shows how use Apollo only in the client. If you{' '}
+      ℹ️ This page shows how to use Apollo only in the client. If you{' '}
       <a href="/client-only">reload</a> this page, you will see a loader since
       Apollo didn't fetch any data on the server. This is useful when the page
       doesn't have SEO requirements or blocking data fetching requirements.

examples/with-docker/Dockerfile.multistage

@@ -14,7 +14,7 @@ RUN yarn install --production --frozen-lockfile
 
 
 # Stage 2: And then copy over node_modules, etc from that stage to the smaller base image
-FROM mhart/alpine-node:base as production
+FROM mhart/alpine-node:slim as production
 
 WORKDIR /app
 

examples/with-electron/README.md

@@ -1,8 +1,8 @@
 # Electron application example
 
-This example show how you can use Next.js inside an Electron application to avoid a lot of configuration, use Next.js router as view and use server-render to speed up the initial render of the application.
+This example shows how you can use Next.js inside an Electron application to avoid a lot of configuration. It uses the Next.js router as view and server-render to speed up the initial render of the application.
 
-For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
+For development it's going to run an HTTP server and let Next.js handle routing. In production it uses `next export` to pre-generate HTML static files and uses them in your app instead of running an HTTP server.
 
 **You can find a detailed documentation about how to build Electron apps with Next.js [here](https://leo.im/2017/electron-next)!**
 

examples/with-facebook-pixel/README.md

@@ -1,6 +1,6 @@
 ## Example app using Facebook Pixel
 
-This example shows how to use Next.js along with Facebook Pixel. A [custom `App`](https://nextjs.org/docs/advanced-features/custom-app) is used to track route changes and send page views to Facebook Pixel. This example uses [react-facebook-pixel](https://www.npmjs.com/package/react-facebook-pixel).
+This example shows how to use Next.js along with Facebook Pixel. A custom [\_document](https://nextjs.org/docs/advanced-features/custom-document) is used to inject [base code](https://developers.facebook.com/docs/facebook-pixel/implementation/?locale=en_US). A [\_app](https://nextjs.org/docs/advanced-features/custom-app) is used to track route changes and send page views to Facebook Pixel.
 
 ## Deploy your own
 
@@ -24,6 +24,6 @@ Next, copy the `.env.local.example` file in this directory to `.env.local` (whic
 cp .env.local.example .env.local
 ```
 
-Set the `NEXT_PUBLIC_FACEBOOK_PIXEL_ID` variable in `.env.local` to match your facebook app's pixel ID. If not specified, tracking will be disabled.
+Set the `NEXT_PUBLIC_FACEBOOK_PIXEL_ID` variable in `.env.local` to match your facebook app's pixel ID.
 
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-facebook-pixel/package.json

@@ -9,8 +9,7 @@
   "dependencies": {
     "next": "latest",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-facebook-pixel": "^1.0.3"
+    "react-dom": "^16.13.1"
   },
   "license": "MIT"
 }

packages/next/build/webpack-config.ts

@@ -364,15 +364,6 @@ export default async function getBaseWebpackConfig(
       ...nodePathList, // Support for NODE_PATH environment variable
     ],
     alias: {
-      // These aliases make sure the wrapper module is not included in the bundles
-      // Which makes bundles slightly smaller, but also skips parsing a module that we know will result in this alias
-      'next/head': 'next/dist/next-server/lib/head.js',
-      'next/router': 'next/dist/client/router.js',
-      'next/experimental-script': config.experimental.scriptLoader
-        ? 'next/dist/client/experimental-script.js'
-        : '',
-      'next/config': 'next/dist/next-server/lib/runtime-config.js',
-      'next/dynamic': 'next/dist/next-server/lib/dynamic.js',
       next: NEXT_PROJECT_ROOT,
       ...(isWebpack5 && !isServer
         ? {

packages/next/cli/next-export.ts

@@ -62,7 +62,7 @@ const nextExport: cliCommand = (argv) => {
 
   exportApp(dir, options)
     .then(() => {
-      printAndExit('Export successful', 0)
+      printAndExit(`Export successful. Files written to ${options.outdir}`, 0)
     })
     .catch((err) => {
       printAndExit(err)

packages/next/export/index.ts

@@ -164,9 +164,11 @@ export default async function exportApp(
     Log.info(`using build directory: ${distDir}`)
   }
 
-  if (!existsSync(distDir)) {
+  const buildIdFile = join(distDir, BUILD_ID_FILE)
+
+  if (!existsSync(buildIdFile)) {
     throw new Error(
-      `Build directory ${distDir} does not exist. Make sure you run "next build" before running "next start" or "next export".`
+      `Could not find a production build in the '${distDir}' directory. Try building your app with 'next build' before starting the static export. https://err.sh/vercel/next.js/next-export-no-build-id`
     )
   }
 
@@ -186,7 +188,7 @@ export default async function exportApp(
     )
   }
 
-  const buildId = readFileSync(join(distDir, BUILD_ID_FILE), 'utf8')
+  const buildId = readFileSync(buildIdFile, 'utf8')
   const pagesManifest =
     !options.pages &&
     (require(join(

packages/next/lib/load-custom-routes.ts

@@ -466,12 +466,14 @@ export default async function loadCustomRoutes(
         destination: '/:file',
         permanent: true,
         locale: config.i18n ? false : undefined,
+        internal: true,
       } as Redirect,
       {
         source: '/:notfile((?!\\.well-known(?:/.*)?)(?:[^/]+/)*[^/\\.]+)',
         destination: '/:notfile/',
         permanent: true,
         locale: config.i18n ? false : undefined,
+        internal: true,
       } as Redirect
     )
     if (config.basePath) {
@@ -481,6 +483,7 @@ export default async function loadCustomRoutes(
         permanent: true,
         basePath: false,
         locale: config.i18n ? false : undefined,
+        internal: true,
       } as Redirect)
     }
   } else {
@@ -489,6 +492,7 @@ export default async function loadCustomRoutes(
       destination: '/:path+',
       permanent: true,
       locale: config.i18n ? false : undefined,
+      internal: true,
     } as Redirect)
     if (config.basePath) {
       redirects.unshift({
@@ -497,6 +501,7 @@ export default async function loadCustomRoutes(
         permanent: true,
         basePath: false,
         locale: config.i18n ? false : undefined,
+        internal: true,
       } as Redirect)
     }
   }

packages/next/next-server/lib/post-process.ts

@@ -1,7 +1,8 @@
 import { parse, HTMLElement } from 'node-html-parser'
 import { OPTIMIZED_FONT_PROVIDERS } from './constants'
 
-const MIDDLEWARE_TIME_BUDGET = 10
+const MIDDLEWARE_TIME_BUDGET =
+  parseInt(process.env.__POST_PROCESS_MIDDLEWARE_TIME_BUDGET || '', 10) || 10
 const MAXIMUM_IMAGE_PRELOADS = 2
 const IMAGE_PRELOAD_SIZE_THRESHOLD = 2500
 

packages/next/next-server/server/api-utils.ts

@@ -56,7 +56,7 @@ export async function apiResolver(
     )
 
     // Parsing of body
-    if (bodyParser) {
+    if (bodyParser && !apiReq.body) {
       apiReq.body = await parseBody(
         apiReq,
         config.api && config.api.bodyParser && config.api.bodyParser.sizeLimit

packages/next/next-server/server/next-server.ts

@@ -720,6 +720,7 @@ export default class Server {
     const redirects = this.customRoutes.redirects.map((redirect) => {
       const redirectRoute = getCustomRoute(redirect, 'redirect')
       return {
+        internal: redirectRoute.internal,
         type: redirectRoute.type,
         match: redirectRoute.match,
         statusCode: redirectRoute.statusCode,
@@ -1898,7 +1899,7 @@ export default class Server {
     } catch (err) {
       if (!fs.existsSync(buildIdFile)) {
         throw new Error(
-          `Could not find a valid build in the '${this.distDir}' directory! Try building your app with 'next build' before starting the server.`
+          `Could not find a production build in the '${this.distDir}' directory. Try building your app with 'next build' before starting the production server. https://err.sh/vercel/next.js/production-start-no-build-id`
         )
       }
 

packages/next/next-server/server/router.ts

@@ -24,6 +24,7 @@ export type Route = {
   statusCode?: number
   name: string
   requireBasePath?: false
+  internal?: true
   fn: (
     req: IncomingMessage,
     res: ServerResponse,
@@ -197,7 +198,11 @@ export default class Router {
       const activeBasePath = keepBasePath ? this.basePath : ''
 
       if (keepLocale) {
-        if (!localePathResult.detectedLocale && parsedUrl.query.__nextLocale) {
+        if (
+          !testRoute.internal &&
+          parsedUrl.query.__nextLocale &&
+          !localePathResult.detectedLocale
+        ) {
           currentPathname = `${activeBasePath}/${parsedUrl.query.__nextLocale}${
             currentPathnameNoBasePath === '/' ? '' : currentPathnameNoBasePath
           }`

run-tests.js

@@ -195,6 +195,7 @@ const configuredTestTypes = [UNIT_TEST_EXT]
             ...(isAzure
               ? {
                   HEADLESS: 'true',
+                  __POST_PROCESS_MIDDLEWARE_TIME_BUDGET: '50',
                 }
               : {}),
             ...(usePolling

test/integration/api-body-parser/pages/api/index.js

@@ -0,0 +1,5 @@
+export default ({ method, body }, res) => {
+  if (method === 'POST') {
+    res.status(200).json(body)
+  }
+}

test/integration/api-body-parser/server.js

@@ -0,0 +1,28 @@
+const next = require('next')
+const bodyParser = require('body-parser')
+const express = require('express')
+
+const dev = process.env.NODE_ENV !== 'production'
+const dir = __dirname
+const port = process.env.PORT || 3000
+
+const app = next({ dev, dir })
+const handleNextRequests = app.getRequestHandler()
+
+app.prepare().then(() => {
+  const server = express()
+
+  server.use(bodyParser.json({ limit: '5mb' }))
+
+  server.all('*', (req, res) => {
+    handleNextRequests(req, res)
+  })
+
+  server.listen(port, (err) => {
+    if (err) {
+      throw err
+    }
+
+    console.log(`> Ready on http://localhost:${port}`)
+  })
+})

test/integration/api-body-parser/test/index.test.js

@@ -0,0 +1,72 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+  killApp,
+  findPort,
+  launchApp,
+  fetchViaHTTP,
+  initNextServerScript,
+} from 'next-test-utils'
+import clone from 'clone'
+import getPort from 'get-port'
+
+jest.setTimeout(1000 * 60 * 2)
+const appDir = join(__dirname, '../')
+let appPort
+
+let app
+let server
+jest.setTimeout(1000 * 60 * 2)
+
+const context = {}
+
+function runTests() {
+  it('should parse JSON body', async () => {
+    appPort = await findPort()
+    app = await launchApp(appDir, appPort, {})
+    const data = await makeRequest()
+    expect(data).toEqual([{ title: 'Nextjs' }])
+    killApp(app)
+  })
+
+  it('should not throw if request body is already parsed in custom middleware', async () => {
+    await startServer()
+    const data = await makeRequest()
+    expect(data).toEqual([{ title: 'Nextjs' }])
+    killApp(server)
+  })
+}
+
+async function makeRequest() {
+  const data = await fetchViaHTTP(appPort, '/api', null, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8',
+    },
+    body: JSON.stringify([{ title: 'Nextjs' }]),
+  }).then((res) => res.ok && res.json())
+
+  return data
+}
+
+const startServer = async (optEnv = {}, opts) => {
+  const scriptPath = join(appDir, 'server.js')
+  context.appPort = appPort = await getPort()
+  const env = Object.assign(
+    {},
+    clone(process.env),
+    { PORT: `${appPort}` },
+    optEnv
+  )
+
+  server = await initNextServerScript(
+    scriptPath,
+    /ready on/i,
+    env,
+    /ReferenceError: options is not defined/,
+    opts
+  )
+}
+
+runTests()

test/integration/custom-routes/test/index.test.js

@@ -644,6 +644,7 @@ const runTests = (isDev = false) => {
             ),
             source: '/:path+/',
             statusCode: 308,
+            internal: true,
           },
           {
             destination: '/:lang/about',