Merge branch 'canary' into appdir-crossorigin

Author: kodiakhq[bot]

.github/CODEOWNERS

@@ -28,7 +28,7 @@
 
 # Tooling & Telemetry
 
-/packages/next/src/build/                                @timneutkens @ijjk @shuding @huozhi @ztanner @vercel/web-tooling
+/packages/next/src/build/                                @timneutkens @ijjk @shuding @huozhi @ztanner @feedthejim @vercel/web-tooling
 /packages/next/src/server/lib/router-utils/setup-dev.ts  @timneutkens @ijjk @shuding @huozhi @feedthejim @ztanner @wyattjoh @vercel/web-tooling
 /packages/next/src/telemetry/                            @timneutkens @ijjk @shuding @padmaia
 /packages/next-swc/                                      @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling

Cargo.lock

@@ -576,7 +576,7 @@ The cache status of an image can be determined by reading the value of the `x-ne
 The expiration (or rather Max Age) is defined by either the [`minimumCacheTTL`](#minimumcachettl) configuration or the upstream image `Cache-Control` header, whichever is larger. Specifically, the `max-age` value of the `Cache-Control` header is used. If both `s-maxage` and `max-age` are found, then `s-maxage` is preferred. The `max-age` is also passed-through to any downstream clients including CDNs and browsers.
 
 - You can configure [`minimumCacheTTL`](#minimumcachettl) to increase the cache duration when the upstream image does not include `Cache-Control` header or the value is very low.
-- You can configure [`deviceSizes`](#devicesizes) and [`imageSizes`](#devicesizes) to reduce the total number of possible generated images.
+- You can configure [`deviceSizes`](#devicesizes) and [`imageSizes`](#imagesizes) to reduce the total number of possible generated images.
 - You can configure [formats](#formats) to disable multiple formats in favor of a single image format.
 
 ### `minimumCacheTTL`
@@ -599,7 +599,7 @@ There is no mechanism to invalidate the cache at this time, so its best to keep
 
 ### `disableStaticImages`
 
-The default behavior allows you to import static files such as `import icon from './icon.png` and then pass that to the `src` property.
+The default behavior allows you to import static files such as `import icon from './icon.png'` and then pass that to the `src` property.
 
 In some cases, you may wish to disable this feature if it conflicts with other plugins that expect the import to behave differently.
 

docs/02-app/02-api-reference/01-components/image.mdx

@@ -519,7 +519,7 @@ The cache status of an image can be determined by reading the value of the `x-ne
 The expiration (or rather Max Age) is defined by either the [`minimumCacheTTL`](#minimum-cache-ttl) configuration or the upstream image `Cache-Control` header, whichever is larger. Specifically, the `max-age` value of the `Cache-Control` header is used. If both `s-maxage` and `max-age` are found, then `s-maxage` is preferred. The `max-age` is also passed-through to any downstream clients including CDNs and browsers.
 
 - You can configure [`minimumCacheTTL`](#minimum-cache-ttl) to increase the cache duration when the upstream image does not include `Cache-Control` header or the value is very low.
-- You can configure [`deviceSizes`](#device-sizes) and [`imageSizes`](#device-sizes) to reduce the total number of possible generated images.
+- You can configure [`deviceSizes`](#device-sizes) and [`imageSizes`](#image-sizes) to reduce the total number of possible generated images.
 - You can configure [formats](#acceptable-formats) to disable multiple formats in favor of a single image format.
 
 ### Minimum Cache TTL
@@ -542,7 +542,7 @@ There is no mechanism to invalidate the cache at this time, so its best to keep
 
 ### Disable Static Imports
 
-The default behavior allows you to import static files such as `import icon from './icon.png` and then pass that to the `src` property.
+The default behavior allows you to import static files such as `import icon from './icon.png'` and then pass that to the `src` property.
 
 In some cases, you may wish to disable this feature if it conflicts with other plugins that expect the import to behave differently.
 

docs/03-pages/02-api-reference/01-components/image-legacy.mdx

@@ -51,7 +51,7 @@ export async function POST(req: Request) {
           console.log(`💰 PaymentIntent status: ${data.status}`)
           break
         default:
-          throw new Error(`Unhhandled event: ${event.type}`)
+          throw new Error(`Unhandled event: ${event.type}`)
       }
     } catch (error) {
       console.log(error)

examples/with-stripe-typescript/app/api/webhooks/route.ts

@@ -301,10 +301,8 @@ export function makeExternalHandler({
       return resolveResult.localRes
     }
 
-    // Forcedly resolve the styled-jsx installed by next.js,
-    // since `resolveExternal` cannot find the styled-jsx dep with pnpm
-    if (request === 'styled-jsx/style') {
-      resolveResult.res = defaultOverrides['styled-jsx/style']
+    if (request === 'styled-jsx/style' && !isAppLayer) {
+      return `commonjs ${defaultOverrides['styled-jsx/style']}`
     }
 
     const { res, isEsm } = resolveResult

packages/next/src/build/handle-externals.ts

@@ -129,6 +129,7 @@ import { eventSwcPlugins } from '../telemetry/events/swc-plugins'
 import { normalizeAppPath } from '../shared/lib/router/utils/app-paths'
 import {
   ACTION,
+  NEXT_ROUTER_PREFETCH,
   RSC,
   RSC_CONTENT_TYPE_HEADER,
   RSC_VARY_HEADER,
@@ -227,6 +228,7 @@ export type RoutesManifest = {
   rsc: {
     header: typeof RSC
     varyHeader: typeof RSC_VARY_HEADER
+    prefetchHeader: typeof NEXT_ROUTER_PREFETCH
   }
   skipMiddlewareUrlNormalize?: boolean
   caseSensitive?: boolean
@@ -795,6 +797,7 @@ export default async function build(
             rsc: {
               header: RSC,
               varyHeader: RSC_VARY_HEADER,
+              prefetchHeader: NEXT_ROUTER_PREFETCH,
               contentTypeHeader: RSC_CONTENT_TYPE_HEADER,
             },
             skipMiddlewareUrlNormalize: config.skipMiddlewareUrlNormalize,
@@ -1055,6 +1058,7 @@ export default async function build(
       const additionalSsgPaths = new Map<string, Array<string>>()
       const additionalSsgPathsEncoded = new Map<string, Array<string>>()
       const appStaticPaths = new Map<string, Array<string>>()
+      const appPrefetchPaths = new Map<string, string>()
       const appStaticPathsEncoded = new Map<string, Array<string>>()
       const appNormalizedPaths = new Map<string, string>()
       const appDynamicParamPaths = new Set<string>()
@@ -1554,6 +1558,14 @@ export default async function build(
                             appDynamicParamPaths.add(originalAppPath)
                           }
                           appDefaultConfigs.set(originalAppPath, appConfig)
+
+                          if (
+                            !isStatic &&
+                            !isAppRouteRoute(originalAppPath) &&
+                            !isDynamicRoute(originalAppPath)
+                          ) {
+                            appPrefetchPaths.set(originalAppPath, page)
+                          }
                         }
                       } else {
                         if (isEdgeRuntime(pageRuntime)) {
@@ -2001,6 +2013,15 @@ export default async function build(
                 })
               })
 
+              for (const [originalAppPath, page] of appPrefetchPaths) {
+                defaultMap[page] = {
+                  page: originalAppPath,
+                  query: {},
+                  _isAppDir: true,
+                  _isAppPrefetch: true,
+                }
+              }
+
               if (i18n) {
                 for (const page of [
                   ...staticPages,

packages/next/src/build/index.ts

@@ -5,7 +5,7 @@ export function createRouterCacheKey(
   withoutSearchParameters: boolean = false
 ) {
   return Array.isArray(segment)
-    ? `${segment[0]}|${segment[1]}|${segment[2]}`
+    ? `${segment[0]}|${segment[1]}|${segment[2]}`.toLowerCase()
     : withoutSearchParameters && segment.startsWith('__PAGE__')
     ? '__PAGE__'
     : segment

packages/next/src/client/components/router-reducer/create-router-cache-key.ts

@@ -30,6 +30,7 @@ export interface StaticGenerationStore {
   dynamicUsageDescription?: string
   dynamicUsageStack?: string
   dynamicUsageErr?: DynamicServerError
+  staticPrefetchBailout?: boolean
 
   nextFetchId?: number
   pathWasRevalidated?: boolean

packages/next/src/client/components/static-generation-async-storage.external.ts

@@ -38,6 +38,12 @@ export const staticGenerationBailout: StaticGenerationBailout = (
 
   if (staticGenerationStore) {
     staticGenerationStore.revalidate = 0
+
+    if (!opts?.dynamic) {
+      // we can statically prefetch pages that opt into dynamic,
+      // but not things like headers/cookies
+      staticGenerationStore.staticPrefetchBailout = true
+    }
   }
 
   if (staticGenerationStore?.isStaticGeneration) {