From 7d3bfac39fd4891d36a809169f43b5fb65011dd6 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 26 Apr 2022 13:46:09 +0200
Subject: [PATCH 1/3] Add stitches and material-ui tests for new link behavior
 + fix TypeScript types when imported (#36474)

Adds additional tests for material-ui and stitches based on questions in the Twitter thread.

Fixes TypeScript types when `LinkProps` is imported and used in combination with `<button>`, added a TODO to change this at a later point when the new behavior is the default instead of opt-in.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 packages/next/client/link.tsx                 | 18 +++-
 test/e2e/new-link-behavior/index.test.ts      |  2 +-
 .../e2e/new-link-behavior/material-ui.test.ts | 46 ++++++++++
 .../material-ui/next.config.js                |  6 ++
 .../material-ui/pages/_app.js                 | 27 ++++++
 .../material-ui/pages/_document.js            | 88 ++++++++++++++++++
 .../material-ui/pages/about.js                | 25 +++++
 .../material-ui/pages/index.js                | 24 +++++
 .../material-ui/src/Copyright.js              | 15 +++
 .../new-link-behavior/material-ui/src/Link.js | 27 ++++++
 .../material-ui/src/ProTip.js                 | 25 +++++
 .../material-ui/src/createEmotionCache.js     |  7 ++
 .../material-ui/src/theme.js                  | 19 ++++
 test/e2e/new-link-behavior/stitches.test.ts   | 41 +++++++++
 .../stitches/components/StitchesLogo.jsx      | 50 ++++++++++
 .../new-link-behavior/stitches/next.config.js |  6 ++
 .../stitches/pages/_document.jsx              | 22 +++++
 .../stitches/pages/about.jsx                  | 48 ++++++++++
 .../stitches/pages/index.jsx                  | 49 ++++++++++
 .../stitches/stitches.config.js               | 81 ++++++++++++++++
 test/e2e/new-link-behavior/typescript.test.ts | 34 +++++++
 .../typescript/pages/index.tsx                | 92 +++++++++++++++++++
 .../typescript/tsconfig.json                  | 20 ++++
 23 files changed, 766 insertions(+), 6 deletions(-)
 create mode 100644 test/e2e/new-link-behavior/material-ui.test.ts
 create mode 100644 test/e2e/new-link-behavior/material-ui/next.config.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/pages/_app.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/pages/_document.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/pages/about.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/pages/index.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/src/Copyright.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/src/Link.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/src/ProTip.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/src/createEmotionCache.js
 create mode 100644 test/e2e/new-link-behavior/material-ui/src/theme.js
 create mode 100644 test/e2e/new-link-behavior/stitches.test.ts
 create mode 100644 test/e2e/new-link-behavior/stitches/components/StitchesLogo.jsx
 create mode 100644 test/e2e/new-link-behavior/stitches/next.config.js
 create mode 100644 test/e2e/new-link-behavior/stitches/pages/_document.jsx
 create mode 100644 test/e2e/new-link-behavior/stitches/pages/about.jsx
 create mode 100644 test/e2e/new-link-behavior/stitches/pages/index.jsx
 create mode 100644 test/e2e/new-link-behavior/stitches/stitches.config.js
 create mode 100644 test/e2e/new-link-behavior/typescript.test.ts
 create mode 100644 test/e2e/new-link-behavior/typescript/pages/index.tsx
 create mode 100644 test/e2e/new-link-behavior/typescript/tsconfig.json

diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
index 88d8185d7ea17..4c7929c20663e 100644
--- a/packages/next/client/link.tsx
+++ b/packages/next/client/link.tsx
@@ -30,18 +30,21 @@ type InternalLinkProps = {
   prefetch?: boolean
   locale?: string | false
   legacyBehavior?: boolean
+  // e: any because as it would otherwise overlap with existing types
   /**
    * requires experimental.newNextLinkBehavior
    */
-  onMouseEnter?: (e: React.MouseEvent) => void
+  onMouseEnter?: (e: any) => void
+  // e: any because as it would otherwise overlap with existing types
   /**
    * requires experimental.newNextLinkBehavior
    */
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: any) => void
 }
 
-export type LinkProps = InternalLinkProps &
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
+// TODO: Include the full set of Anchor props
+// adding this to the publicly exported type currently breaks existing apps
+export type LinkProps = InternalLinkProps
 type LinkPropsRequired = RequiredKeys<LinkProps>
 type LinkPropsOptional = OptionalKeys<InternalLinkProps>
 
@@ -116,7 +119,12 @@ function linkClicked(
   })
 }
 
-function Link(props: React.PropsWithChildren<LinkProps>) {
+function Link(
+  props: React.PropsWithChildren<
+    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> &
+      LinkProps
+  >
+) {
   const {
     legacyBehavior = Boolean(process.env.__NEXT_NEW_LINK_BEHAVIOR) !== true,
   } = props
diff --git a/test/e2e/new-link-behavior/index.test.ts b/test/e2e/new-link-behavior/index.test.ts
index b406c3a1bb3d9..4330dc2c67684 100644
--- a/test/e2e/new-link-behavior/index.test.ts
+++ b/test/e2e/new-link-behavior/index.test.ts
@@ -18,7 +18,7 @@ async function matchLogs(browser, includes: string) {
   return found
 }
 
-const appDir = path.join(__dirname, './app')
+const appDir = path.join(__dirname, 'app')
 
 describe('New Link Behavior', () => {
   let next: NextInstance
diff --git a/test/e2e/new-link-behavior/material-ui.test.ts b/test/e2e/new-link-behavior/material-ui.test.ts
new file mode 100644
index 0000000000000..0f72ebd47b6ca
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui.test.ts
@@ -0,0 +1,46 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import webdriver from 'next-webdriver'
+import path from 'path'
+
+const appDir = path.join(__dirname, 'material-ui')
+
+describe('New Link Behavior with material-ui', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(path.join(appDir, 'pages')),
+        src: new FileRef(path.join(appDir, 'src')),
+        'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+      },
+      dependencies: {
+        '@emotion/cache': 'latest',
+        '@emotion/react': 'latest',
+        '@emotion/server': 'latest',
+        '@emotion/styled': 'latest',
+        '@mui/icons-material': 'latest',
+        '@mui/material': 'latest',
+        next: 'latest',
+        'prop-types': 'latest',
+        react: 'latest',
+        'react-dom': 'latest',
+        eslint: 'latest',
+        'eslint-config-next': 'latest',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should render MuiLink with <a>', async () => {
+    const browser = await webdriver(next.url, `/`)
+    const element = await browser.elementByCss('a[href="/about"]')
+
+    const color = await element.getComputedCss('color')
+    expect(color).toBe('rgb(25, 133, 123)')
+
+    const text = await element.text()
+    expect(text).toBe('Go to the about page')
+  })
+})
diff --git a/test/e2e/new-link-behavior/material-ui/next.config.js b/test/e2e/new-link-behavior/material-ui/next.config.js
new file mode 100644
index 0000000000000..a472501c6ac7e
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  experimental: {
+    newNextLinkBehavior: true,
+  },
+}
diff --git a/test/e2e/new-link-behavior/material-ui/pages/_app.js b/test/e2e/new-link-behavior/material-ui/pages/_app.js
new file mode 100644
index 0000000000000..e8ed2b4f2c156
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/pages/_app.js
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import Head from 'next/head'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { CacheProvider } from '@emotion/react'
+import theme from '../src/theme'
+import createEmotionCache from '../src/createEmotionCache'
+
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache()
+
+export default function MyApp(props) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
+
+  return (
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </CacheProvider>
+  )
+}
diff --git a/test/e2e/new-link-behavior/material-ui/pages/_document.js b/test/e2e/new-link-behavior/material-ui/pages/_document.js
new file mode 100644
index 0000000000000..cd639686df4e2
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/pages/_document.js
@@ -0,0 +1,88 @@
+import * as React from 'react'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import createEmotionServer from '@emotion/server/create-instance'
+import theme from '../src/theme'
+import createEmotionCache from '../src/createEmotionCache'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          {/* PWA primary color */}
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link rel="shortcut icon" href="/static/favicon.ico" />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+          {/* Inject MUI styles first to match with the prepend: true configuration. */}
+          {this.props.emotionStyleTags}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+MyDocument.getInitialProps = async (ctx) => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  const originalRenderPage = ctx.renderPage
+
+  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = createEmotionCache()
+  const { extractCriticalToChunks } = createEmotionServer(cache)
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />
+        },
+    })
+
+  const initialProps = await Document.getInitialProps(ctx)
+  // This is important. It prevents emotion to render invalid HTML.
+  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+  const emotionStyles = extractCriticalToChunks(initialProps.html)
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(' ')}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ))
+
+  return {
+    ...initialProps,
+    emotionStyleTags,
+  }
+}
diff --git a/test/e2e/new-link-behavior/material-ui/pages/about.js b/test/e2e/new-link-behavior/material-ui/pages/about.js
new file mode 100644
index 0000000000000..40f0476507941
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/pages/about.js
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import ProTip from '../src/ProTip'
+import Link from '../src/Link'
+import Copyright from '../src/Copyright'
+
+export default function About() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Next.js example
+        </Typography>
+        <Button variant="contained" component={Link} noLinkStyle href="/">
+          Go to the main page
+        </Button>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  )
+}
diff --git a/test/e2e/new-link-behavior/material-ui/pages/index.js b/test/e2e/new-link-behavior/material-ui/pages/index.js
new file mode 100644
index 0000000000000..5c7f9ff918444
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/pages/index.js
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import ProTip from '../src/ProTip'
+import Link from '../src/Link'
+import Copyright from '../src/Copyright'
+
+export default function Index() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Next.js example
+        </Typography>
+        <Link href="/about" color="secondary">
+          Go to the about page
+        </Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  )
+}
diff --git a/test/e2e/new-link-behavior/material-ui/src/Copyright.js b/test/e2e/new-link-behavior/material-ui/src/Copyright.js
new file mode 100644
index 0000000000000..c9e837fddb861
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/src/Copyright.js
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import Typography from '@mui/material/Typography'
+import MuiLink from '@mui/material/Link'
+
+export default function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://mui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  )
+}
diff --git a/test/e2e/new-link-behavior/material-ui/src/Link.js b/test/e2e/new-link-behavior/material-ui/src/Link.js
new file mode 100644
index 0000000000000..41ea0f99ec459
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/src/Link.js
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import NextLink from 'next/link'
+import MuiLink from '@mui/material/Link'
+import { styled } from '@mui/material/styles'
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled(NextLink)({})
+
+export const NextLinkComposed = React.forwardRef(function NextLinkComposed(
+  props,
+  ref
+) {
+  const { children, ...rest } = props
+  return (
+    <Anchor href="/" ref={ref} {...rest}>
+      {children}
+    </Anchor>
+  )
+})
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/api-reference/next/link
+const Link = React.forwardRef(function Link(props, ref) {
+  return <MuiLink component={NextLinkComposed} ref={ref} {...props} />
+})
+
+export default Link
diff --git a/test/e2e/new-link-behavior/material-ui/src/ProTip.js b/test/e2e/new-link-behavior/material-ui/src/ProTip.js
new file mode 100644
index 0000000000000..3a44d270cc5ce
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/src/ProTip.js
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Link from '@mui/material/Link'
+import SvgIcon from '@mui/material/SvgIcon'
+import Typography from '@mui/material/Typography'
+
+function LightBulbIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  )
+}
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+      Pro tip: See more{' '}
+      <Link href="https://mui.com/getting-started/templates/">
+        templates
+      </Link>{' '}
+      on the MUI documentation.
+    </Typography>
+  )
+}
diff --git a/test/e2e/new-link-behavior/material-ui/src/createEmotionCache.js b/test/e2e/new-link-behavior/material-ui/src/createEmotionCache.js
new file mode 100644
index 0000000000000..a907ea1d3b151
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/src/createEmotionCache.js
@@ -0,0 +1,7 @@
+import createCache from '@emotion/cache'
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  return createCache({ key: 'css', prepend: true })
+}
diff --git a/test/e2e/new-link-behavior/material-ui/src/theme.js b/test/e2e/new-link-behavior/material-ui/src/theme.js
new file mode 100644
index 0000000000000..f9b08f773b0be
--- /dev/null
+++ b/test/e2e/new-link-behavior/material-ui/src/theme.js
@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles'
+import { red } from '@mui/material/colors'
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+})
+
+export default theme
diff --git a/test/e2e/new-link-behavior/stitches.test.ts b/test/e2e/new-link-behavior/stitches.test.ts
new file mode 100644
index 0000000000000..337426e08ca3f
--- /dev/null
+++ b/test/e2e/new-link-behavior/stitches.test.ts
@@ -0,0 +1,41 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import webdriver from 'next-webdriver'
+import path from 'path'
+
+const appDir = path.join(__dirname, 'stitches')
+
+describe('New Link Behavior with stitches', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(path.join(appDir, 'pages')),
+        components: new FileRef(path.join(appDir, 'components')),
+        'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+        'stitches.config.js': new FileRef(
+          path.join(appDir, 'stitches.config.js')
+        ),
+      },
+      dependencies: {
+        '@stitches/react': '^1.2.6',
+        next: 'latest',
+        react: 'latest',
+        'react-dom': 'latest',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should render <a>', async () => {
+    const browser = await webdriver(next.url, `/`)
+    const element = await browser.elementByCss('a[href="/about"]')
+
+    const color = await element.getComputedCss('color')
+    expect(color).toBe('rgb(78, 39, 231)')
+
+    const text = await element.text()
+    expect(text).toBe('Visit About')
+  })
+})
diff --git a/test/e2e/new-link-behavior/stitches/components/StitchesLogo.jsx b/test/e2e/new-link-behavior/stitches/components/StitchesLogo.jsx
new file mode 100644
index 0000000000000..a08496120e827
--- /dev/null
+++ b/test/e2e/new-link-behavior/stitches/components/StitchesLogo.jsx
@@ -0,0 +1,50 @@
+const StitchesLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="35"
+    height="35"
+    viewBox="0 0 35 35"
+    fill="none"
+  >
+    <circle
+      cx="17.5"
+      cy="17.5"
+      r="14.5"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path d="M12.8184 31.3218L31.8709 20.3218" stroke="currentColor" />
+    <path d="M3.31836 14.8674L22.3709 3.86743" stroke="currentColor" />
+    <path
+      d="M8.65332 29.1077L25.9738 19.1077"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.21582 16.0815L26.5363 6.08154"
+      stroke="currentColor"
+      strokeLinecap="round"
+    />
+    <path
+      d="M13.2334 14.2297L22.5099 21.1077"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.6973 12.2302L25.9736 19.1078"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.21582 16.0815L19.0459 23.1078"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default StitchesLogo
diff --git a/test/e2e/new-link-behavior/stitches/next.config.js b/test/e2e/new-link-behavior/stitches/next.config.js
new file mode 100644
index 0000000000000..a472501c6ac7e
--- /dev/null
+++ b/test/e2e/new-link-behavior/stitches/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  experimental: {
+    newNextLinkBehavior: true,
+  },
+}
diff --git a/test/e2e/new-link-behavior/stitches/pages/_document.jsx b/test/e2e/new-link-behavior/stitches/pages/_document.jsx
new file mode 100644
index 0000000000000..72b213555b695
--- /dev/null
+++ b/test/e2e/new-link-behavior/stitches/pages/_document.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import { getCssText } from '../stitches.config'
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <style
+            id="stitches"
+            dangerouslySetInnerHTML={{ __html: getCssText() }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/test/e2e/new-link-behavior/stitches/pages/about.jsx b/test/e2e/new-link-behavior/stitches/pages/about.jsx
new file mode 100644
index 0000000000000..2b29cd63f0b16
--- /dev/null
+++ b/test/e2e/new-link-behavior/stitches/pages/about.jsx
@@ -0,0 +1,48 @@
+import { styled } from '../stitches.config'
+import StitchesLogo from '../components/StitchesLogo'
+
+const Box = styled('div', {})
+
+const Text = styled('p', {
+  fontFamily: '$system',
+  color: '$hiContrast',
+})
+
+const Link = styled('a', {
+  fontFamily: '$system',
+  textDecoration: 'none',
+  color: '$purple600',
+})
+
+const Container = styled('div', {
+  marginX: 'auto',
+  paddingX: '$3',
+
+  variants: {
+    size: {
+      1: {
+        maxWidth: '300px',
+      },
+      2: {
+        maxWidth: '585px',
+      },
+      3: {
+        maxWidth: '865px',
+      },
+    },
+  },
+})
+
+export default function Home() {
+  return (
+    <Box css={{ paddingY: '$6' }}>
+      <Container size={{ '@initial': '1', '@bp1': '2' }}>
+        <StitchesLogo />
+        <Text as="h1">Hello, from About.</Text>
+        <Text>
+          <Link href="/">Visit Home</Link>.
+        </Text>
+      </Container>
+    </Box>
+  )
+}
diff --git a/test/e2e/new-link-behavior/stitches/pages/index.jsx b/test/e2e/new-link-behavior/stitches/pages/index.jsx
new file mode 100644
index 0000000000000..d1c6ac7656221
--- /dev/null
+++ b/test/e2e/new-link-behavior/stitches/pages/index.jsx
@@ -0,0 +1,49 @@
+import NextLink from 'next/link'
+import { styled } from '../stitches.config'
+import StitchesLogo from '../components/StitchesLogo'
+
+const Box = styled('div', {})
+
+const Text = styled('p', {
+  fontFamily: '$system',
+  color: '$hiContrast',
+})
+
+const Link = styled(NextLink, {
+  fontFamily: '$system',
+  textDecoration: 'none',
+  color: '$purple600',
+})
+
+const Container = styled('div', {
+  marginX: 'auto',
+  paddingX: '$3',
+
+  variants: {
+    size: {
+      1: {
+        maxWidth: '300px',
+      },
+      2: {
+        maxWidth: '585px',
+      },
+      3: {
+        maxWidth: '865px',
+      },
+    },
+  },
+})
+
+export default function Home() {
+  return (
+    <Box css={{ paddingY: '$6' }}>
+      <Container size={{ '@initial': '1', '@bp1': '2' }}>
+        <StitchesLogo />
+        <Text as="h1">Hello, from Stitches.</Text>
+        <Text>
+          <Link href="/about">Visit About</Link>.
+        </Text>
+      </Container>
+    </Box>
+  )
+}
diff --git a/test/e2e/new-link-behavior/stitches/stitches.config.js b/test/e2e/new-link-behavior/stitches/stitches.config.js
new file mode 100644
index 0000000000000..8698b5f04cd35
--- /dev/null
+++ b/test/e2e/new-link-behavior/stitches/stitches.config.js
@@ -0,0 +1,81 @@
+import { createStitches } from '@stitches/react'
+
+export const {
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  styled,
+  theme,
+} = createStitches({
+  theme: {
+    colors: {
+      hiContrast: 'hsl(206,10%,5%)',
+      loContrast: 'white',
+
+      gray100: 'hsl(206,22%,99%)',
+      gray200: 'hsl(206,12%,97%)',
+      gray300: 'hsl(206,11%,92%)',
+      gray400: 'hsl(206,10%,84%)',
+      gray500: 'hsl(206,10%,76%)',
+      gray600: 'hsl(206,10%,44%)',
+
+      purple100: 'hsl(252,100%,99%)',
+      purple200: 'hsl(252,100%,98%)',
+      purple300: 'hsl(252,100%,94%)',
+      purple400: 'hsl(252,75%,84%)',
+      purple500: 'hsl(252,78%,60%)',
+      purple600: 'hsl(252,80%,53%)',
+    },
+    space: {
+      1: '5px',
+      2: '10px',
+      3: '15px',
+      4: '20px',
+      5: '25px',
+      6: '35px',
+    },
+    sizes: {
+      1: '5px',
+      2: '10px',
+      3: '15px',
+      4: '20px',
+      5: '25px',
+      6: '35px',
+    },
+    fontSizes: {
+      1: '12px',
+      2: '13px',
+      3: '15px',
+      4: '17px',
+      5: '19px',
+      6: '21px',
+    },
+    fonts: {
+      system: 'system-ui',
+    },
+  },
+  utils: {
+    marginX: (value) => ({
+      marginLeft: value,
+      marginRight: value,
+    }),
+    marginY: (value) => ({
+      marginTop: value,
+      marginBottom: value,
+    }),
+    paddingX: (value) => ({
+      paddingLeft: value,
+      paddingRight: value,
+    }),
+    paddingY: (value) => ({
+      paddingTop: value,
+      paddingBottom: value,
+    }),
+  },
+  media: {
+    bp1: '(min-width: 520px)',
+    bp2: '(min-width: 900px)',
+  },
+})
diff --git a/test/e2e/new-link-behavior/typescript.test.ts b/test/e2e/new-link-behavior/typescript.test.ts
new file mode 100644
index 0000000000000..a9ea524d3b4b5
--- /dev/null
+++ b/test/e2e/new-link-behavior/typescript.test.ts
@@ -0,0 +1,34 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+import cheerio from 'cheerio'
+import path from 'path'
+
+const appDir = path.join(__dirname, 'typescript')
+
+describe('New Link Behavior', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(path.join(appDir, 'pages')),
+        'tsconfig.json': new FileRef(path.join(appDir, 'tsconfig.json')),
+      },
+      dependencies: {
+        typescript: '*',
+        '@types/react': '*',
+        '@types/node': '*',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should render link with <a>', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    const $ = cheerio.load(html)
+    const $a = $('a')
+    expect($a.text()).toBe('Visit')
+    expect($a.attr('href')).toBe('/test')
+  })
+})
diff --git a/test/e2e/new-link-behavior/typescript/pages/index.tsx b/test/e2e/new-link-behavior/typescript/pages/index.tsx
new file mode 100644
index 0000000000000..0dab5e87d7888
--- /dev/null
+++ b/test/e2e/new-link-behavior/typescript/pages/index.tsx
@@ -0,0 +1,92 @@
+import {
+  PropsWithRef,
+  PropsWithoutRef,
+  HTMLProps,
+  CSSProperties,
+  MouseEventHandler,
+} from 'react'
+import NextLink, { LinkProps } from 'next/link'
+
+type NativeButtonProps = Omit<
+  HTMLProps<HTMLButtonElement>,
+  'type' | 'prefix' | 'size' | 'width' | 'shape' | 'onClick'
+>
+
+export type ButtonVariant = 'shadow' | 'invert' | 'unstyled' | 'ghost'
+export type ButtonAlignment = 'start' | 'grow' | 'center'
+
+type BaseButtonProps = NativeButtonProps & {
+  Component?: React.ElementType<any> // this could probably be better...
+  typeName?: 'button' | 'submit' | 'reset'
+  loading?: boolean
+  suffix?: React.ReactNode
+  prefix?: React.ReactNode
+  size?: 'small' | 'large'
+  variant?: ButtonVariant
+  align?: ButtonAlignment
+  svgOnly?: boolean
+  passthroughOnClick?: MouseEventHandler
+  passthroughOnMouseEnter?: MouseEventHandler
+  onClick?: () => void
+}
+
+type PropsWithShape = BaseButtonProps &
+  (
+    | {
+        width?: CSSProperties['width']
+        shape?: never
+      }
+    | {
+        shape?: 'square' | 'circle'
+        width?: never
+      }
+  )
+
+type PropsWithSvgOnly = PropsWithShape &
+  (
+    | {
+        // If you're here, you probably got a TS error on the svgOnly prop
+        // If you specify svgOnly, you MUST provide a descriptive label for the button
+        svgOnly?: true
+        'aria-label': string
+      }
+    | {
+        svgOnly?: never
+      }
+  )
+
+export type ButtonLinkProps = PropsWithRef<Omit<ButtonProps, 'href'>> &
+  LinkProps & {
+    tab?: boolean
+  }
+
+export const ButtonLink: React.FC<ButtonLinkProps> = ({
+  href,
+  as,
+  shallow,
+  children,
+}) => {
+  return (
+    <NextLink
+      href={href}
+      as={as}
+      shallow={shallow}
+      // Always passHref to the <a> component if it's defined.
+      passHref={!!href}
+    >
+      <a>{children}</a>
+    </NextLink>
+  )
+}
+
+export type ButtonProps = PropsWithSvgOnly
+
+const Visit = ({ onClick, ...props }: PropsWithoutRef<ButtonProps>) => {
+  return (
+    <ButtonLink href={'/test'} tab width={70} {...props}>
+      Visit
+    </ButtonLink>
+  )
+}
+
+export default Visit
diff --git a/test/e2e/new-link-behavior/typescript/tsconfig.json b/test/e2e/new-link-behavior/typescript/tsconfig.json
new file mode 100644
index 0000000000000..1563f3e878573
--- /dev/null
+++ b/test/e2e/new-link-behavior/typescript/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "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"]
+}

From 52816703be031a90483aeb89a602e4b2c9183b31 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 26 Apr 2022 14:15:28 +0200
Subject: [PATCH 2/3] v12.1.6-canary.8

---
 lerna.json                                   |  2 +-
 packages/create-next-app/package.json        |  2 +-
 packages/eslint-config-next/package.json     |  4 ++--
 packages/eslint-plugin-next/package.json     |  2 +-
 packages/next-bundle-analyzer/package.json   |  2 +-
 packages/next-codemod/package.json           |  2 +-
 packages/next-env/package.json               |  2 +-
 packages/next-mdx/package.json               |  2 +-
 packages/next-plugin-storybook/package.json  |  2 +-
 packages/next-polyfill-module/package.json   |  2 +-
 packages/next-polyfill-nomodule/package.json |  2 +-
 packages/next-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index f55e870737ec1..79c757b37b9dd 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.6-canary.7"
+  "version": "12.1.6-canary.8"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index dcf61694169b7..ae081dea88f33 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 2fd3aa2d7e956..2ee7f8375c10d 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-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.1.6-canary.7",
+    "@next/eslint-plugin-next": "12.1.6-canary.8",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.19.0",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index b84e0ba3196f7..4e80bc37595be 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index 5647e0e6de028..7a7524f5f798d 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index eae506788c4ab..2f073470365cc 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index a814e68adf454..a337eaf9c571e 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 0c9d1eaad9fc7..c05eef06f1c80 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index dfc74223fc649..358ad08539e9c 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 92ccd6998ee36..99c10bea00fe4 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-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",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index 38ee733bd5d5c..a89c888196c50 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 9709395d5ab0a..66b75a12b76ee 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index 765d678c4c533..b02e2a7a8b0f2 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.6-canary.7",
+    "@next/env": "12.1.6-canary.8",
     "caniuse-lite": "^1.0.30001332",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1"
@@ -117,11 +117,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.6-canary.7",
-    "@next/polyfill-nomodule": "12.1.6-canary.7",
-    "@next/react-dev-overlay": "12.1.6-canary.7",
-    "@next/react-refresh-utils": "12.1.6-canary.7",
-    "@next/swc": "12.1.6-canary.7",
+    "@next/polyfill-module": "12.1.6-canary.8",
+    "@next/polyfill-nomodule": "12.1.6-canary.8",
+    "@next/react-dev-overlay": "12.1.6-canary.8",
+    "@next/react-refresh-utils": "12.1.6-canary.8",
+    "@next/swc": "12.1.6-canary.8",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index c51f8e0b597d0..fb33db3250961 100644
--- a/packages/react-dev-overlay/package.json
+++ b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index 9e760535461c0..081a4b76035f7 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "12.1.6-canary.7",
+  "version": "12.1.6-canary.8",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From e97a6488185ba77a4f90016874b63973ad5cc80e Mon Sep 17 00:00:00 2001
From: Baoshuo Ren <i@baoshuo.ren>
Date: Tue, 26 Apr 2022 21:47:47 +0800
Subject: [PATCH 3/3] chore: remove git.io (#36479)

All links on git.io will stop redirecting after April 29, 2022.

- https://github.blog/changelog/2022-04-25-git-io-deprecation/



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 packages/next/server/lib/squoosh/impl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/server/lib/squoosh/impl.ts b/packages/next/server/lib/squoosh/impl.ts
index 5271e45fb4bca..8b55773048231 100644
--- a/packages/next/server/lib/squoosh/impl.ts
+++ b/packages/next/server/lib/squoosh/impl.ts
@@ -7,7 +7,7 @@ type EncoderKey = keyof typeof supportedFormats
 // Fixed in Node.js 16.5.0 and newer.
 // See https://github.com/nodejs/node/pull/39337
 // Eventually, remove this delay when engines is updated.
-// See https://git.io/JCTr0
+// See https://github.com/vercel/next.js/blob/1bcc923439f495a1717421e06af7e64c6003072c/packages/next/package.json#L249-L251
 const FIXED_VERSION = '16.5.0'
 const DELAY_MS = 1000
 let _promise: Promise<void> | undefined