Merge branch 'canary' into next-edge-ssr-bench

.github/actions/next-stats-action/src/run/index.js

@@ -253,9 +253,13 @@ async function linkPkgs(pkgDir = '', pkgPaths) {
   await fs.writeFile(pkgJsonPath, JSON.stringify(pkgData, null, 2), 'utf8')
 
   await fs.remove(yarnEnvValues.YARN_CACHE_FOLDER)
-  await exec(`cd ${pkgDir} && pnpm install`, false, {
-    env: yarnEnvValues,
-  })
+  await exec(
+    `cd ${pkgDir} && pnpm install --strict-peer-dependencies=false`,
+    false,
+    {
+      env: yarnEnvValues,
+    }
+  )
 }
 
 module.exports = runConfigs

.github/workflows/build_test_deploy.yml

@@ -9,7 +9,7 @@ name: Build, test, and deploy
 env:
   NAPI_CLI_VERSION: 2.7.0
   TURBO_VERSION: 1.3.2-canary.1
-  RUST_TOOLCHAIN: nightly-2022-06-12
+  RUST_TOOLCHAIN: nightly-2022-09-14
   PNPM_VERSION: 7.2.1
 
 jobs:
@@ -1008,7 +1008,7 @@ jobs:
       - run: npm i -g pnpm@${PNPM_VERSION}
       - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
       - run: ./scripts/publish-native.js $GITHUB_REF
-      - run: ./scripts/publish-release.sh
+      - run: ./scripts/publish-release.js
 
   testDeployE2E:
     name: E2E (deploy)

docs/advanced-features/error-handling.md

@@ -88,7 +88,7 @@ import ErrorBoundary from '../components/ErrorBoundary'
 function MyApp({ Component, pageProps }) {
   return (
     // Wrap the Component prop with ErrorBoundary component
-    <ErrorBoundary FallbackComponent={ErrorFallback}>
+    <ErrorBoundary>
       <Component {...pageProps} />
     </ErrorBoundary>
   )

docs/advanced-features/static-html-export.md

@@ -45,7 +45,7 @@ The majority of core Next.js features needed to build a static site are supporte
 - [Client-side data fetching](/docs/basic-features/data-fetching/client-side.md)
 - [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md)
 - [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md)
-- [Image Optimization](/docs/basic-features/image-optimization.md) using a [custom loader](/docs/basic-features/image-optimization.md#loader)
+- [Image Optimization](/docs/basic-features/image-optimization.md) using a [custom loader](/docs/basic-features/image-optimization.md#loaders)
 
 ## Unsupported Features
 

docs/testing.md

@@ -107,7 +107,7 @@ describe('Navigation', () => {
 })
 ```
 
-You can use `cy.visit("/")` instead of `cy.visit("http://localhost:3000/")` if you add `"baseUrl": "http://localhost:3000"` to the `cypress.json` configuration file.
+You can use `cy.visit("/")` instead of `cy.visit("http://localhost:3000/")` if you add `baseUrl: 'http://localhost:3000'` to the `cypress.config.js` configuration file.
 
 ### Running your Cypress tests
 

errors/react-hydration-error.md

@@ -37,6 +37,40 @@ function MyComponent() {
 }
 ```
 
+Another example:
+
+Invalid HTML may cause hydration mismatch such as div inside p.
+
+```jsx
+export const IncorrectComponent = () => {
+  return (
+    <p>
+      <div>
+        This is not correct and should never be done because the p tag has been
+        abused
+      </div>
+      <Image src="/vercel.svg" alt="" width="30" height="30" />
+    </p>
+  )
+}
+```
+
+How to fix it:
+
+```jsx
+export const CorrectComponent = () => {
+  return (
+    <div>
+      <div>
+        This is correct and should work because a div is really good for this
+        task.
+      </div>
+      <Image src="/vercel.svg" alt="" width="30" height="30" />
+    </div>
+  )
+}
+```
+
 Common causes with css-in-js libraries:
 
 - When using Styled Components / Emotion
@@ -50,5 +84,5 @@ Common causes with css-in-js libraries:
 
 ### Useful Links
 
-- [React Hydration Documentation](https://reactjs.org/docs/react-dom.html#hydrate)
+- [React Hydration Documentation](https://reactjs.org/docs/react-dom-client.html#hydrateroot)
 - [Josh Comeau's article on React Hydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/)

examples/cms-contentful/pages/api/revalidate.js

@@ -14,6 +14,8 @@ export default async function handler(req, res) {
   }
 
   try {
+    // Note: if this fails to parse you may have forget to set the
+    // "content-type" header correctly as mentioned here https://github.com/vercel/next.js/blob/canary/examples/cms-contentful/README.md#step-9-try-using-on-demand-revalidation
     let postSlug = req.body.fields.slug['en-US']
 
     // revalidate the individual post and the home page

examples/cms-sanity/.env.local.example

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_SANITY_PROJECT_ID=
 NEXT_PUBLIC_SANITY_DATASET=
 SANITY_API_READ_TOKEN=
+SANITY_REVALIDATE_SECRET=

examples/progressive-web-app/pages/index.tsx

@@ -34,6 +34,8 @@ export default function Home() {
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
             className={styles.card}
           >
             <h3>Deploy &rarr;</h3>

examples/using-router/components/CustomLink.tsx

@@ -0,0 +1,47 @@
+import { useRouter } from 'next/router'
+import { useEffect, ReactNode, HTMLAttributes } from 'react'
+
+type CustomLinkProps = {
+  children: ReactNode
+  href: string
+  prefetch?: boolean
+  replace?: boolean
+  shallow?: boolean
+} & HTMLAttributes<HTMLAnchorElement>
+
+// typically you want to use `next/link` for this usecase
+// but this example shows how you can also access the router
+// and use it manually
+export default function CustomLink({
+  children,
+  href,
+  prefetch = false,
+  replace = false,
+  shallow = false,
+  ...props
+}: CustomLinkProps) {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (prefetch) {
+      router.prefetch(href)
+    }
+  }, [router, href, prefetch])
+
+  return (
+    <a
+      {...props}
+      href={href}
+      onClick={(event) => {
+        event.preventDefault()
+        if (replace) {
+          router.replace(href, undefined, { shallow })
+        } else {
+          router.push(href, undefined, { shallow })
+        }
+      }}
+    >
+      {children}
+    </a>
+  )
+}

examples/using-router/components/Header.tsx

@@ -0,0 +1,14 @@
+import CustomLink from './CustomLink'
+
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <CustomLink href="/">Home</CustomLink>{' '}
+        <CustomLink href="/about" prefetch>
+          About
+        </CustomLink>
+      </nav>
+    </header>
+  )
+}

examples/using-router/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

examples/using-router/pages/about.js → examples/using-router/pages/about.tsx

@@ -1,10 +1,10 @@
 import Header from '../components/Header'
 
-export default function About() {
+export default function AboutPage() {
   return (
-    <div>
+    <>
       <Header />
       <p>This is the about page.</p>
-    </div>
+    </>
   )
 }

examples/using-router/pages/index.js → examples/using-router/pages/index.tsx

@@ -1,10 +1,10 @@
 import Header from '../components/Header'
 
-export default function Home() {
+export default function IndexPage() {
   return (
-    <div>
+    <>
       <Header />
       <p>HOME PAGE is here!</p>
-    </div>
+    </>
   )
 }

examples/using-router/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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/with-chakra-ui/README.md

@@ -10,7 +10,7 @@ We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript&project-name=with-chakra-ui&repository-name=with-chakra-ui)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui&project-name=with-chakra-ui&repository-name=with-chakra-ui)
 
 ## How to use
 

examples/with-cypress/pages/index.tsx

@@ -50,6 +50,8 @@ export default function Home() {
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
             className={styles.card}
           >
             <h2>Deploy &rarr;</h2>

examples/with-docker-compose/next-app/src/pages/index.tsx

@@ -41,6 +41,8 @@ export default function Home() {
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
             className={styles.card}
           >
             <h3>Deploy &rarr;</h3>

examples/with-docker-multi-env/pages/index.js

@@ -41,6 +41,8 @@ export default function Home() {
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
             className={styles.card}
           >
             <h3>Deploy &rarr;</h3>

examples/with-docker/pages/index.js

@@ -40,6 +40,8 @@ export default function Home() {
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
             className={styles.card}
           >
             <h3>Deploy &rarr;</h3>

examples/with-elasticsearch/pages/index.js

@@ -52,6 +52,8 @@ export default function Home({ isConnected }) {
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
             className={styles.card}
           >
             <h2>Deploy &rarr;</h2>