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) {

packages/next/src/client/components/static-generation-bailout.ts

@@ -6,6 +6,11 @@ import type { NextParsedUrlQuery } from '../../server/request-meta'
 
 import fs from 'fs/promises'
 import { MockedRequest, MockedResponse } from '../../server/lib/mock-request'
+import {
+  RSC,
+  NEXT_URL,
+  NEXT_ROUTER_PREFETCH,
+} from '../../client/components/app-router-headers'
 import { isDynamicUsageError } from '../helpers/is-dynamic-usage-error'
 import { NEXT_CACHE_TAGS_HEADER } from '../../lib/constants'
 import { hasNextSupport } from '../../telemetry/ci-info'
@@ -19,6 +24,37 @@ const render: AppPageRender = (...args) => {
   )
 }
 
+export async function generatePrefetchRsc(
+  req: MockedRequest,
+  path: string,
+  res: MockedResponse,
+  pathname: string,
+  htmlFilepath: string,
+  renderOpts: RenderOpts
+) {
+  req.headers[RSC.toLowerCase()] = '1'
+  req.headers[NEXT_URL.toLowerCase()] = path
+  req.headers[NEXT_ROUTER_PREFETCH.toLowerCase()] = '1'
+
+  renderOpts.supportsDynamicHTML = true
+  renderOpts.isPrefetch = true
+  delete renderOpts.isRevalidate
+
+  const prefetchRenderResult = await render(req, res, pathname, {}, renderOpts)
+
+  prefetchRenderResult.pipe(res)
+  await res.hasStreamed
+
+  const prefetchRscData = Buffer.concat(res.buffers)
+
+  if ((renderOpts as any).store.staticPrefetchBailout) return
+
+  await fs.writeFile(
+    htmlFilepath.replace(/\.html$/, '.prefetch.rsc'),
+    prefetchRscData
+  )
+}
+
 export async function exportAppPage(
   req: MockedRequest,
   res: MockedResponse,
@@ -29,14 +65,28 @@ export async function exportAppPage(
   renderOpts: RenderOpts,
   htmlFilepath: string,
   debugOutput: boolean,
-  isDynamicError: boolean
+  isDynamicError: boolean,
+  isAppPrefetch: boolean
 ): Promise<ExportPageResult> {
   // If the page is `/_not-found`, then we should update the page to be `/404`.
   if (page === '/_not-found') {
     pathname = '/404'
   }
 
   try {
+    if (isAppPrefetch) {
+      await generatePrefetchRsc(
+        req,
+        path,
+        res,
+        pathname,
+        htmlFilepath,
+        renderOpts
+      )
+
+      return { fromBuildExportRevalidate: 0 }
+    }
+
     const result = await render(req, res, pathname, query, renderOpts)
     const html = result.toUnchunkedString()
     const { metadata } = result
@@ -50,6 +100,17 @@ export async function exportAppPage(
         )
       }
 
+      if (!(renderOpts as any).store.staticPrefetchBailout) {
+        await generatePrefetchRsc(
+          req,
+          path,
+          res,
+          pathname,
+          htmlFilepath,
+          renderOpts
+        )
+      }
+
       const { staticBailoutInfo = {} } = metadata
 
       if (revalidate === 0 && debugOutput && staticBailoutInfo?.description) {

packages/next/src/export/routes/app-page.ts

@@ -108,6 +108,9 @@ async function exportPageImpl(input: ExportPageInput) {
     // Check if this is an `app/` page.
     _isAppDir: isAppDir = false,
 
+    // Check if this is an `app/` prefix request.
+    _isAppPrefetch: isAppPrefetch = false,
+
     // Check if this should error when dynamic usage is detected.
     _isDynamicError: isDynamicError = false,
 
@@ -306,7 +309,8 @@ async function exportPageImpl(input: ExportPageInput) {
         renderOpts,
         htmlFilepath,
         debugOutput,
-        isDynamicError
+        isDynamicError,
+        isAppPrefetch
       )
     }
 

packages/next/src/export/worker.ts

@@ -64,6 +64,8 @@ const supportedTurbopackNextConfigOptions = [
   'experimental.deploymentId',
 
   // Experimental options that don't affect compilation
+  'serverRuntimeConfig',
+  'publicRuntimeConfig',
   'experimental.proxyTimeout',
   'experimental.caseSensitiveRoutes',
   'experimental.workerThreads',

packages/next/src/lib/turbopack-warning.ts

@@ -1108,6 +1108,13 @@ export const renderToHTMLOrFlight: AppPageRender = (
           // Explicit refresh
           flightRouterState[3] === 'refetch'
 
+        const shouldSkipComponentTree =
+          isPrefetch &&
+          !Boolean(components.loading) &&
+          (flightRouterState ||
+            // If there is no flightRouterState, we need to check the entire loader tree, as otherwise we'll be only checking the root
+            !hasLoadingComponentInTree(loaderTree))
+
         if (!parentRendered && renderComponentsOnThisLevel) {
           const overriddenSegment =
             flightRouterState &&
@@ -1124,9 +1131,7 @@ export const renderToHTMLOrFlight: AppPageRender = (
                 getDynamicParamFromSegment,
                 query
               ),
-              isPrefetch &&
-              !Boolean(components.loading) &&
-              !hasLoadingComponentInTree(loaderTree)
+              shouldSkipComponentTree
                 ? null
                 : // Create component tree using the slice of the loaderTree
                   // @ts-expect-error TODO-APP: fix async component type
@@ -1149,9 +1154,7 @@ export const renderToHTMLOrFlight: AppPageRender = (
 
                     return <Component />
                   }),
-              isPrefetch &&
-              !Boolean(components.loading) &&
-              !hasLoadingComponentInTree(loaderTree)
+              shouldSkipComponentTree
                 ? null
                 : (() => {
                     const { layoutOrPagePath } =

packages/next/src/server/app-render/app-render.tsx

@@ -132,6 +132,7 @@ export interface RenderOptsPartial {
   ) => Promise<NextConfigComplete>
   serverActionsBodySizeLimit?: SizeLimit
   params?: ParsedUrlQuery
+  isPrefetch?: boolean
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial

packages/next/src/server/app-render/types.ts

@@ -12,6 +12,7 @@ export type StaticGenerationContext = {
     isRevalidate?: boolean
     isOnDemandRevalidate?: boolean
     isBot?: boolean
+    isPrefetch?: boolean
     nextExport?: boolean
     fetchCache?: StaticGenerationStore['fetchCache']
     isDraftMode?: boolean

packages/next/src/server/async-storage/static-generation-async-storage-wrapper.ts

@@ -86,6 +86,8 @@ import {
   FLIGHT_PARAMETERS,
   NEXT_RSC_UNION_QUERY,
   ACTION,
+  NEXT_ROUTER_PREFETCH,
+  RSC_CONTENT_TYPE_HEADER,
 } from '../client/components/app-router-headers'
 import {
   MatchOptions,
@@ -2124,6 +2126,27 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       } else if (
         components.routeModule?.definition.kind === RouteKind.APP_PAGE
       ) {
+        const isAppPrefetch = req.headers[NEXT_ROUTER_PREFETCH.toLowerCase()]
+
+        if (isAppPrefetch && process.env.NODE_ENV === 'production') {
+          try {
+            const prefetchRsc = await this.getPrefetchRsc(resolvedUrlPathname)
+
+            if (prefetchRsc) {
+              res.setHeader(
+                'cache-control',
+                'private, no-cache, no-store, max-age=0, must-revalidate'
+              )
+              res.setHeader('content-type', RSC_CONTENT_TYPE_HEADER)
+              res.body(prefetchRsc).send()
+              return null
+            }
+          } catch (_) {
+            // we fallback to invoking the function if prefetch
+            // data is not available
+          }
+        }
+
         const module = components.routeModule as AppPageRouteModule
 
         // Due to the way we pass data by mutating `renderOpts`, we can't extend the

packages/next/src/server/base-server.ts

@@ -283,6 +283,7 @@ export type RenderOptsPartial = {
   deploymentId?: string
   isServerAction?: boolean
   isExperimentalCompile?: boolean
+  isPrefetch?: boolean
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial