Merge branch 'canary' into update-test-snapshot

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

@@ -1,11 +1,14 @@
 // @ts-check
+// @ts-expect-error
 import * as github from '@actions/github'
+// @ts-expect-error
 import * as core from '@actions/core'
 import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
 
 const verifyCanaryLabel = 'please verify canary'
 const addReproductionLabel = 'please add a complete reproduction'
+// const bugLabel = 'template: bug'
 const __dirname =
   '/home/runner/work/next.js/next.js/.github/actions/issue-validator'
 
@@ -19,59 +22,113 @@ const __dirname =
  *  color :string
  *  default :boolean
  * }} Label
+ *
+ * @typedef {{
+ *  pull_request: any
+ *  issue?: {body: string, number: number, labels: Label[]}
+ *  label: Label
+ * }} Payload
+ *
+ * @typedef {{
+ *  payload: Payload
+ *  repo: any
+ * }} Context
  */
 
 async function run() {
   try {
+    /** @type {Context} */
     const { payload, repo } = github.context
-    const { issue, pull_request } = payload
+    const {
+      issue,
+      pull_request,
+      label: { name: newLabel },
+    } = payload
 
     if (pull_request || !issue?.body || !process.env.GITHUB_TOKEN) return
 
-    /** @type {Label} */
-    const newLabel = payload.label
-    const { body, number: issueNumber } = issue
-    const client = github.getOctokit(process.env.GITHUB_TOKEN).rest
-    const issueCommon = { ...repo, issue_number: issueNumber }
+    const labels = issue.labels.map((l) => l.name)
+    // const isBugReport =
+    //   labels.includes(bugLabel) || newLabel === bugLabel || !labels.length
 
-    /** @param {string|null|undefined} link */
-    async function hasRepro(link) {
-      if (!link) return false
-      try {
-        const url = new URL(link)
-        if (['example.com'].includes(url.hostname)) {
-          return false
-        }
-      } catch {
-        return false
-      }
-      const response = await fetch(link)
-      return response.ok
+    if (
+      // !(isBugReport && issue.number > 43554) &&
+      ![verifyCanaryLabel, addReproductionLabel].includes(newLabel) &&
+      !(
+        labels.includes(verifyCanaryLabel) ||
+        labels.includes(addReproductionLabel)
+      )
+    ) {
+      return core.info(
+        'Not a bug report or not manually labeled or already labeled.'
+      )
     }
 
-    const hasValidRepro = await hasRepro(
-      body.match(/will be addressed faster\n\n(.*)\n\n### To Reproduce/i)?.[1]
-    )
+    // /** @param {string|null|undefined} link */
+    // async function hasRepro(link) {
+    //   if (!link) return false
+    //   try {
+    //     const url = new URL(link)
+    //     if (['example.com'].includes(url.hostname)) {
+    //       return false
+    //     }
+    //   } catch {
+    //     return false
+    //   }
+    //   const response = await fetch(link)
+    //   return response.ok
+    // }
+
+    // const hasValidRepro =
+    //   isBugReport &&
+    //   (await hasRepro(
+    //     issue.body.match(
+    //       /will be addressed faster\n\n(.*)\n\n### To Reproduce/i
+    //     )?.[1]
+    //   ))
+
+    const client = github.getOctokit(process.env.GITHUB_TOKEN).rest
+    const issueCommon = { ...repo, issue_number: issue.number }
 
-    if (!hasValidRepro || newLabel.name === addReproductionLabel) {
-      await client.issues.createComment({
-        ...issueCommon,
-        body: readFileSync(join(__dirname, 'repro.md'), 'utf8'),
-      })
+    if (
+      newLabel === addReproductionLabel
+      // || !hasValidRepro
+    ) {
+      await Promise.all([
+        client.issues.addLabels({
+          ...issueCommon,
+          labels: [addReproductionLabel],
+        }),
+        client.issues.createComment({
+          ...issueCommon,
+          body: readFileSync(join(__dirname, 'repro.md'), 'utf8'),
+        }),
+      ])
       return core.info(
         'Commented on issue, because it did not have a sufficient reproduction.'
       )
     }
 
-    const isVerifyCanaryChecked = body.match(
-      /- \[x\] I verified that the issue exists in the latest Next.js canary release/i
-    )
+    // const isVerifyCanaryChecked =
+    //   isBugReport &&
+    //   issue.body.match(
+    //     /- \[x\] I verified that the issue exists in the latest Next.js canary release/i
+    //   )
 
-    if (!isVerifyCanaryChecked || newLabel.name === verifyCanaryLabel) {
-      await client.issues.createComment({
-        ...issueCommon,
-        body: readFileSync(join(__dirname, 'canary.md'), 'utf8'),
-      })
+    if (
+      newLabel === verifyCanaryLabel
+      // || !isVerifyCanaryChecked
+    ) {
+      await Promise.all([
+        client.issues.addLabels({
+          ...issueCommon,
+          labels: [verifyCanaryLabel],
+        }),
+        client.issues.createComment({
+          ...issueCommon,
+          body: readFileSync(join(__dirname, 'canary.md'), 'utf8'),
+        }),
+      ])
       return core.info(
         'Commented on issue, because it was not verified against canary.'
       )

docs/api-reference/next.config.js/runtime-configuration.md

@@ -4,9 +4,9 @@ description: Add client and server runtime configuration to your Next.js app.
 
 # Runtime Configuration
 
-> Generally you'll want to use [build-time environment variables](/docs/basic-features/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
+> Note: This feature is considered legacy and does not work with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md), [Output File Tracing](/docs/advanced-features/output-file-tracing.md#automatically-copying-traced-files), or [React Server Components](/docs/advanced-features/react-18/server-components.md). Please use [environment variables](/docs/basic-features/environment-variables.md) instead in order to avoid initialization overhead.
 
-To add runtime configuration to your app open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
+To add runtime configuration to your app, open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
 
 ```js
 module.exports = {

examples/with-firebase-hosting/README.md

@@ -74,7 +74,7 @@ The crucial files for the setup:
 - `firebase.json`
 - `firebaseFunctions.js`
 - `src/next.config.js`
-- In `package.json`: `firebase-*` packages.
+- In `package.json`: `firebase-*` packages, `main` property defining the entry point as `firebaseFunctions.js`
 
 ## References
 

examples/with-vercel-fetch/github.d.ts

@@ -0,0 +1,10 @@
+// For simplicity we are creating our own types here.
+// If you want the full types check out:
+// https://github.com/octokit/openapi-types.ts
+export type Repository = {
+  id: number
+  name: string
+  full_name: string
+  stargazers_count: number
+  private: boolean
+} & Record<string, unknown>

examples/with-vercel-fetch/package.json

@@ -6,11 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "@vercel/fetch": "6.1.0",
+    "@vercel/fetch": "^6.2.0",
     "next": "latest",
-    "node-fetch": "2.6.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "unfetch": "4.2.0"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }

examples/with-vercel-fetch/pages/index.tsx

@@ -0,0 +1,21 @@
+import type { InferGetStaticPropsType } from 'next'
+import type { Repository } from '../github'
+import createFetch from '@vercel/fetch'
+
+export async function getStaticProps() {
+  const fetch = createFetch()
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = (await res.json()) as Repository
+
+  return { props: { stars: repo.stargazers_count } }
+}
+
+export default function HomePage({
+  stars,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <div>
+      <p>Next.js has {stars} ⭐️</p>
+    </div>
+  )
+}

examples/with-vercel-fetch/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "github.d.ts"],
+  "exclude": ["node_modules"]
+}

packages/next-swc/crates/core/src/react_server_components.rs

@@ -111,7 +111,7 @@ impl<C: Comments> ReactServerComponents<C> {
                                         return false;
                                     }
                                 }
-                                // Match `ParenthesisExpression` which is some formartting tools
+                                // Match `ParenthesisExpression` which is some formatting tools
                                 // usually do: ('use client'). In these case we need to throw
                                 // an exception because they are not valid directives.
                                 Expr::Paren(ParenExpr { expr, .. }) => {

packages/next/build/webpack-config.ts

@@ -1151,15 +1151,16 @@ export default async function getBaseWebpackConfig(
 
     const isLocalCallback = (localRes: string) => {
       // Makes sure dist/shared and dist/server are not bundled
-      // we need to process shared `router/router` and `dynamic`,
-      // so that the DefinePlugin can inject process.env values
+      // we need to process shared `router/router`, `head` and `dynamic`,
+      // so that the DefinePlugin can inject process.env values.
+
+      // Treat next internals as non-external for server layer
+      if (layer === WEBPACK_LAYERS.server) return
+
       const isNextExternal =
-        // Treat next internals as non-external for server layer
-        layer === WEBPACK_LAYERS.server
-          ? false
-          : /next[/\\]dist[/\\](esm[\\/])?(shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
-              localRes
-            )
+        /next[/\\]dist[/\\](esm[\\/])?(shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic|head[^-]))/.test(
+          localRes
+        )
 
       if (isNextExternal) {
         // Generate Next.js external import
@@ -1176,10 +1177,6 @@ export default async function getBaseWebpackConfig(
             .replace(/\\/g, '/')
         )
         return `commonjs ${externalRequest}`
-      } else if (layer !== WEBPACK_LAYERS.client) {
-        // We don't want to retry local requests
-        // with other preferEsm options
-        return
       }
     }
 

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -28,6 +28,7 @@ import {
 import { Telemetry } from '../../../telemetry/storage'
 import { traceGlobals } from '../../../trace/shared'
 import { EVENT_BUILD_FEATURE_USAGE } from '../../../telemetry/events'
+import { normalizeAppPath } from '../../../shared/lib/router/utils/app-paths'
 
 export interface EdgeFunctionDefinition {
   env: string[]
@@ -160,9 +161,12 @@ function getCreateAssets(params: {
         continue
       }
 
-      const { namedRegex } = getNamedMiddlewareRegex(page, {
-        catchAll: !metadata.edgeSSR && !metadata.edgeApiFunction,
-      })
+      const { namedRegex } = getNamedMiddlewareRegex(
+        metadata.edgeSSR?.isAppDir ? normalizeAppPath(page) : page,
+        {
+          catchAll: !metadata.edgeSSR && !metadata.edgeApiFunction,
+        }
+      )
       const matchers = metadata?.edgeMiddleware?.matchers ?? [
         { regexp: namedRegex },
       ]