Merge branch 'canary' into update/node-browser-polyfills

vercel · Jan 3, 2022 · baca9fa · baca9fa
2 parents 3dfb19c + 4d30771
commit baca9fa
Show file tree

Hide file tree

Showing 152 changed files with 1,335 additions and 883 deletions.
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
@@ -14,7 +14,8 @@ jobs:
         with:
           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.'
-          days-before-issue-close: 30
+          days-before-issue-close: 1
+          days-before-issue-stale: 30
           days-before-pr-close: -1
           days-before-pr-stale: -1
           exempt-issue-labels: 'blocked,must,should,keep'
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 handle serving the `static` directory as this should be handled by a CDN instead.
+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.
 
 ## Caveats
 

diff --git a/docs/advanced-features/react-18.md b/docs/advanced-features/react-18.md
@@ -12,6 +12,8 @@ Ensure you have the `rc` npm tag of React installed:
 npm install next@latest react@rc react-dom@rc
 ```
 
+That's all! You can now start using React 18's new APIs like `startTransition` and `Suspense` in Next.js.
+
 ### Enable SSR Streaming (Alpha)
 
 Concurrent features in React 18 include built-in support for server-side Suspense and SSR streaming support, allowing you to server-render pages using HTTP streaming.

diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md
@@ -204,7 +204,7 @@ The default behavior of the `Link` component is to `push` a new URL into the `hi
 The default behavior of `Link` is to scroll to the top of the page. When there is a hash defined it will scroll to the specific id, like a normal `<a>` tag. To prevent scrolling to the top / hash `scroll={false}` can be added to `Link`:
 
 ```jsx
-<Link href="/?counter=10" scroll={false}>
+<Link href="/#hashid" scroll={false}>
   <a>Disables scrolling to the top</a>
 </Link>
 ```
diff --git a/docs/basic-features/eslint.md b/docs/basic-features/eslint.md
@@ -90,6 +90,7 @@ Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/
 | ✔️  | [next/no-head-import-in-document](https://nextjs.org/docs/messages/no-head-import-in-document) | Disallow importing next/head in pages/document.js                                                                            |
 | ✔️  | [next/no-html-link-for-pages](https://nextjs.org/docs/messages/no-html-link-for-pages)         | Prohibit HTML anchor links to pages without a Link component                                                                 |
 | ✔️  | [next/no-img-element](https://nextjs.org/docs/messages/no-img-element)                         | Prohibit usage of HTML &lt;img&gt; element                                                                                   |
+| ✔️  | [next/no-head-element](https://nextjs.org/docs/messages/no-head-element)                       | Prohibit usage of HTML &lt;head&gt; element                                                                                  |
 | ✔️  | [next/no-page-custom-font](https://nextjs.org/docs/messages/no-page-custom-font)               | Prevent page-only custom fonts                                                                                               |
 | ✔️  | [next/no-sync-scripts](https://nextjs.org/docs/messages/no-sync-scripts)                       | Forbid synchronous scripts                                                                                                   |
 | ✔️  | [next/no-title-in-document-head](https://nextjs.org/docs/messages/no-title-in-document-head)   | Disallow using &lt;title&gt; with Head from next/document                                                                    |
@@ -202,11 +203,15 @@ Then, add `prettier` to your existing ESLint config:
 If you would like to use `next lint` with [lint-staged](https://github.com/okonet/lint-staged) to run the linter on staged git files, you'll have to add the following to the `.lintstagedrc.js` file in the root of your project in order to specify usage of the `--file` flag.
 
 ```js
+const path = require('path')
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`
+
 module.exports = {
-  '**/*.js?(x)': (filenames) =>
-    `next lint --fix --file ${filenames
-      .map((file) => file.split(process.cwd())[1])
-      .join(' --file ')}`,
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
 }
 ```
 

diff --git a/errors/manifest.json b/errors/manifest.json
@@ -447,6 +447,7 @@
           "path": "/errors/link-multiple-children.md"
         },
         { "title": "no-img-element", "path": "/errors/no-img-element.md" },
+        { "title": "no-head-element", "path": "/errors/no-head-element.md" },
         {
           "title": "non-dynamic-getstaticpaths-usage",
           "path": "/errors/non-dynamic-getstaticpaths-usage.md"

diff --git a/errors/no-head-element.md b/errors/no-head-element.md
@@ -0,0 +1,30 @@
+# No Head Element
+
+### Why This Error Occurred
+
+An HTML `<head>` element was used to include page-level metadata, but this can cause unexpected behavior in a Next.js application. Use Next.js' built-in `<Head />` component instead.
+
+### Possible Ways to Fix It
+
+Import and use the `<Head />` component:
+
+```jsx
+import Head from 'next/head'
+
+function Index() {
+  return (
+    <>
+      <Head>
+        <title>My page title</title>
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
+    </>
+  )
+}
+
+export default Index
+```
+
+### Useful Links
+
+- [next/head](https://nextjs.org/docs/api-reference/next/head)
diff --git a/errors/no-page-custom-font.md b/errors/no-page-custom-font.md
@@ -3,7 +3,7 @@
 ### Why This Error Occurred
 
 - The custom font you're adding was added to a page - this only adds the font to the specific page and not the entire application.
-- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimiztion.
+- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimization.
 
 ### Possible Ways to Fix It
 

diff --git a/errors/react-hydration-error.md b/errors/react-hydration-error.md
@@ -14,10 +14,10 @@ An example:
 
 ```jsx
 function MyComponent() {
-    // This condition depends on `window`. During the first render of the browser the `color` variable will be different
-    const color = typeof window !== 'undefined' ? 'red' : 'blue
-    // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
-    return <h1 className={`title ${color}`}>Hello World!</h1>
+  // This condition depends on `window`. During the first render of the browser the `color` variable will be different
+  const color = typeof window !== 'undefined' ? 'red' : 'blue'
+  // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
+  return <h1 className={`title ${color}`}>Hello World!</h1>
 }
 ```
 

diff --git a/examples/cms-kontent/components/cover-image.js b/examples/cms-kontent/components/cover-image.js
@@ -17,7 +17,7 @@ export default function CoverImage({ title, src, slug }) {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link href={slug}>
+        <Link href={`/posts/${slug}`}>
           <a aria-label={title}>{image}</a>
         </Link>
       ) : (

diff --git a/examples/cms-kontent/lib/api.js b/examples/cms-kontent/lib/api.js
@@ -1,5 +1,5 @@
 import { DeliveryClient } from '@kentico/kontent-delivery'
-import { name, version } from '../package.json'
+import pkg from '../package.json'
 
 const sourceTrackingHeaderName = 'X-KC-SOURCE'
 
@@ -9,7 +9,7 @@ const client = new DeliveryClient({
   globalHeaders: (_queryConfig) => [
     {
       header: sourceTrackingHeaderName,
-      value: `@vercel/next.js/example/${name};${version}`,
+      value: `@vercel/next.js/example/${pkg.name};${pkg.version}`,
     },
   ],
 })

diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md
@@ -4,7 +4,7 @@ This example serves as a conduit if you were using Apollo 1.X with Redux, and ar
 
 In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/vercel/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/vercel/next.js/tree/master/examples/with-redux) examples.
 
-To inspect the GraphQL API, use its [web IDE](https://nextjs-graphql-with-prisma-simple.vercel.app/api).
+To inspect the GraphQL API, use its [web IDE](https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api).
 
 ## Deploy your own
 

diff --git a/examples/with-apollo-and-redux/lib/apollo.js b/examples/with-apollo-and-redux/lib/apollo.js
@@ -10,7 +10,7 @@ function createApolloClient() {
   return new ApolloClient({
     ssrMode: typeof window === 'undefined',
     link: new HttpLink({
-      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
+      uri: 'https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api', // Server URL (must be absolute)
       credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
     }),
     cache: new InMemoryCache({

diff --git a/examples/with-apollo/lib/apolloClient.js b/examples/with-apollo/lib/apolloClient.js
@@ -12,7 +12,7 @@ function createApolloClient() {
   return new ApolloClient({
     ssrMode: typeof window === 'undefined',
     link: new HttpLink({
-      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
+      uri: 'https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api', // Server URL (must be absolute)
       credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
     }),
     cache: new InMemoryCache({

diff --git a/examples/with-docker/Dockerfile b/examples/with-docker/Dockerfile
@@ -9,9 +9,9 @@ RUN yarn install --frozen-lockfile
 # Rebuild the source code only when needed
 FROM node:16-alpine AS builder
 WORKDIR /app
-COPY . .
 COPY --from=deps /app/node_modules ./node_modules
-RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+COPY . .
+RUN yarn build
 
 # Production image, copy all the files and run next
 FROM node:16-alpine AS runner

diff --git a/examples/with-graphql-hooks/lib/graphql-client.js b/examples/with-graphql-hooks/lib/graphql-client.js
@@ -7,7 +7,7 @@ let graphQLClient
 function createClient(initialState) {
   return new GraphQLClient({
     ssrMode: typeof window === 'undefined',
-    url: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
+    url: 'https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api', // Server URL (must be absolute)
     cache: memCache({ initialState }),
   })
 }

diff --git a/examples/with-segment-analytics/pages/_app.js b/examples/with-segment-analytics/pages/_app.js
@@ -24,7 +24,10 @@ function MyApp({ Component, pageProps }) {
   return (
     <Page>
       {/* Inject the Segment snippet into the <head> of the document  */}
-      <Script dangerouslySetInnerHTML={{ __html: renderSnippet() }} />
+      <Script
+        id="segment-script"
+        dangerouslySetInnerHTML={{ __html: renderSnippet() }}
+      />
       <Component {...pageProps} />
     </Page>
   )

diff --git a/examples/with-semantic-ui/.nowignore b/examples/with-semantic-ui/.nowignore
diff --git a/examples/with-semantic-ui/next.config.js b/examples/with-semantic-ui/next.config.js
diff --git a/examples/with-semantic-ui/package.json b/examples/with-semantic-ui/package.json
@@ -6,15 +6,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.1.8-canary.11",
+    "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.84.0"
-  },
-  "devDependencies": {
-    "file-loader": "^3.0.1",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.0"
+    "semantic-ui-react": "^2.0.4"
   }
 }
diff --git a/examples/with-semantic-ui/pages/SmallImage.png b/examples/with-semantic-ui/pages/SmallImage.png
diff --git a/examples/with-semantic-ui/pages/_app.js b/examples/with-semantic-ui/pages/_app.js
@@ -1,8 +1,6 @@
 import 'semantic-ui-css/semantic.min.css'
-import './styles.css'
+import '../styles/global.css'
 
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
-
-export default MyApp
diff --git a/examples/with-semantic-ui/pages/index.js b/examples/with-semantic-ui/pages/index.js
@@ -1,50 +1,46 @@
-import { Modal, Button, Icon } from 'semantic-ui-react'
-
-import SmallImage from './SmallImage.png'
-import LargeImage from './LargeImage.png'
+import Image from 'next/image'
+import * as React from 'react'
+import { Button, Header, Modal, Icon } from 'semantic-ui-react'
 
 export default function Home() {
+  const [open, setOpen] = React.useState(false)
+
   return (
     <div className="centered">
       <Icon size="massive" name="world" />
       <div className="separator" />
-      <Modal trigger={<Button>Show Modal</Button>}>
-        <Modal.Header>
-          <em>publicPath</em> should be set to <em>/_next/static/</em>
-        </Modal.Header>
-        <Modal.Content>
+      <Modal
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        open={open}
+        trigger={<Button>Show Modal</Button>}
+      >
+        <Modal.Header>Select a Photo</Modal.Header>
+        <Modal.Content image>
+          <span style={{ marginRight: 21 }}>
+            <Image src="/image.png" width={400} height={266} />
+          </span>
           <Modal.Description>
-            <div className="wrapper">
-              <div className="row">
-                <p>
-                  Larger content should be still available as a fallback to{' '}
-                  <em>fileLoader</em> but it should not pollute{' '}
-                  <em>/.next/static/css</em> folder. You should see two images
-                  below. One, smaller, loaded as data url, and one, bigger,
-                  loaded via url.
-                </p>
-              </div>
-              <div className="row">
-                <img src={SmallImage} />
-                <p>
-                  A small image should be loaded as data url:{' '}
-                  <em>{SmallImage.substr(0, 100)}...</em>
-                </p>
-              </div>
-
-              <div className="row">
-                <img src={LargeImage} />
-                <p>
-                  A large image should be loaded as a url: <em>{LargeImage}</em>
-                </p>
-              </div>
-              <p className="border">
-                You should also still be able to load regular css. This text
-                should have border.
-              </p>
-            </div>
+            <Header>Default Profile Image</Header>
+            <p>
+              We've found the following gravatar image associated with your
+              e-mail address.
+            </p>
+            <p>Is it okay to use this photo?</p>
           </Modal.Description>
         </Modal.Content>
+        <Modal.Actions>
+          <Button color="black" onClick={() => setOpen(false)}>
+            Nope
+          </Button>
+          <Button
+            content="Yep, that's me"
+            labelPosition="right"
+            icon="checkmark"
+            onClick={() => setOpen(false)}
+            positive
+          />
+        </Modal.Actions>
       </Modal>
     </div>
   )

diff --git a/...les/with-semantic-ui/pages/LargeImage.png → examples/with-semantic-ui/public/image.png b/...les/with-semantic-ui/pages/LargeImage.png → examples/with-semantic-ui/public/image.png
diff --git a/examples/with-semantic-ui/pages/styles.css → examples/with-semantic-ui/styles/global.css b/examples/with-semantic-ui/pages/styles.css → examples/with-semantic-ui/styles/global.css
diff --git a/examples/with-webpack-bundle-analyzer/.gitignore b/examples/with-webpack-bundle-analyzer/.gitignore
diff --git a/examples/with-webpack-bundle-analyzer/README.md b/examples/with-webpack-bundle-analyzer/README.md