Merge branch 'canary' into canary

.github/CODEOWNERS

@@ -12,13 +12,8 @@
 
 # Image Component (@styfle)
 
-/examples/image-component/                                   @timneutkens @ijjk @shuding @styfle
-/packages/next/build/webpack/loaders/next-image-loader.js    @timneutkens @ijjk @shuding @styfle
-/packages/next/client/image.tsx                              @timneutkens @ijjk @shuding @styfle
-/packages/next/image-types/                                  @timneutkens @ijjk @shuding @styfle
-/packages/next/server/image-config.ts                        @timneutkens @ijjk @shuding @styfle
-/packages/next/server/image-optimizer.ts                     @timneutkens @ijjk @shuding @styfle
+/**/*image*/**                                               @timneutkens @ijjk @shuding @styfle
+/packages/next/client/use-intersection.tsx                   @timneutkens @ijjk @shuding @styfle
+/packages/next/server/lib/squoosh/                           @timneutkens @ijjk @shuding @styfle
 /packages/next/server/serve-static.ts                        @timneutkens @ijjk @shuding @styfle
 /packages/next/server/config.ts                              @timneutkens @ijjk @shuding @styfle
-/test/integration/image-optimizer/                           @timneutkens @ijjk @shuding @styfle
-/test/integration/image-component/                           @timneutkens @ijjk @shuding @styfle

.github/workflows/lock.yml

@@ -20,8 +20,8 @@ jobs:
     steps:
       - uses: dessant/lock-threads@v3
         with:
-          github-token: ${{ secrets.LOCK_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
           issue-inactive-days: 30
-          issue-comment: 'This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.'
+          issue-comment: 'This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.'
           pr-inactive-days: 30
           log-output: true

.github/workflows/stale.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           repo-token: ${{ secrets.STALE_TOKEN }}
           only-labels: 'please add a complete reproduction'
-          close-issue-message: 'This issue has been automatically closed after 30 days of inactivity with no reproduction. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.'
+          close-issue-message: 'This issue has been automatically closed because it received no activity for a month and had no reproduction to investigate. If you think this was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.'
           days-before-issue-close: 1
           days-before-issue-stale: 30
           days-before-pr-close: -1

docs/advanced-features/output-file-tracing.md

@@ -34,7 +34,7 @@ module.exports = {
 
 This will create a folder at `.next/standalone` which can then be deployed on it's own without installing `node_modules`.
 
-Additionally, a minimal `server.js` file is also output which can be used instead of `next start`. This minimal server does not copy the `.next/static` directory by default as this should ideally be handled by a CDN instead, although it can be copied to the `standalone` folder manually and the `server.js` file will serve it automatically.
+Additionally, a minimal `server.js` file is also output which can be used instead of `next start`. This minimal server does not copy the `public` or `.next/static` folders by default as these should ideally be handled by a CDN instead, although these folders can be copied to the `standalone/public` and `standalone/.next/static` folders manually, after which `server.js` file will serve these automatically.
 
 ## Caveats
 

docs/basic-features/font-optimization.md

@@ -23,29 +23,7 @@ By default, Next.js will automatically inline font CSS at build time, eliminatin
 
 ## Usage
 
-To add a web font to your Next.js application, override `next/head`. For example, you can add a font to a specific page:
-
-```js
-// pages/index.js
-
-import Head from 'next/head'
-
-export default function IndexPage() {
-  return (
-    <div>
-      <Head>
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
-          rel="stylesheet"
-        />
-      </Head>
-      <p>Hello world!</p>
-    </div>
-  )
-}
-```
-
-or to your entire application with a [Custom `Document`](/docs/advanced-features/custom-document.md).
+To add a web font to your Next.js application, add the font to a [Custom `Document`](/docs/advanced-features/custom-document.md).
 
 ```js
 // pages/_document.js
@@ -74,6 +52,8 @@ class MyDocument extends Document {
 export default MyDocument
 ```
 
+Note that we don't recommend adding fonts with `next/head`, as this only applies the font to the particular page and won't work with a streaming architecture.
+
 Automatic Webfont Optimization currently supports Google Fonts and Typekit with support for other font providers coming soon. We're also planning to add control over [loading strategies](https://github.com/vercel/next.js/issues/21555) and `font-display` values.
 
 See [Google Font Display](https://nextjs.org/docs/messages/google-font-display) for more information.

docs/faq.md

@@ -7,7 +7,7 @@ description: Get to know more about Next.js with the frequently asked questions.
 <details>
   <summary>Is Next.js production ready?</summary>
   <p>Yes! Next.js is used by many of the top websites in the world. See the
-  <a href="/showcase">Showcase</a> for more info.</p>
+  <a href="https://nextjs.org/showcase">Showcase</a> for more info.</p>
 </details>
 
 <details>

docs/testing.md

@@ -232,7 +232,7 @@ Run `npm run build` and `npm run start`, then run `npm run test:e2e` in another
 
 ### Running Playwright on Continuous Integration (CI)
 
-Playwright will by default run your tests in the [headed mode](https://playwright.dev/docs/ci). To install all the Playwright dependencies, run `npx playwright install-deps`.
+Playwright will by default run your tests in the [headless mode]https://playwright.dev/docs/ci#running-headed). To install all the Playwright dependencies, run `npx playwright install-deps`.
 
 You can learn more about Playwright and Continuous Integration from these resources:
 

errors/no-stylesheets-in-head-component.md

@@ -18,7 +18,7 @@ Add the stylesheet in a custom `Document` component.
 
 ```jsx
 // pages/_document.js
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (

errors/swc-disabled.md

@@ -10,8 +10,6 @@ When an application has custom Babel configuration Next.js will automatically op
 
 Many of the integrations with external libraries that currently require custom Babel transformations will be ported to Rust-based SWC transforms in the near future. These include but are not limited to:
 
-- Styled Components
 - Emotion
-- Relay
 
 In order to prioritize transforms that will help you adopt SWC please provide your `.babelrc` on [the feedback thread](https://github.com/vercel/next.js/discussions/30174).

examples/custom-server-hapi/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/custom-server-hapi/nodemon.json

@@ -0,0 +1,5 @@
+{
+  "watch": ["server"],
+  "exec": "ts-node --project tsconfig.server.json server/server.ts",
+  "ext": "js ts"
+}

examples/custom-server-hapi/package.json

@@ -1,15 +1,24 @@
 {
   "private": true,
   "scripts": {
-    "dev": "node server.js",
-    "build": "next build",
-    "start": "cross-env NODE_ENV=production node server.js"
+    "dev": "nodemon",
+    "build": "next build && tsc --project tsconfig.server.json",
+    "start": "cross-env NODE_ENV=production node dist/server.js"
   },
   "dependencies": {
-    "@hapi/hapi": "^18.3.1",
-    "cross-env": "^5.2.0",
+    "@hapi/hapi": "^20.2.1",
+    "cross-env": "^7.0.3",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/hapi__hapi": "^20.0.10",
+    "@types/node": "^16.11.25",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "nodemon": "^2.0.15",
+    "ts-node": "^10.5.0",
+    "typescript": "^4.5.5"
   }
 }

examples/custom-server-hapi/server/next-wrapper.ts

@@ -0,0 +1,16 @@
+import type { NextServer } from 'next/dist/server/next'
+import type { Lifecycle } from '@hapi/hapi'
+import type { NextUrlWithParsedQuery } from 'next/dist/server/request-meta'
+
+const nextHandlerWrapper = (app: NextServer): Lifecycle.Method => {
+  const handler = app.getRequestHandler()
+
+  return async ({ raw, url, query }, h) => {
+    const nextUrl = url as unknown as NextUrlWithParsedQuery
+    nextUrl.query = query
+    await handler(raw.req, raw.res, nextUrl)
+    return h.close
+  }
+}
+
+export { nextHandlerWrapper }

examples/custom-server-hapi/server.js → examples/custom-server-hapi/server/server.ts

@@ -1,6 +1,6 @@
-const next = require('next')
-const Hapi = require('@hapi/hapi')
-const { /* pathWrapper, */ nextHandlerWrapper } = require('./next-wrapper')
+import next from 'next'
+import Hapi from '@hapi/hapi'
+import { nextHandlerWrapper } from './next-wrapper'
 
 const port = parseInt(process.env.PORT, 10) || 3000
 const dev = process.env.NODE_ENV !== 'production'

examples/custom-server-hapi/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/custom-server-hapi/tsconfig.server.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "dist",
+    "lib": ["es2019"],
+    "target": "es2019",
+    "isolatedModules": false,
+    "noEmit": false
+  },
+  "include": ["server/**/*.ts"]
+}

examples/with-docker-multi-env/.dockerignore

@@ -5,3 +5,4 @@ npm-debug.log
 README.md
 .next
 docker
+.git

examples/with-docker/.dockerignore

@@ -3,4 +3,5 @@ Dockerfile
 node_modules
 npm-debug.log
 README.md
-.next
+.next
+.git

examples/with-sentry/next.config.js

@@ -9,16 +9,14 @@ const moduleExports = {
   // Your existing module.exports
 }
 
-const sentryWebpackPluginOptions = {
+// Make sure adding Sentry options is the last code to run before exporting, to
+// ensure that your source maps include changes from all other Webpack plugins
+module.exports = withSentryConfig(moduleExports, {
   // Additional config options for the Sentry Webpack plugin. Keep in mind that
   // the following options are set automatically, and overriding them is not
   // recommended:
   //   release, url, org, project, authToken, configFile, stripPrefix,
   //   urlPrefix, include, ignore
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options.
-}
-
-// Make sure adding Sentry options is the last code to run before exporting, to
-// ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+})

examples/with-supertokens/package.json

@@ -10,9 +10,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "supertokens-auth-react": "^0.18.0",
-    "supertokens-node": "^8.1.0"
-  },
-  "devDependencies": {
-    "eslint-config-next": "11.0.1"
+    "supertokens-node": "^9.0.0"
   }
 }

examples/with-tailwindcss/pages/index.tsx

@@ -1,6 +1,8 @@
+import type { NextPage } from 'next'
 import Head from 'next/head'
+import Image from 'next/image'
 
-export default function Home() {
+const Home: NextPage = () => {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
       <Head>
@@ -68,15 +70,17 @@ export default function Home() {
 
       <footer className="flex h-24 w-full items-center justify-center border-t">
         <a
-          className="flex items-center justify-center"
+          className="flex items-center justify-center gap-2"
           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="ml-2 h-4" />
+          <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
         </a>
       </footer>
     </div>
   )
 }
+
+export default Home

examples/with-tailwindcss/prettier.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-  arrowParens: 'always',
   singleQuote: true,
-  tabWidth: 2,
   semi: false,
 }

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.0"
+  "version": "12.1.1-canary.1"
 }

packages/create-next-app/package.json

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

packages/create-next-app/templates/default/gitignore

@@ -26,10 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel

packages/create-next-app/templates/typescript/gitignore

@@ -26,10 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.0",
+  "version": "12.1.1-canary.1",
   "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.1.0",
+    "@next/eslint-plugin-next": "12.1.1-canary.1",
     "@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.1.0",
+  "version": "12.1.1-canary.1",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",