Merge remote-tracking branch 'vercel/canary' into fix-33576

.github/workflows/build_test_deploy.yml

@@ -661,7 +661,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
 
       - name: Build
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
@@ -796,7 +796,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
 
       - name: Install
         uses: actions-rs/toolchain@v1
@@ -894,7 +894,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
       - name: Install Rust
         uses: actions-rs/toolchain@v1
         with:
@@ -942,7 +942,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
       - name: Install Rust
         uses: actions-rs/toolchain@v1
         with:
@@ -1015,7 +1015,7 @@ jobs:
 
       - name: 'Build'
         run: |
-          docker run --rm -v ~/.cargo/git:/root/.cargo/git -v ~/.cargo/registry:/root/.cargo/registry -v $(pwd):/build -w /build builder sh -c "npm i -g @napi-rs/cli@1.2.1 && npm i -g turbo@1.0.24 && turbo run build-native --cache-dir=".turbo" -- --release --target x86_64-unknown-linux-musl"
+          docker run --rm -v ~/.cargo/git:/root/.cargo/git -v ~/.cargo/registry:/root/.cargo/registry -v $(pwd):/build -w /build builder sh -c "npm i -g @napi-rs/cli@1.2.1 && npm i -g turbo@1.0.28 && turbo run build-native --cache-dir=".turbo" -- --release --target x86_64-unknown-linux-musl"
 
       - name: Upload artifact
         uses: actions/upload-artifact@v2
@@ -1043,7 +1043,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
 
       - name: Install Rust
         uses: actions-rs/toolchain@v1
@@ -1104,7 +1104,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
       - name: Install Rust
         uses: actions-rs/toolchain@v1
         with:
@@ -1165,7 +1165,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
 
       - name: Install Rust
         uses: actions-rs/toolchain@v1
@@ -1225,7 +1225,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
 
       - name: Install Rust
         uses: actions-rs/toolchain@v1
@@ -1285,7 +1285,7 @@ jobs:
           override: true
           target: wasm32-unknown-unknown
 
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
 
       - name: Turbo cache
         id: turbo-cache
@@ -1330,7 +1330,7 @@ jobs:
         with:
           node-version: 14
 
-      - run: npm i -g turbo@1.0.24
+      - run: npm i -g turbo@1.0.28
 
       - name: Install Rust
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}

.github/workflows/pull_request_stats.yml

@@ -78,7 +78,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/cli@1.2.1
-      - run: npm i -g turbo@1.0.14
+      - run: npm i -g turbo@1.0.28
 
       - name: Build
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}

docs/api-reference/next.config.js/headers.md

@@ -21,7 +21,7 @@ description: Add custom HTTP headers to your Next.js app.
 
 </details>
 
-Headers allow you to set custom HTTP headers for an incoming request path.
+Headers allow you to set custom HTTP headers on the response to an incoming request on a given path.
 
 To set custom HTTP headers you can use the `headers` key in `next.config.js`:
 
@@ -50,7 +50,7 @@ module.exports = {
 `headers` is an async function that expects an array to be returned holding objects with `source` and `headers` properties:
 
 - `source` is the incoming request path pattern.
-- `headers` is an array of header objects with the `key` and `value` properties.
+- `headers` is an array of response header objects, with `key` and `value` properties.
 - `basePath`: `false` or `undefined` - if false the basePath won't be included when matching, can be used for external rewrites only.
 - `locale`: `false` or `undefined` - whether the locale should not be included when matching.
 - `has` is an array of [has objects](#header-cookie-and-query-matching) with the `type`, `key` and `value` properties.

docs/api-reference/next/image.md

@@ -16,6 +16,7 @@ description: Enable Image Optimization with the built-in Image component.
 
 | Version   | Changes                                                                                           |
 | --------- | ------------------------------------------------------------------------------------------------- |
+| `v12.0.9` | `lazyRoot` prop added                                                                             |
 | `v12.0.0` | `formats` configuration added.<br/>AVIF support added.<br/>Wrapper `<div>` changed to `<span>`.   |
 | `v11.1.0` | `onLoadingComplete` and `lazyBoundary` props added.                                               |
 | `v11.0.0` | `src` prop support for static import.<br/>`placeholder` prop added.<br/>`blurDataURL` prop added. |
@@ -221,6 +222,12 @@ A string (with similar syntax to the margin property) that acts as the bounding
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)
 
+### lazyRoot
+
+A React [Ref](https://reactjs.org/docs/refs-and-the-dom.html) pointing to the Element which the [lazyBoundary](#lazyBoundary) calculates for the Intersection detection. Defaults to `null`, referring to the document viewport.
+
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root)
+
 ### unoptimized
 
 When true, the source image will be served as-is instead of changing quality,
@@ -278,7 +285,7 @@ The following Image Optimization cloud providers are included:
 
 If you need a different provider, you can use the [`loader`](#loader) prop with `next/image`.
 
-> The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work.
+> Images can not be optimized at build time using [`next export`](/docs/advanced-features/static-html-export.md), only on-demand. To use `next/image` with `next export`, you will need to use a different loader than the default. [Read more in the discussion.](https://github.com/vercel/next.js/discussions/19065)
 
 > The `next/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. When using `next start` in your production environment, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. This is not necessary for Vercel deployments, as `sharp` is installed automatically.
 

docs/api-reference/next/server.md

@@ -37,14 +37,9 @@ The `NextRequest` object is an extension of the native [`Request`](https://devel
 
 - `cookies` - Has the cookies from the `Request`
 - `nextUrl` - Includes an extended, parsed, URL object that gives you access to Next.js specific properties such as `pathname`, `basePath`, `trailingSlash` and `i18n`
-- `geo` - Has the geo location from the `Request`
-  - `geo.country` - The country code
-  - `geo.region` - The region code
-  - `geo.city` - The city
-  - `geo.latitude` - The latitude
-  - `geo.longitude` - The longitude
 - `ip` - Has the IP address of the `Request`
 - `ua` - Has the user agent
+- `geo` - (Optional) Has the geo location from the `Request`, provided by your hosting platform
 
 You can use the `NextRequest` object as a direct replacement for the native `Request` interface, giving you more control over how you manipulate the request.
 

errors/no-cache.md

@@ -60,7 +60,7 @@ cache:
 
 #### Netlify CI
 
-Use [Netlify Plugins](https://www.netlify.com/products/build/plugins/) with [`netlify-plugin-cache-nextjs`](https://www.npmjs.com/package/netlify-plugin-cache-nextjs).
+Use [Netlify Plugins](https://www.netlify.com/products/build/plugins/) with [`@netlify/plugin-nextjs`](https://www.npmjs.com/package/@netlify/plugin-nextjs).
 
 #### AWS CodeBuild
 

examples/with-supabase-auth-realtime-db/README.md

@@ -1,12 +1,12 @@
-# Example: [Supabase authentication](https://supabase.io/docs/guides/auth) client- and server-side (API routes), and SSR with auth cookie.
+# Supabase Authentication
 
-This example shows how to use Supabase auth on the client and server in both [API routes](https://nextjs.org/docs/api-routes/introduction) and when using [server side rendering (SSR)](https://nextjs.org/docs/basic-features/pages#server-side-rendering).
+This example shows how to use Supabase Auth on the client and server in both [API Routes](https://nextjs.org/docs/api-routes/introduction) and when using [server-side rendering (SSR)](https://nextjs.org/docs/basic-features/pages#server-side-rendering).
 
 ## Deploy with Vercel
 
 The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fnextjs-with-supabase-auth&project-name=nextjs-with-supabase-auth&repository-name=nextjs-with-supabase-auth&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db&project-name=nextjs-with-supabase-auth&repository-name=nextjs-with-supabase-auth&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv)
 
 ## Feedback and issues
 

examples/with-tailwindcss/package.json

@@ -15,6 +15,8 @@
     "@types/react": "17.0.38",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.5",
+    "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.1",
     "tailwindcss": "^3.0.7",
     "typescript": "4.5.4"
   }

examples/with-tailwindcss/pages/index.tsx

@@ -2,13 +2,13 @@ import Head from 'next/head'
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+    <div className="flex min-h-screen flex-col items-center justify-center py-2">
       <Head>
         <title>Create Next App</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
+      <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
         <h1 className="text-6xl font-bold">
           Welcome to{' '}
           <a className="text-blue-600" href="https://nextjs.org">
@@ -18,15 +18,15 @@ export default function Home() {
 
         <p className="mt-3 text-2xl">
           Get started by editing{' '}
-          <code className="p-3 font-mono text-lg bg-gray-100 rounded-md">
+          <code className="rounded-md bg-gray-100 p-3 font-mono text-lg">
             pages/index.tsx
           </code>
         </p>
 
-        <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
+        <div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full">
           <a
             href="https://nextjs.org/docs"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
           >
             <h3 className="text-2xl font-bold">Documentation &rarr;</h3>
             <p className="mt-4 text-xl">
@@ -36,7 +36,7 @@ export default function Home() {
 
           <a
             href="https://nextjs.org/learn"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
           >
             <h3 className="text-2xl font-bold">Learn &rarr;</h3>
             <p className="mt-4 text-xl">
@@ -46,7 +46,7 @@ export default function Home() {
 
           <a
             href="https://github.com/vercel/next.js/tree/canary/examples"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
           >
             <h3 className="text-2xl font-bold">Examples &rarr;</h3>
             <p className="mt-4 text-xl">
@@ -56,7 +56,7 @@ export default function Home() {
 
           <a
             href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
           >
             <h3 className="text-2xl font-bold">Deploy &rarr;</h3>
             <p className="mt-4 text-xl">
@@ -66,15 +66,15 @@ export default function Home() {
         </div>
       </main>
 
-      <footer className="flex items-center justify-center w-full h-24 border-t">
+      <footer className="flex h-24 w-full items-center justify-center border-t">
         <a
           className="flex items-center justify-center"
           href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           Powered by{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className="h-4 ml-2" />
+          <img src="/vercel.svg" alt="Vercel Logo" className="ml-2 h-4" />
         </a>
       </footer>
     </div>

examples/with-tailwindcss/prettier.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'always',
+  singleQuote: true,
+  tabWidth: 2,
+  semi: false,
+  tailwindConfig: './tailwind.config.js',
+}

examples/with-vercel-fetch/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@vercel/fetch": "6.1.0",
     "next": "latest",
-    "node-fetch": "2.6.1",
+    "node-fetch": "2.6.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "unfetch": "4.2.0"

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.0.9-canary.6"
+  "version": "12.0.9-canary.8"
 }

package.json

@@ -157,7 +157,7 @@
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",
-    "turbo": "1.0.24",
+    "turbo": "1.0.28",
     "typescript": "4.4.3",
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.0.9-canary.6",
+    "@next/eslint-plugin-next": "12.0.9-canary.8",
     "@rushstack/eslint-patch": "^1.0.8",
     "@typescript-eslint/parser": "^5.0.0",
     "eslint-import-resolver-node": "^0.3.4",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.0.9-canary.6",
+  "version": "12.0.9-canary.8",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",