Merge branch 'canary' into revert-34440-revert/swc-css-bump

.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/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
 

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:

docs/testing.md

@@ -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**

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([
+      /* ... */
+    ])
+  }
+  /* ... */
+}
+```

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"
         }
       ]
     }

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.

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 (

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-jest-babel/__mocks__/fileMock.js

@@ -1,3 +1,8 @@
 // Read more at "Handling stylesheets and image imports" on https://nextjs.org/docs/testing
 
-module.exports = 'test-file-stub'
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}

examples/with-jest-babel/jest.config.js

@@ -16,7 +16,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)$': `<rootDir>/__mocks__/fileMock.js`,
 
     // Handle module aliases
     '^@/components/(.*)$': '<rootDir>/components/$1',

lerna.json

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

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.0",
+  "version": "12.1.1-canary.0",
   "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.0",
     "@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.0",
   "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.1.0",
+  "version": "12.1.1-canary.0",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

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

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.0",
+  "version": "12.1.1-canary.0",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.0",
+  "version": "12.1.1-canary.0",
   "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.1.0",
+  "version": "12.1.1-canary.0",
   "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",