Merge branch 'canary' into tsec-integration

vercel · Feb 23, 2022 · 00e3b44 · 00e3b44
2 parents e3374db + 33d9615
commit 00e3b44
Show file tree

Hide file tree

Showing 195 changed files with 2,945 additions and 2,013 deletions.
diff --git a/.github/CODEOWNERS b/.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
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
diff --git a/.github/workflows/lock.yml b/.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
diff --git a/.github/workflows/stale.yml b/.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

diff --git a/docs/advanced-features/custom-document.md b/docs/advanced-features/custom-document.md
@@ -41,7 +41,7 @@ Or add a `className` to the `body` tag:
 ## Caveats
 
 - The `<Head />` component used in `_document` is not the same as [`next/head`](/docs/api-reference/next/head.md). The `<Head />` component used here should only be used for any `<head>` code that is common for all pages. For all other cases, such as `<title>` tags, we recommend using [`next/head`](/docs/api-reference/next/head.md) in your pages or components.
-- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), read [Layouts](/docs/basic-features/layouts.md) intead.
+- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), read [Layouts](/docs/basic-features/layouts.md) instead.
 - `Document` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching/overview.md) like [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) or [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md).
 
 ## Customizing `renderPage`

diff --git a/docs/advanced-features/output-file-tracing.md b/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
 

diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md
@@ -376,7 +376,20 @@ module.exports = {
 
 ### Cache-Control
 
-Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) function.
+You can set the `Cache-Control` header in your [Next.js API Routes](/docs/api-routes/introduction.md) by using the `res.setHeader` method:
+
+```js
+// pages/api/user.js
+
+export default function handler(req, res) {
+  res.setHeader('Cache-Control', 's-maxage=86400')
+  res.status(200).json({ name: 'John Doe' })
+}
+```
+
+You cannot set `Cache-Control` headers in `next.config.js` file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively.
+
+If you need to revalidate the cache of a page that has been [statically generated](/docs/basic-features/pages.md#static-generation-recommended), you can do so by setting the `revalidate` prop in the page's [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) function.
 
 ## Related
 

diff --git a/docs/basic-features/data-fetching/get-server-side-props.md b/docs/basic-features/data-fetching/get-server-side-props.md
@@ -47,8 +47,8 @@ Take the following example. An API route is used to fetch some data from a CMS.
 
 If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the [client side](/docs/basic-features/data-fetching/client-side.md). An example of this is user-specific data:
 
-- First, immediately show the page without data. Parts of the page can be pre-rendered using Static Generation. You can show loading states for missing data.
-- Then, fetch the data on the client side and display it when ready.
+- First, immediately show the page without data. Parts of the page can be pre-rendered using Static Generation. You can show loading states for missing data
+- Then, fetch the data on the client side and display it when ready
 
 This approach works well for user dashboard pages, for example. Because a dashboard is a private, user-specific page, SEO is not relevant and the page doesn’t need to be pre-rendered. The data is frequently updated, which requires request-time data fetching.
 
@@ -74,6 +74,10 @@ export async function getServerSideProps() {
 export default Page
 ```
 
+## Does getServerSideProps render an error page
+
+If an error is thrown inside `getServerSideProps`, it will show the `pages/500.js` file. Check out the documentation for [500 page](/docs/advanced-features/custom-error-page#500-page) to learn more on how to create it. During development this file will not be used and the dev overlay will be shown instead.
+
 ## Related
 
 For more information on what to do next, we recommend the following sections:

diff --git a/docs/basic-features/font-optimization.md b/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.

diff --git a/docs/faq.md b/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>

diff --git a/docs/testing.md b/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:
 
@@ -325,7 +325,7 @@ module.exports = {
 
     // Handle image imports
     // https://jestjs.io/docs/webpack#handling-static-assets
-    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
+    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
 
     // Handle module aliases
     '^@/components/(.*)$': '<rootDir>/components/$1',
@@ -354,21 +354,19 @@ Stylesheets and images aren't used in the tests but importing them may cause err
 
 ```js
 // __mocks__/fileMock.js
-module.exports = 'test-file-stub'
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
 ```
 
 ```js
 // __mocks__/styleMock.js
 module.exports = {}
 ```
 
-If you're running into the issue `"Failed to parse src "test-file-stub" on 'next/image'"`, add a '/' to your fileMock.
-
-```js
-// __mocks__/fileMock.js
-module.exports = '/test-file-stub'
-```
-
 For more information on handling static assets, please refer to the [Jest Docs](https://jestjs.io/docs/webpack#handling-static-assets).
 
 **Optional: Extend Jest with custom matchers**

diff --git a/errors/client-flush-effects.md b/errors/client-flush-effects.md
@@ -0,0 +1,24 @@
+# `useFlushEffects` can not be called on the client
+
+#### Why This Error Occurred
+
+The `useFlushEffects` hook was executed while rendering a component on the client, or in another unsupported environment.
+
+#### Possible Ways to Fix It
+
+The `useFlushEffects` hook can only be called while _server rendering a client component_. As a best practice, we recommend creating a wrapper hook:
+
+```jsx
+// lib/use-style-libraries.js
+import { useFlushEffects } from 'next/streaming'
+
+export default function useStyleLibraries() {
+  if (typeof window === 'undefined') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFlushEffects([
+      /* ... */
+    ])
+  }
+  /* ... */
+}
+```
diff --git a/errors/manifest.json b/errors/manifest.json
@@ -623,6 +623,14 @@
         {
           "title": "opening-an-issue",
           "path": "/errors/opening-an-issue.md"
+        },
+        {
+          "title": "multiple-flush-effects",
+          "path": "/errors/multiple-flush-effects.md"
+        },
+        {
+          "title": "client-flush-effects",
+          "path": "/errors/client-flush-effects.md"
         }
       ]
     }

diff --git a/errors/multiple-flush-effects.md b/errors/multiple-flush-effects.md
@@ -0,0 +1,9 @@
+# The `useFlushEffects` hook cannot be used more than once.
+
+#### Why This Error Occurred
+
+The `useFlushEffects` hook is being used more than once while a page is being rendered.
+
+#### Possible Ways to Fix It
+
+The `useFlushEffects` hook should only be called inside the body of the `pages/_app` component, before returning any `<Suspense>` boundaries. Restructure your application to prevent extraneous calls.
diff --git a/errors/no-stylesheets-in-head-component.md b/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 (

diff --git a/errors/swc-disabled.md b/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).
diff --git a/examples/custom-server-hapi/next-env.d.ts b/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.
diff --git a/examples/custom-server-hapi/next-wrapper.js b/examples/custom-server-hapi/next-wrapper.js
diff --git a/examples/custom-server-hapi/nodemon.json b/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"
+}
diff --git a/examples/custom-server-hapi/package.json b/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"
   }
 }
diff --git a/examples/custom-server-hapi/pages/a.js → examples/custom-server-hapi/pages/a.tsx b/examples/custom-server-hapi/pages/a.js → examples/custom-server-hapi/pages/a.tsx
diff --git a/examples/custom-server-hapi/pages/b.js → examples/custom-server-hapi/pages/b.tsx b/examples/custom-server-hapi/pages/b.js → examples/custom-server-hapi/pages/b.tsx
diff --git a/examples/custom-server-hapi/pages/index.js → examples/custom-server-hapi/pages/index.tsx b/examples/custom-server-hapi/pages/index.js → examples/custom-server-hapi/pages/index.tsx
diff --git a/examples/custom-server-hapi/server/next-wrapper.ts b/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 }
diff --git a/examples/custom-server-hapi/server.js → examples/custom-server-hapi/server/server.ts b/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'

diff --git a/examples/custom-server-hapi/tsconfig.json b/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"]
+}
diff --git a/examples/custom-server-hapi/tsconfig.server.json b/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"]
+}
diff --git a/examples/with-docker-multi-env/.dockerignore b/examples/with-docker-multi-env/.dockerignore
@@ -5,3 +5,4 @@ npm-debug.log
 README.md
 .next
 docker
+.git