Merge branch 'canary' into fix_auth-with-stytch

.github/actions/issue-validator/index.js

@@ -8700,89 +8700,92 @@
     const r = 'template: bug'
     const s = 'please add a complete reproduction'
     const i = !!process.env.DEBUG
+    const json = (e) => JSON.stringify(e, null, 2)
     async function run() {
       try {
-        const {
-          payload: { issue: p, pull_request: d },
-          repo: o,
-        } = e.context
-        if (d || !p?.body) return
-        const { body: n, labels: l, number: m } = p
+        const { payload: p, repo: d } = e.context
+        const { issue: o, pull_request: n } = p
+        if (n || !o?.body) return
+        const l = p.label
+        const { body: m, number: u } = o
+        const c = o.labels
         a.info(
-          `Validating issue ${m}:\n  Label(s): ${l.join(', ')}\n  Body: ${n}`
+          `Validating issue ${u}:\n  Labels:\n    New: ${json(
+            l
+          )}\n    All: ${json(c)}\n  Body: ${m}`
         )
-        const u = l.some((e) => e.name === r)
-        const c = l.some((e) => e.name === t)
-        if (!u || !c) {
+        const v = l.name === r
+        const h = c.some((e) => e.name === t)
+        if (!v && !h) {
           return a.info(
             'Issue is ignored, because it is not a bug report or is not manually labeled'
           )
         }
         if (!process.env.GITHUB_TOKEN) {
           throw new Error('GITHUB_TOKEN is not set')
         }
-        const v = e.getOctokit(process.env.GITHUB_TOKEN).rest
+        const g = e.getOctokit(process.env.GITHUB_TOKEN).rest
         function notifyOnIssue(e, p) {
-          const d = { ...o, issue_number: m }
+          const t = { ...d, issue_number: u }
           if (i) {
             a.info('Skipping comment/label because we are in DEBUG mode')
-            a.info(JSON.stringify({ label: e, comment: p }, null, 2))
+            a.info(json({ label: e, comment: p }))
             return
           }
           return Promise.all([
-            v.issues.addLabels({ ...d, labels: [e] }),
-            v.issues.createComment({ ...d, body: p }),
+            g.issues.addLabels({ ...t, labels: [e] }),
+            g.issues.createComment({ ...t, body: p }),
           ])
         }
-        const h = n.includes(
+        const w = m.includes(
           '- [X] I verified that the issue exists in Next.js canary release'
         )
-        if (!h || c) {
+        if (!w || h) {
           await notifyOnIssue(
             t,
             'Please verify your issue reproduces with `next@canary`. The canary version of Next.js ships daily and includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces by running `npm install next@canary`. If the issue does not reproduce with the canary version, then it has already been fixed and this issue can be closed.'
           )
           return a.info(
             `Commented on issue, because it was ${
-              c ? 'manually labeled' : 'not verified against canary'
+              h ? 'manually labeled' : 'not verified against canary'
             }`
           )
         }
-        const g = n
+        const _ = m
           .match(/### Link to reproduction\n\n(?<url>.*)\n/)
           ?.groups?.url.trim()
-        if (!g || !(await fetch(g)).ok) {
+        if (!_ || !(await fetch(_)).ok) {
           await notifyOnIssue(
             s,
             'The link to the reproduction appears to be incorrect/unreachable. Please add a link to the reproduction of the issue. This is a required field. If your project is private, you can invite @balazsorban44 to the repository so the Next.js team can investigate further.'
           )
           return a.info(
-            `Commented on issue, because the reproduction url (${g}) was not reachable`
+            `Commented on issue, because the reproduction url (${_}) was not reachable`
           )
         }
-        const w = [
+        const T = [
           'Operating System:',
           'Binaries:',
           'Relevant packages:',
-        ].every((e) => n.includes(e))
-        if (!w) {
+        ].every((e) => m.includes(e))
+        if (!T) {
           return a.info(
             'Could not detect `next info` output, skipping as version detection might be unreliable'
           )
         }
-        const _ = n.match(
+        const E = m.match(
           /Relevant packages:\n      next: (?<version>\d+\.\d+\.\d+)/
         )?.groups?.version
-        a.info(`Reported Next.js version: ${_}`)
-        if (!_) {
+        a.info(`Reported Next.js version: ${E}`)
+        if (!E) {
           return
         }
-        const { tag_name: T } = await (await v.repos.listReleases(o)).data[0]
-        a.info(`Last Next.js version, based on GitHub releases: ${T}`)
-        if (T.includes('canary') && _ !== T) {
+        const { tag_name: b } = await (await g.repos.listReleases(d)).data[0]
+        a.info(`Last Next.js version, based on GitHub releases: ${b}`)
+        if (b.includes('canary') && E !== b) {
           await notifyOnIssue(
             t,
-            `The reported Next.js version did not match the latest \`next@canary\` version (${T}). The canary version of Next.js ships daily and includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces by running \`npm install next@canary\`. If the issue does not reproduce with the canary version, then it has already been fixed and this issue can be closed.`
+            `The reported Next.js version did not match the latest \`next@canary\` version (${b}). The canary version of Next.js ships daily and includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces by running \`npm install next@canary\`. If the issue does not reproduce with the canary version, then it has already been fixed and this issue can be closed.`
           )
           return a.info(
             `Commented on issue, because it was not verified against canary`

.github/actions/issue-validator/src/index.js

@@ -6,31 +6,48 @@ const verifyCanaryLabel = 'please verify canary'
 const bugReportLabel = 'template: bug'
 const addReproductionLabel = 'please add a complete reproduction'
 const debug = !!process.env.DEBUG
+const json = (o) => JSON.stringify(o, null, 2)
+
+/**
+ * @typedef {{
+ *  id :number
+ *  node_id :string
+ *  url :string
+ *  name :string
+ *  description :string
+ *  color :string
+ *  default :boolean
+ * }} Label
+ */
 
 async function run() {
   try {
-    const {
-      payload: { issue, pull_request },
-      repo,
-    } = github.context
+    const { payload, repo } = github.context
+    const { issue, pull_request } = payload
 
     if (pull_request || !issue?.body) return
 
-    const { body, labels, number: issueNumber } = issue
+    /** @type {Label} */
+    const newLabel = payload.label
+    const { body, number: issueNumber } = issue
+    /** @type {Label[]} */
+    const labels = issue.labels
 
     core.info(
       `Validating issue ${issueNumber}:
-  Label(s): ${labels.join(', ')}
+  Labels:
+    New: ${json(newLabel)}
+    All: ${json(labels)}
   Body: ${body}`
     )
 
-    const isBugReport = labels.some((label) => label.name === bugReportLabel)
+    const isBugReport = newLabel.name === bugReportLabel
 
     const isManuallyLabeled = labels.some(
       (label) => label.name === verifyCanaryLabel
     )
 
-    if (!isBugReport || !isManuallyLabeled) {
+    if (!isBugReport && !isManuallyLabeled) {
       return core.info(
         'Issue is ignored, because it is not a bug report or is not manually labeled'
       )
@@ -51,7 +68,7 @@ async function run() {
 
       if (debug) {
         core.info('Skipping comment/label because we are in DEBUG mode')
-        core.info(JSON.stringify({ label, comment }, null, 2))
+        core.info(json({ label, comment }))
         return
       }
 

docs/going-to-production.md

@@ -91,6 +91,7 @@ To reduce the amount of JavaScript sent to the browser, you can use the followin
 - [Package Phobia](https://packagephobia.com/) – Find the cost of adding a new dev dependency to your project.
 - [Bundle Phobia](https://bundlephobia.com/) - Analyze how much a dependency can increase bundle sizes.
 - [Webpack Bundle Analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) – Visualize size of webpack output files with an interactive, zoomable treemap.
+- [bundlejs](https://bundlejs.com/) - An online tool to quickly bundle & minify your projects, while viewing the compressed gzip/brotli bundle size, all running locally on your browser.
 
 Each file inside your `pages/` directory will automatically be code split into its own JavaScript bundle during `next build`. You can also use [Dynamic Imports](/docs/advanced-features/dynamic-import.md) to lazy-load components and libraries. For example, you might want to defer loading your modal code until a user clicks the open button.
 

lerna.json

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

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

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

packages/next-codemod/package.json

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

packages/next-env/package.json

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

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.2.3-canary.8",
+  "version": "12.2.3-canary.11",
   "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.3-canary.8",
+  "version": "12.2.3-canary.11",
   "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.3-canary.8",
+  "version": "12.2.3-canary.11",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.2.3-canary.8",
+  "version": "12.2.3-canary.11",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi native --features plugin",

packages/next/build/webpack/loaders/next-app-loader.ts

@@ -16,12 +16,6 @@ async function createTreeCodeFromPath({
   const appDirPrefix = splittedPath[0]
 
   const segments = ['', ...splittedPath.slice(1)]
-  const isNewRootLayout =
-    segments[0]?.length > 2 &&
-    segments[0]?.startsWith('(') &&
-    segments[0]?.endsWith(')')
-
-  let isCustomRootLayout = false
 
   // segment.length - 1 because arrays start at 0 and we're decrementing
   for (let i = segments.length - 1; i >= 0; i--) {
@@ -43,11 +37,6 @@ async function createTreeCodeFromPath({
     const resolvedLayoutPath = await resolve(layoutPath)
     const resolvedLoadingPath = await resolve(loadingPath)
 
-    // if we are in a new root app/(root) and a custom root layout was
-    // not provided or a root layout app/layout is not present, we use
-    // a default root layout to provide the html/body tags
-    isCustomRootLayout = isNewRootLayout && i === 1
-
     // Existing tree are the children of the current segment
     const children = tree
 
@@ -68,11 +57,6 @@ async function createTreeCodeFromPath({
           : ''
       }
     }]`
-
-    // if we're in a new root layout don't add the top-level app/layout
-    if (isCustomRootLayout) {
-      break
-    }
   }
 
   return `const tree = ${tree};`

packages/next/client/components/layout-router.client.tsx

@@ -42,6 +42,11 @@ function createInfinitePromise() {
   return infinitePromise
 }
 
+function topOfElementInViewport(element: HTMLElement) {
+  const rect = element.getBoundingClientRect()
+  return rect.top >= 0
+}
+
 export function InnerLayoutRouter({
   parallelRouterKey,
   url,
@@ -72,7 +77,10 @@ export function InnerLayoutRouter({
     if (focusRef.focus && focusAndScrollRef.current) {
       focusRef.focus = false
       focusAndScrollRef.current.focus()
-      focusAndScrollRef.current.scrollIntoView()
+      // Only scroll into viewport when the layout is not visible currently.
+      if (!topOfElementInViewport(focusAndScrollRef.current)) {
+        focusAndScrollRef.current.scrollIntoView()
+      }
     }
   }, [focusRef])