Merge branch 'canary' into koukou

.github/workflows/build_test_deploy.yml

@@ -347,35 +347,6 @@ jobs:
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
-  testYarnPnP:
-    runs-on: ubuntu-latest
-    needs: [build, build-native-dev]
-    env:
-      NODE_OPTIONS: '--unhandled-rejections=strict'
-      YARN_COMPRESSION_LEVEL: '0'
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v2
-        if: ${{ steps.docs-change.outputs.docsChange != 'docs only change' }}
-        with:
-          node-version: 14
-
-      - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
-
-      - uses: actions/download-artifact@v2
-        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
-        with:
-          name: next-swc-dev-binary
-          path: packages/next-swc/native
-
-      - run: bash ./scripts/test-pnp.sh
-        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
-
   testsPass:
     name: thank you, next
     runs-on: ubuntu-latest
@@ -387,7 +358,6 @@ jobs:
         checkPrecompiled,
         testIntegration,
         testUnit,
-        testYarnPnP,
         testDev,
         testProd,
       ]

docs/advanced-features/security-headers.md

@@ -18,7 +18,7 @@ module.exports = {
     return [
       {
         // Apply these headers to all routes in your application.
-        source: '/(.*)',
+        source: '/:path*',
         headers: securityHeaders,
       },
     ]

docs/api-reference/next/script.md

@@ -46,6 +46,8 @@ The loading strategy of the script.
 
 A method that returns additional JavaScript that should be executed after the script has finished loading.
 
+> **Note: `onLoad` can't be used with the `beforeInteractive` loading strategy.**
+
 The following is an example of how to use the `onLoad` property:
 
 ```jsx

errors/export-image-api.md

@@ -2,23 +2,23 @@
 
 #### Why This Error Occurred
 
-You are attempting to run `next export` while importing the `next/image` component configured using the default `loader`.
+You are attempting to run `next export` while importing the `next/image` component using the default `loader` configuration.
 
 However, the default `loader` relies on the Image Optimization API which is not available for exported applications.
 
 This is because Next.js optimizes images on-demand, as users request them (not at build time).
 
 #### Possible Ways to Fix It
 
-- Use `next start` to run a server, which includes the Image Optimization API.
-- Use any provider which supports Image Optimization (like [Vercel](https://vercel.com/docs/next.js/image-optimization)).
-- Configure a third-party [loader](https://nextjs.org/docs/basic-features/image-optimization#loader) in `next.config.js`.
-- Use the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop for `next/image`.
+- Use [`next start`](https://nextjs.org/docs/api-reference/cli#production) to run a server, which includes the Image Optimization API.
+- Use any provider which supports Image Optimization (such as [Vercel](https://vercel.com)).
+- [Configure the loader](https://nextjs.org/docs/api-reference/next/image#loader-configuration) in `next.config.js`.
+- Use the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop for each instance of `next/image`.
 
 ### Useful Links
 
-- [Deployment Documentation](https://nextjs.org/docs/deployment#vercel-recommended)
+- [Deployment Documentation](https://nextjs.org/docs/deployment#managed-nextjs-with-vercel)
 - [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization)
 - [`next export` Documentation](https://nextjs.org/docs/advanced-features/static-html-export)
 - [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image)
-- [Vercel Documentation](https://vercel.com/docs/next.js/image-optimization)
+- [Vercel Documentation](https://vercel.com/docs/concepts/next.js/image-optimization)

examples/blog-starter/package.json

@@ -13,7 +13,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remark": "13.0.0",
-    "remark-html": "13.0.1"
+    "remark-html": "13.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",

examples/with-supabase-auth-realtime-db/package.json

@@ -7,10 +7,10 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^1.2.1",
-    "@supabase/ui": "^0.6.1",
+    "@supabase/ui": "^0.36.2",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "swr": "0.2.3"
+    "swr": "1.1.2"
   }
 }

packages/next/build/webpack/loaders/next-serverless-loader/api-handler.ts

@@ -3,6 +3,7 @@ import { IncomingMessage, ServerResponse } from 'http'
 import { apiResolver } from '../../../../server/api-utils'
 import { getUtils, vercelHeader, ServerlessHandlerCtx } from './utils'
 import { DecodeError } from '../../../../shared/lib/utils'
+import { NodeNextResponse, NodeNextRequest } from '../../../../server/base-http'
 
 export function getApiHandler(ctx: ServerlessHandlerCtx) {
   const { pageModule, encodedPreviewProps, pageIsDynamic } = ctx
@@ -13,7 +14,15 @@ export function getApiHandler(ctx: ServerlessHandlerCtx) {
     normalizeDynamicRouteParams,
   } = getUtils(ctx)
 
-  return async (req: IncomingMessage, res: ServerResponse) => {
+  return async (
+    rawReq: NodeNextRequest | IncomingMessage,
+    rawRes: NodeNextResponse | ServerResponse
+  ) => {
+    const req =
+      rawReq instanceof IncomingMessage ? new NodeNextRequest(rawReq) : rawReq
+    const res =
+      rawRes instanceof ServerResponse ? new NodeNextResponse(rawRes) : rawRes
+
     try {
       // We need to trust the dynamic route params from the proxy
       // to ensure we are using the correct values
@@ -41,8 +50,8 @@ export function getApiHandler(ctx: ServerlessHandlerCtx) {
       }
 
       await apiResolver(
-        req,
-        res,
+        req.originalRequest,
+        res.originalResponse,
         Object.assign({}, parsedUrl.query, params),
         await pageModule,
         encodedPreviewProps,
@@ -53,7 +62,7 @@ export function getApiHandler(ctx: ServerlessHandlerCtx) {
 
       if (err instanceof DecodeError) {
         res.statusCode = 400
-        res.end('Bad Request')
+        res.body('Bad Request').send()
       } else {
         // Throw the error to crash the serverless function
         throw err

packages/next/build/webpack/loaders/next-serverless-loader/utils.ts

@@ -25,6 +25,7 @@ import cookie from 'next/dist/compiled/cookie'
 import { TEMPORARY_REDIRECT_STATUS } from '../../../../shared/lib/constants'
 import { NextConfig } from '../../../../server/config'
 import { addRequestMeta } from '../../../../server/request-meta'
+import { BaseNextRequest } from '../../../../server/base-http'
 
 const getCustomRouteMatcher = pathMatch(true)
 
@@ -85,7 +86,10 @@ export function getUtils({
     defaultRouteMatches = dynamicRouteMatcher(page) as ParsedUrlQuery
   }
 
-  function handleRewrites(req: IncomingMessage, parsedUrl: UrlWithParsedQuery) {
+  function handleRewrites(
+    req: BaseNextRequest | IncomingMessage,
+    parsedUrl: UrlWithParsedQuery
+  ) {
     for (const rewrite of rewrites) {
       const matcher = getCustomRouteMatcher(rewrite.source)
       let params = matcher(parsedUrl.pathname)
@@ -150,15 +154,18 @@ export function getUtils({
     return parsedUrl
   }
 
-  function handleBasePath(req: IncomingMessage, parsedUrl: UrlWithParsedQuery) {
+  function handleBasePath(
+    req: BaseNextRequest | IncomingMessage,
+    parsedUrl: UrlWithParsedQuery
+  ) {
     // always strip the basePath if configured since it is required
     req.url = req.url!.replace(new RegExp(`^${basePath}`), '') || '/'
     parsedUrl.pathname =
       parsedUrl.pathname!.replace(new RegExp(`^${basePath}`), '') || '/'
   }
 
   function getParamsFromRouteMatches(
-    req: IncomingMessage,
+    req: BaseNextRequest | IncomingMessage,
     renderOpts?: any,
     detectedLocale?: string
   ) {
@@ -269,7 +276,10 @@ export function getUtils({
     return pathname
   }
 
-  function normalizeVercelUrl(req: IncomingMessage, trustQuery: boolean) {
+  function normalizeVercelUrl(
+    req: BaseNextRequest | IncomingMessage,
+    trustQuery: boolean
+  ) {
     // make sure to normalize req.url on Vercel to strip dynamic params
     // from the query which are added during routing
     if (pageIsDynamic && trustQuery && defaultRouteRegex) {
@@ -374,7 +384,7 @@ export function getUtils({
     if (detectedDomain) {
       defaultLocale = detectedDomain.defaultLocale
       detectedLocale = defaultLocale
-      addRequestMeta(req, '__nextIsLocaleDomain', true)
+      addRequestMeta(req as any, '__nextIsLocaleDomain', true)
     }
 
     // if not domain specific locale use accept-language preferred
@@ -394,7 +404,7 @@ export function getUtils({
         ...parsedUrl,
         pathname: localePathResult.pathname,
       })
-      addRequestMeta(req, '__nextStrippedLocale', true)
+      addRequestMeta(req as any, '__nextStrippedLocale', true)
       parsedUrl.pathname = localePathResult.pathname
     }
 

packages/next/build/webpack/loaders/next-swc-loader.js

@@ -101,6 +101,8 @@ export function pitch() {
   ;(async () => {
     let loaderOptions = this.getOptions() || {}
     if (
+      // TODO: investigate swc file reading in PnP mode?
+      !process.versions.pnp &&
       loaderOptions.fileReading &&
       !EXCLUDED_PATHS.test(this.resourcePath) &&
       this.loaders.length - 1 === this.loaderIndex &&

packages/next/server/api-utils.ts

@@ -10,6 +10,7 @@ import { sendEtagResponse } from './send-payload'
 import generateETag from 'next/dist/compiled/etag'
 import isError from '../lib/is-error'
 import { interopDefault } from '../lib/interop-default'
+import { BaseNextRequest, BaseNextResponse } from './base-http'
 
 export type NextApiRequestCookies = { [key: string]: string }
 export type NextApiRequestQuery = { [key: string]: string | string[] }
@@ -141,7 +142,7 @@ export async function apiResolver(
  * @param req request object
  */
 export async function parseBody(
-  req: NextApiRequest,
+  req: IncomingMessage,
   limit: string | number
 ): Promise<any> {
   let contentType
@@ -335,11 +336,11 @@ const COOKIE_NAME_PRERENDER_BYPASS = `__prerender_bypass`
 const COOKIE_NAME_PRERENDER_DATA = `__next_preview_data`
 
 export const SYMBOL_PREVIEW_DATA = Symbol(COOKIE_NAME_PRERENDER_DATA)
-const SYMBOL_CLEARED_COOKIES = Symbol(COOKIE_NAME_PRERENDER_BYPASS)
+export const SYMBOL_CLEARED_COOKIES = Symbol(COOKIE_NAME_PRERENDER_BYPASS)
 
 export function tryGetPreviewData(
-  req: IncomingMessage,
-  res: ServerResponse,
+  req: IncomingMessage | BaseNextRequest,
+  res: ServerResponse | BaseNextResponse,
   options: __ApiPreviewProps
 ): PreviewData {
   // Read cached preview data if present