Merge branch 'canary' into wyattjoh/NEXT-986

packages/next/src/client/on-recoverable-error.ts

@@ -14,5 +14,6 @@ export default function onRecoverableError(err: any) {
 
   // Skip certain custom errors which are not expected to be reported on client
   if (err.digest === NEXT_DYNAMIC_NO_SSR_CODE) return
+
   defaultOnRecoverableError(err)
 }

packages/next/src/lib/metadata/metadata.tsx

@@ -18,6 +18,8 @@ import {
 import { IconsMetadata } from './generate/icons'
 import { accumulateMetadata, resolveMetadata } from './resolve-metadata'
 import { MetaFilter } from './generate/meta'
+import { ResolvedMetadata } from './types/metadata-interface'
+import { createDefaultMetadata } from './default-metadata'
 
 // Generate the actual React elements from the resolved metadata.
 export async function MetadataTree({
@@ -26,24 +28,36 @@ export async function MetadataTree({
   searchParams,
   getDynamicParamFromSegment,
   appUsingSizeAdjust,
+  errorType,
 }: {
   tree: LoaderTree
   pathname: string
   searchParams: { [key: string]: any }
   getDynamicParamFromSegment: GetDynamicParamFromSegment
   appUsingSizeAdjust: boolean
+  errorType?: 'not-found' | 'redirect'
 }) {
   const metadataContext = {
     pathname,
   }
+
   const resolvedMetadata = await resolveMetadata({
     tree,
     parentParams: {},
     metadataItems: [],
     searchParams,
     getDynamicParamFromSegment,
+    errorConvention: errorType === 'redirect' ? undefined : errorType,
   })
-  const metadata = await accumulateMetadata(resolvedMetadata, metadataContext)
+  let metadata: ResolvedMetadata | undefined = undefined
+
+  const defaultMetadata = createDefaultMetadata()
+  // Skip for redirect case as for the temporary redirect case we don't need the metadata on client
+  if (errorType === 'redirect') {
+    metadata = defaultMetadata
+  } else {
+    metadata = await accumulateMetadata(resolvedMetadata, metadataContext)
+  }
 
   const elements = MetaFilter([
     BasicMetadata({ metadata }),

packages/next/src/lib/metadata/resolve-metadata.ts

@@ -15,6 +15,7 @@ import { resolveTitle } from './resolvers/resolve-title'
 import { resolveAsArrayOrUndefined } from './generate/utils'
 import { isClientReference } from '../client-reference'
 import {
+  getErrorOrLayoutModule,
   getLayoutOrPageModule,
   LoaderTree,
 } from '../../server/lib/app-dir-module'
@@ -248,28 +249,28 @@ function merge({
 async function getDefinedMetadata(
   mod: any,
   props: any,
-  route: string
+  tracingProps: { route: string }
 ): Promise<Metadata | MetadataResolver | null> {
   // Layer is a client component, we just skip it. It can't have metadata exported.
   // Return early to avoid accessing properties error for client references.
   if (isClientReference(mod)) {
     return null
   }
-  return (
-    (mod.generateMetadata
-      ? (parent: ResolvingMetadata) =>
-          getTracer().trace(
-            ResolveMetadataSpan.generateMetadata,
-            {
-              spanName: `generateMetadata ${route}`,
-              attributes: {
-                'next.page': route,
-              },
-            },
-            () => mod.generateMetadata(props, parent)
-          )
-      : mod.metadata) || null
-  )
+  if (typeof mod.generateMetadata === 'function') {
+    const { route } = tracingProps
+    return (parent: ResolvingMetadata) =>
+      getTracer().trace(
+        ResolveMetadataSpan.generateMetadata,
+        {
+          spanName: `generateMetadata ${route}`,
+          attributes: {
+            'next.page': route,
+          },
+        },
+        () => mod.generateMetadata(props, parent)
+      )
+  }
+  return mod.metadata || null
 }
 
 async function collectStaticImagesFiles(
@@ -317,21 +318,30 @@ export async function collectMetadata({
   metadataItems: array,
   props,
   route,
+  errorConvention,
 }: {
   tree: LoaderTree
   metadataItems: MetadataItems
   props: any
   route: string
+  errorConvention?: 'not-found'
 }) {
-  const [mod, modType] = await getLayoutOrPageModule(tree)
+  let mod
+  let modType
+  if (errorConvention) {
+    mod = await getErrorOrLayoutModule(tree, errorConvention)
+    modType = errorConvention
+  } else {
+    ;[mod, modType] = await getLayoutOrPageModule(tree)
+  }
 
   if (modType) {
     route += `/${modType}`
   }
 
   const staticFilesMetadata = await resolveStaticMetadata(tree[2], props)
   const metadataExport = mod
-    ? await getDefinedMetadata(mod, props, route)
+    ? await getDefinedMetadata(mod, props, { route })
     : null
 
   array.push([metadataExport, staticFilesMetadata])
@@ -344,6 +354,7 @@ export async function resolveMetadata({
   treePrefix = [],
   getDynamicParamFromSegment,
   searchParams,
+  errorConvention,
 }: {
   tree: LoaderTree
   parentParams: { [key: string]: any }
@@ -352,10 +363,12 @@ export async function resolveMetadata({
   treePrefix?: string[]
   getDynamicParamFromSegment: GetDynamicParamFromSegment
   searchParams: { [key: string]: any }
+  errorConvention: 'not-found' | undefined
 }): Promise<MetadataItems> {
   const [segment, parallelRoutes, { page }] = tree
   const currentTreePrefix = [...treePrefix, segment]
   const isPage = typeof page !== 'undefined'
+
   // Handle dynamic segment params.
   const segmentParam = getDynamicParamFromSegment(segment)
   /**
@@ -379,6 +392,7 @@ export async function resolveMetadata({
   await collectMetadata({
     tree,
     metadataItems,
+    errorConvention,
     props: layerProps,
     route: currentTreePrefix
       // __PAGE__ shouldn't be shown in a route
@@ -395,6 +409,7 @@ export async function resolveMetadata({
       treePrefix: currentTreePrefix,
       searchParams,
       getDynamicParamFromSegment,
+      errorConvention,
     })
   }
 

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

@@ -83,8 +83,6 @@ import { ModuleReference } from '../../build/webpack/loaders/metadata/types'
 
 export const isEdgeRuntime = process.env.NEXT_RUNTIME === 'edge'
 
-const emptyLoaderTree: LoaderTree = ['', {}, {}]
-
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
   segment: string
@@ -1361,12 +1359,13 @@ export async function renderToHTMLOrFlight(
           query
         )
 
-        const createMetadata = (tree: LoaderTree) => (
+        const createMetadata = (tree: LoaderTree, errorType?: 'not-found') => (
           // Adding key={requestId} to make metadata remount for each render
           // @ts-expect-error allow to use async server component
           <MetadataTree
             key={requestId}
             tree={tree}
+            errorType={errorType}
             pathname={pathname}
             searchParams={providedSearchParams}
             getDynamicParamFromSegment={getDynamicParamFromSegment}
@@ -1388,12 +1387,12 @@ export async function renderToHTMLOrFlight(
               assetPrefix={assetPrefix}
               initialCanonicalUrl={pathname}
               initialTree={initialTree}
-              initialHead={<>{createMetadata(loaderTree)}</>}
+              initialHead={<>{createMetadata(loaderTree, undefined)}</>}
               globalErrorComponent={GlobalError}
               notFound={
                 NotFound ? (
                   <ErrorHtml>
-                    {createMetadata(loaderTree)}
+                    {createMetadata(loaderTree, 'not-found')}
                     {notFoundStyles}
                     <NotFound />
                   </ErrorHtml>
@@ -1594,7 +1593,9 @@ export async function renderToHTMLOrFlight(
           if (isNotFoundError(err)) {
             res.statusCode = 404
           }
+          let hasRedirectError = false
           if (isRedirectError(err)) {
+            hasRedirectError = true
             res.statusCode = 307
             if (err.mutableCookies) {
               const headers = new Headers()
@@ -1609,7 +1610,7 @@ export async function renderToHTMLOrFlight(
           }
 
           const use404Error = res.statusCode === 404
-          const useDefaultError = res.statusCode < 400 || res.statusCode === 307
+          const useDefaultError = res.statusCode < 400 || hasRedirectError
 
           const { layout } = loaderTree[2]
           const injectedCSS = new Set<string>()
@@ -1624,19 +1625,28 @@ export async function renderToHTMLOrFlight(
             ? interopDefault(await rootLayoutModule())
             : null
 
+          const metadata = (
+            // @ts-expect-error allow to use async server component
+            <MetadataTree
+              key={requestId}
+              tree={loaderTree}
+              pathname={pathname}
+              errorType={
+                use404Error
+                  ? 'not-found'
+                  : hasRedirectError
+                  ? 'redirect'
+                  : undefined
+              }
+              searchParams={providedSearchParams}
+              getDynamicParamFromSegment={getDynamicParamFromSegment}
+              appUsingSizeAdjust={appUsingSizeAdjust}
+            />
+          )
           const serverErrorElement = (
             <ErrorHtml
-              head={
-                // @ts-expect-error allow to use async server component
-                <MetadataTree
-                  key={requestId}
-                  tree={emptyLoaderTree}
-                  pathname={pathname}
-                  searchParams={providedSearchParams}
-                  getDynamicParamFromSegment={getDynamicParamFromSegment}
-                  appUsingSizeAdjust={appUsingSizeAdjust}
-                />
-              }
+              // For default error we render metadata directly into the head
+              head={useDefaultError ? metadata : null}
             >
               {useDefaultError
                 ? null
@@ -1645,6 +1655,8 @@ export async function renderToHTMLOrFlight(
                       async () => {
                         return (
                           <>
+                            {/* For server components error metadata needs to be inside inline flight data, so they can be hydrated */}
+                            {metadata}
                             {use404Error ? (
                               <RootLayout params={{}}>
                                 {notFoundStyles}

packages/next/src/server/lib/app-dir-module.ts

@@ -32,3 +32,17 @@ export async function getLayoutOrPageModule(loaderTree: LoaderTree) {
 
   return [value, modType] as const
 }
+
+// First check not-found, if it doesn't exist then pick layout
+export async function getErrorOrLayoutModule(
+  loaderTree: LoaderTree,
+  errorType: 'error' | 'not-found'
+) {
+  const { [errorType]: error, layout } = loaderTree[2]
+  if (typeof error !== 'undefined') {
+    return await error[0]()
+  } else if (typeof layout !== 'undefined') {
+    return await layout[0]()
+  }
+  return undefined
+}

test/e2e/app-dir/metadata/app/async/not-found/not-found.tsx

@@ -0,0 +1,8 @@
+export default function notFound() {
+  return <h2>local found boundary</h2>
+}
+
+export const metadata = {
+  title: 'Local not found',
+  description: 'Local not found description',
+}

test/e2e/app-dir/metadata/app/layout.tsx

@@ -10,4 +10,5 @@ export default function Layout({ children }) {
 export const metadata = {
   title: 'this is the layout title',
   description: 'this is the layout description',
+  keywords: ['nextjs', 'react'],
 }

test/e2e/app-dir/metadata/app/not-found.tsx

@@ -1,3 +1,8 @@
 export default function notFound() {
   return <h2>root not found page</h2>
 }
+
+export const metadata = {
+  title: 'Root not found',
+  description: 'Root not found description',
+}