Merge branch 'canary' of https://github.com/vercel/next.js into canary

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -21,36 +21,53 @@ body:
       description: Please run `next info` in the root directory of your project and paste the results. You might need to use `npx --no-install next info` if next is not in the current PATH.
     validations:
       required: true
-  - type: input
+  - type: dropdown
     attributes:
-      label: What browser are you using? (if relevant)
-      description: 'Please specify the exact version. For example: Chrome 100.0.4878.0'
+      label: Which area of Next.js is affected? (leave empty if unsure)
+      multiple: true
+      options:
+        - 'App directory (appDir: true)'
+        - 'CLI (create-next-app)'
+        - 'Data fetching (gS(S)P, getInitialProps)'
+        - 'Dynamic imports (next/dynamic)'
+        - 'ESLint (eslint-config-next)'
+        - 'Font optimization (@next/font)'
+        - 'Internationalzation (i18n)'
+        - 'Image optmization (next/image, next/legacy/image)'
+        - 'Jest (next/jest)'
+        - 'Middleware / Edge (API routes, runtime)'
+        - 'Package manager (npm, pnpm, Yarn)'
+        - 'Routing (next/router, next/navigation, next/link)'
+        - 'Script optimizatzion (next/script)'
+        - 'Standalone mode (output: "standalone")'
+        - 'Static HTML Export (next export)'
+        - 'SWC minifier (swcMinify: true)'
+        - 'SWC transpilation'
+        - 'Turbopack (--turbo)'
+        - 'TypeScript'
+        - 'Other'
   - type: input
     attributes:
-      label: How are you deploying your application? (if relevant)
-      description: 'For example: next start, next export, Vercel, Other platform'
-  - type: textarea
-    attributes:
-      label: Describe the Bug
-      description: A clear and concise description of what the bug is.
+      label: Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster
+      description: A link to a GitHub repository, a [StackBlitz](https://stackblitz.com/fork/github/vercel/next.js/tree/canary/examples/reproduction-template), or a [CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/reproduction-template) minimal reproduction. Minimal reproductions should be created from our [bug report template with `npx create-next-app -e reproduction-template`](https://github.com/vercel/next.js/tree/canary/examples/reproduction-template) and should include only changes that contribute to the issue.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: Expected Behavior
-      description: A clear and concise description of what you expected to happen.
+      label: To Reproduce
+      description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
     validations:
       required: true
-  - type: input
+  - type: textarea
     attributes:
-      label: Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster
-      description: A link to a GitHub repository, a [StackBlitz](https://stackblitz.com/fork/github/vercel/next.js/tree/canary/examples/reproduction-template), or a [CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/reproduction-template) minimal reproduction. Minimal reproductions should be created from our [bug report template with `npx create-next-app -e reproduction-template`](https://github.com/vercel/next.js/tree/canary/examples/reproduction-template) and should include only changes that contribute to the issue.
+      label: Describe the Bug
+      description: A clear and concise description of what the bug is.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: To Reproduce
-      description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
+      label: Expected Behavior
+      description: A clear and concise description of what you expected to happen.
     validations:
       required: true
   - type: markdown
@@ -62,3 +79,11 @@ body:
   - type: markdown
     attributes:
       value: These steps are used to add integration tests to ensure the same issue does not happen again. Thanks in advance!
+  - type: input
+    attributes:
+      label: Which browser are you using? (if relevant)
+      description: 'Please specify the exact version. For example: Chrome 100.0.4878.0'
+  - type: input
+    attributes:
+      label: How are you deploying your application? (if relevant)
+      description: 'For example: next start, next export, Vercel, Other platform'

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 },
       ]

test/e2e/app-dir/app-edge.test.ts

@@ -54,4 +54,17 @@ describe('app-dir edge SSR', () => {
       }, /Edge!/)
     })
   }
+
+  if (!(globalThis as any).isNextDev) {
+    it('should generate matchers correctly in middleware manifest', async () => {
+      const manifest = JSON.parse(
+        await next.readFile('.next/server/middleware-manifest.json')
+      )
+      expect(manifest.functions['/(group)/group/page'].matchers).toEqual([
+        {
+          regexp: '^/group$',
+        },
+      ])
+    })
+  }
 })

test/e2e/app-dir/app-edge/app/(group)/group/page.tsx

@@ -0,0 +1,8 @@
+export default function Page() {
+  if ('EdgeRuntime' in globalThis) {
+    return <p>Edge!</p>
+  }
+  return <p>Node!</p>
+}
+
+export const runtime = 'experimental-edge'

test/e2e/app-dir/app/app/internal/page.js

@@ -1,14 +1,9 @@
 import Link from 'next/link'
-import Head from 'next/head'
 
 export default function Page() {
   return (
     <div>
       <div>
-        {/* NOTE: next/head will not work in RSC for now but not break either */}
-        <Head>
-          <title>internal-title</title>
-        </Head>
         <Link href="/internal/test/rewrite" id="navigate-rewrite">
           Navigate Rewrite
         </Link>

test/e2e/app-dir/head.test.ts

@@ -113,6 +113,11 @@ describe('app dir head', () => {
         .waitForElementByCss('#layout', 2000)
       expect(await getTitle()).toBe('hello from dynamic blog page post-1')
     })
+
+    it('should treat next/head as client components but not apply', async () => {
+      const html = await renderViaHTTP(next.url, '/next-head')
+      expect(html).not.toMatch(/<title>legacy-head<\/title>/)
+    })
   }
 
   runTests()

test/e2e/app-dir/head/app/next-head/page.js

@@ -0,0 +1,12 @@
+import Head from 'next/head'
+
+export default function page() {
+  return (
+    <>
+      <Head>
+        <title>legacy-head</title>
+      </Head>
+      <p>page</p>
+    </>
+  )
+}

test/integration/externalize-next-server/test/index.test.js

@@ -10,9 +10,19 @@ describe('externalize next/dist/shared', () => {
     await nextBuild(appDir)
   })
 
-  it('Does not bundle next/dist/shared/lib/head.js in _error', async () => {
+  it('Bundle next/dist/shared/lib/head.js but not next/dist/shared/lib/head-manager-context.js in _error', async () => {
     const content = readNextBuildServerPageFile(appDir, '/_error')
     expect(content).toMatch(
+      new RegExp(
+        '^' +
+          escapeStringRegexp(
+            `module.exports = require("next/dist/shared/lib/head-manager-context.js");`
+          ) +
+          ';?$',
+        'm'
+      )
+    )
+    expect(content).not.toMatch(
       new RegExp(
         '^' +
           escapeStringRegexp(