Merge branch 'fix/issue-39321' of github.com:vercel/next.js into fix/…

…issue-39321

.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-02-23
+  RUST_TOOLCHAIN: nightly-2022-06-12
   PNPM_VERSION: 7.2.1
 
 jobs:

docs/advanced-features/middleware.md

@@ -90,6 +90,19 @@ export const config = {
 
 > **Note:** The `matcher` values need to be constants so they can be statically analyzed at build-time. Dynamic values such as variables will be ignored.
 
+Configured matchers:
+
+1. MUST start with `/`
+1. can include named parameters: `/about/:path` matches `/about/a` and `/about/b` but not `/about/a/c`
+1. can have modifiers on named parameters (starting with `:`): `/about/:path*` matches `/about/a/b/c` because `*` is _zero or more_. `?` is _zero or one_ and `+` _one or more_
+1. can use regular expression enclosed in parenthesis: `/about/(.*)` is the same as `/about/:path*`
+
+Read more details on [path-to-regexp](https://github.com/pillarjs/path-to-regexp#path-to-regexp-1) documentation.
+
+> **Note:** For backward compatibility, Next.js always considers `/public` as `/public/index`. Therefore, a matcher of `/public/:path` will match.
+
+> **Note:** It is not possible to exclude middleware from matching static path starting with `_next/`. This allow enforcing security with middleware.
+
 ### Conditional Statements
 
 ```typescript

errors/middleware-upgrade-guide.md

@@ -388,4 +388,4 @@ Prior to Next.js `v12.2`, Middleware was not executed for `_next` requests.
 
 For cases where Middleware is used for authorization, you should migrate to use `rewrite`/`redirect` to Pages that show an authorization error, login forms, or to an API Route.
 
-See [No Reponse Body](#no-response-body) for an example of how to migrate to use `rewrite`/`redirect`.
+See [No Response Body](#no-response-body) for an example of how to migrate to use `rewrite`/`redirect`.

examples/cms-sanity/lib/sanity.server.js

@@ -12,7 +12,7 @@ export const previewClient = createClient({
   ...sanityConfig,
   useCdn: false,
   // Fallback to using the WRITE token until https://www.sanity.io/docs/vercel-integration starts shipping a READ token.
-  // As this client only exists on the server and the token is never shared with the browser, we ddon't risk escalating permissions to untrustworthy users
+  // As this client only exists on the server and the token is never shared with the browser, we don't risk escalating permissions to untrustworthy users
   token:
     process.env.SANITY_API_READ_TOKEN || process.env.SANITY_API_WRITE_TOKEN,
 })

examples/middleware-matcher/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/middleware-matcher/README.md

@@ -0,0 +1,37 @@
+# Middleware
+
+This example shows how to configure your [Next.js Middleware](https://nextjs.org/docs/advanced-features/middleware) to only match specific pages.
+
+The index page ([`pages/index.js`](pages/index.js)) has a list of links to dynamic pages, which will tell whether they were matched or not.
+
+The Middleware file ([`middleware.js`](middleware.js)) has a special `matcher` configuration key, allowing you to fine-grained control [matched pages](https://nextjs.org/docs/advanced-features/middleware#matcher).
+
+Please keep in mind that:
+
+1. Middleware always runs first
+1. Middleware always matches `_next` routes on server side
+1. matcher must always starts with a '/'
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/middleware-matcher&project-name=middleware-matcher&repository-name=middleware-matcher)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example middleware-matcher middleware-matcher-app
+```
+
+```bash
+yarn create next-app --example middleware-matcher middleware-matcher-app
+```
+
+```bash
+pnpm create next-app --example middleware-matcher middleware-matcher-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/middleware-matcher/middleware.js

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server'
+
+export default function middleware(req) {
+  const { pathname } = new URL(req.url)
+  const response = NextResponse.next()
+  response.headers.set(
+    'set-cookie',
+    `middleware-slug=${pathname.slice(1)}; Path=${pathname}`
+  )
+  return response
+}
+
+export const config = {
+  matcher: ['/public/disclaimer', '/((?!public|static).*)'],
+}

examples/middleware-matcher/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

examples/middleware-matcher/pages/[...slug].jsx

@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router'
+
+function hasMiddlewareMatched(slug) {
+  const values =
+    (typeof document !== 'undefined' ? document.cookie : '')
+      .split(';')
+      .map((pair) => pair.split('='))
+      .filter(([key]) => key === 'middleware-slug')
+      .map(([, value]) => value.trim()) ?? []
+  return values.some((value) => value === slug?.join('/'))
+}
+
+export const ContentPage = (props) => {
+  const {
+    query: { slug }, // slug is an array of path segments
+  } = useRouter()
+  return (
+    <>
+      <h1>
+        {hasMiddlewareMatched(slug)
+          ? 'Middleware matched!'
+          : 'Middleware ignored me'}
+      </h1>
+      <a href="/">{'<-'} back</a>
+    </>
+  )
+}
+
+export default ContentPage

examples/middleware-matcher/pages/index.jsx

@@ -0,0 +1,30 @@
+const Home = () => {
+  const matching = ['/about', '/about/topic/cats', '/public/disclaimer']
+  const notMatching = ['/public', '/public/disclaimer/nested', '/static']
+  return (
+    <div>
+      <h1>Middleware matching</h1>
+      <p>The current middleware configuration is:</p>
+      <pre>
+        export const config = {'{'}
+        <br />
+        {'  '}matcher: [ <br />
+        {'    '}'/public/disclaimer', // match a single, specific page
+        <br />
+        {'    '}'/((?!public|static).*) // match all pages not starting with
+        'public' or 'static' <br />
+        {'   '}] <br />
+        {'}'}
+      </pre>
+      <ul>
+        {[...notMatching, ...matching].map((href) => (
+          <li key={href}>
+            <a href={href}>{href}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default Home

examples/with-styled-components-babel/package.json

@@ -7,16 +7,16 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "styled-components": "^5.2.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@types/node": "17.0.24",
-    "@types/react": "^17.0.2",
-    "@types/styled-components": "5.1.25",
-    "babel-plugin-styled-components": "^1.12.0",
-    "typescript": "4.6.3"
+    "@types/node": "18.7.14",
+    "@types/react": "^18.0.18",
+    "@types/styled-components": "5.1.26",
+    "babel-plugin-styled-components": "^2.0.7",
+    "typescript": "4.8.2"
   }
 }

examples/with-styled-components-babel/pages/_document.tsx

@@ -18,12 +18,12 @@ export default class MyDocument extends Document {
       const initialProps = await Document.getInitialProps(ctx)
       return {
         ...initialProps,
-        styles: [
+        styles: (
           <>
             {initialProps.styles}
             {sheet.getStyleElement()}
-          </>,
-        ],
+          </>
+        ),
       }
     } finally {
       sheet.seal()

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.2.6-canary.8"
+  "version": "12.2.6-canary.9"
 }

package.json

@@ -70,7 +70,7 @@
     "@svgr/webpack": "5.5.0",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.2.203",
-    "@swc/helpers": "0.4.2",
+    "@swc/helpers": "0.4.11",
     "@testing-library/react": "13.0.0",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "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.2.6-canary.8",
+    "@next/eslint-plugin-next": "12.2.6-canary.9",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "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.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "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.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "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",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.2.6-canary.8",
+  "version": "12.2.6-canary.9",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",