Initial support for metadata

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -7,6 +7,7 @@ import { sep } from 'path'
 import { verifyRootLayout } from '../../../lib/verifyRootLayout'
 import * as Log from '../../../build/output/log'
 import { APP_DIR_ALIAS } from '../../../lib/constants'
+import { resolveFileBasedMetadataForLoader } from '../../../lib/metadata/resolve-metadata'
 
 const FILE_TYPES = {
   layout: 'layout',
@@ -36,20 +37,24 @@ async function createTreeCodeFromPath({
   resolveParallelSegments,
 }: {
   pagePath: string
-  resolve: (pathname: string) => Promise<string | undefined>
+  resolve: (
+    pathname: string,
+    resolveDir?: boolean
+  ) => Promise<string | undefined>
   resolveParallelSegments: (
     pathname: string
   ) => [key: string, segment: string][]
 }) {
   const splittedPath = pagePath.split(/[\\/]/)
   const appDirPrefix = splittedPath[0]
   const pages: string[] = []
+
   let rootLayout: string | undefined
   let globalError: string | undefined
 
   async function createSubtreePropsFromSegmentPath(
     segments: string[]
-  ): Promise<string> {
+  ): Promise<[string, string]> {
     const segmentPath = segments.join('/')
 
     // Existing tree are the children of the current segment
@@ -63,12 +68,26 @@ async function createTreeCodeFromPath({
       parallelSegments.push(...resolveParallelSegments(segmentPath))
     }
 
+    let metadataCode = ''
+
     for (const [parallelKey, parallelSegment] of parallelSegments) {
       if (parallelSegment === PAGE_SEGMENT) {
         const matchedPagePath = `${appDirPrefix}${segmentPath}/page`
         const resolvedPagePath = await resolve(matchedPagePath)
         if (resolvedPagePath) pages.push(resolvedPagePath)
 
+        metadataCode += `{
+          type: 'page',
+          layer: ${
+            // There's an extra virtual segment.
+            segments.length - 1
+          },
+          mod: () => import(/* webpackMode: "eager" */ ${JSON.stringify(
+            resolvedPagePath
+          )}),
+          path: ${JSON.stringify(resolvedPagePath)},
+        },`
+
         // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it.
         props[parallelKey] = `['', {}, {
           page: [() => import(/* webpackMode: "eager" */ ${JSON.stringify(
@@ -78,10 +97,9 @@ async function createTreeCodeFromPath({
       }
 
       const parallelSegmentPath = segmentPath + '/' + parallelSegment
-      const subtree = await createSubtreePropsFromSegmentPath([
-        ...segments,
-        parallelSegment,
-      ])
+
+      const [subtreeCode, subtreeMetadataCode] =
+        await createSubtreePropsFromSegmentPath([...segments, parallelSegment])
 
       // `page` is not included here as it's added above.
       const filePaths = await Promise.all(
@@ -93,10 +111,29 @@ async function createTreeCodeFromPath({
         })
       )
 
+      const layout = filePaths.find(
+        ([type, path]) => type === 'layout' && !!path
+      )?.[1]
+
+      // Collect metadata for the layout
+      if (layout) {
+        metadataCode += `{
+          type: 'layout',
+          layer: ${segments.length},
+          mod: () => import(/* webpackMode: "eager" */ ${JSON.stringify(
+            layout
+          )}),
+          path: ${JSON.stringify(layout)},
+        },`
+      }
+      metadataCode += await resolveFileBasedMetadataForLoader(
+        segments.length,
+        (await resolve(`${appDirPrefix}${parallelSegmentPath}/`, true))!
+      )
+      metadataCode += subtreeMetadataCode
+
       if (!rootLayout) {
-        rootLayout = filePaths.find(
-          ([type, path]) => type === 'layout' && !!path
-        )?.[1]
+        rootLayout = layout
       }
 
       if (!globalError) {
@@ -107,7 +144,7 @@ async function createTreeCodeFromPath({
 
       props[parallelKey] = `[
         '${parallelSegment}',
-        ${subtree},
+        ${subtreeCode},
         {
           ${filePaths
             .filter(([, filePath]) => filePath !== undefined)
@@ -124,15 +161,25 @@ async function createTreeCodeFromPath({
       ]`
     }
 
-    return `{
+    return [
+      `{
       ${Object.entries(props)
         .map(([key, value]) => `${key}: ${value}`)
         .join(',\n')}
-    }`
+    }`,
+      metadataCode,
+    ]
   }
 
-  const tree = await createSubtreePropsFromSegmentPath([])
-  return [`const tree = ${tree}.children;`, pages, rootLayout, globalError]
+  const [tree, metadataCode] = await createSubtreePropsFromSegmentPath([])
+
+  return [
+    `const tree = ${tree}.children;`,
+    `const metadata = [${metadataCode}];`,
+    `const pages = ${JSON.stringify(pages)};`,
+    rootLayout,
+    globalError,
+  ]
 }
 
 function createAbsolutePath(appDir: string, pathToTurnAbsolute: string) {
@@ -202,7 +249,11 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
     return Object.entries(matched)
   }
 
-  const resolver = async (pathname: string) => {
+  const resolver = async (pathname: string, resolveDir?: boolean) => {
+    if (resolveDir) {
+      return createAbsolutePath(appDir, pathname)
+    }
+
     try {
       const resolved = await resolve(this.rootContext, pathname)
       this.addDependency(resolved)
@@ -220,7 +271,7 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
     }
   }
 
-  const [treeCode, pages, rootLayout, globalError] =
+  const [treeCode, metadataCode, pageListCode, rootLayout, globalError] =
     await createTreeCodeFromPath({
       pagePath,
       resolve: resolver,
@@ -253,7 +304,8 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
 
   const result = `
     export ${treeCode}
-    export const pages = ${JSON.stringify(pages)}
+    export ${metadataCode}
+    export ${pageListCode}
 
     export { default as AppRouter } from 'next/dist/client/components/app-router'
     export { default as LayoutRouter } from 'next/dist/client/components/layout-router'

packages/next/src/build/webpack/plugins/flight-types-plugin.ts

@@ -64,6 +64,7 @@ interface IEntry {
       ? "runtime?: 'nodejs' | 'experimental-edge' | 'edge'"
       : ''
   }
+  metadata?: any
 }
 
 // =============

packages/next/src/lib/metadata/constant.ts

@@ -0,0 +1,41 @@
+import type { ResolvedMetadata } from './types/metadata-interface'
+
+export const createDefaultMetadata = (): ResolvedMetadata => {
+  return {
+    viewport: 'width=device-width, initial-scale=1',
+
+    // Other values are all null
+    metadataBase: null,
+    title: null,
+    description: null,
+    applicationName: null,
+    authors: null,
+    generator: null,
+    keywords: null,
+    referrer: null,
+    themeColor: null,
+    colorScheme: null,
+    creator: null,
+    publisher: null,
+    robots: null,
+    alternates: {
+      canonical: null,
+      languages: {},
+    },
+    icons: null,
+    openGraph: null,
+    twitter: null,
+    verification: {},
+    appleWebApp: null,
+    formatDetection: null,
+    itunes: null,
+    abstract: null,
+    appLinks: null,
+    archives: null,
+    assets: null,
+    bookmarks: null,
+    category: null,
+    classification: null,
+    other: {},
+  }
+}

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

@@ -0,0 +1,47 @@
+import type { ResolvedMetadata } from '../types/metadata-interface'
+
+import React from 'react'
+
+export function elementsFromResolvedAlternates(metadata: ResolvedMetadata) {
+  return (
+    <>
+      {metadata.alternates.canonical ? (
+        <link rel="canonical" href={metadata.alternates.canonical.toString()} />
+      ) : null}
+      {Object.entries(metadata.alternates.languages).map(([locale, url]) =>
+        url ? (
+          <link
+            key={locale}
+            rel="alternate"
+            hrefLang={locale}
+            href={url.toString()}
+          />
+        ) : null
+      )}
+      {metadata.alternates.media
+        ? Object.entries(metadata.alternates.media).map(([media, url]) =>
+            url ? (
+              <link
+                key={media}
+                rel="alternate"
+                media={media}
+                href={url.toString()}
+              />
+            ) : null
+          )
+        : null}
+      {metadata.alternates.types
+        ? Object.entries(metadata.alternates.types).map(([type, url]) =>
+            url ? (
+              <link
+                key={type}
+                rel="alternate"
+                type={type}
+                href={url.toString()}
+              />
+            ) : null
+          )
+        : null}
+    </>
+  )
+}

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

@@ -0,0 +1,58 @@
+import type { ResolvedMetadata } from '../types/metadata-interface'
+
+import React from 'react'
+import { Meta } from './utils'
+
+export function elementsFromResolvedBasic(metadata: ResolvedMetadata) {
+  return (
+    <>
+      {metadata.title !== null ? (
+        <title>
+          {typeof metadata.title === 'string'
+            ? metadata.title
+            : metadata.title.absolute}
+        </title>
+      ) : null}
+      {metadata.metadataBase !== null ? (
+        <base href={metadata.metadataBase.toString()} />
+      ) : null}
+      <Meta name="description" content={metadata.description} />
+      <Meta name="application-name" content={metadata.applicationName} />
+      <Meta name="author" content={metadata.authors?.join(',')} />
+      <Meta name="generator" content={metadata.generator} />
+      <Meta name="keywords" content={metadata.keywords?.join(',')} />
+      <Meta name="referrer" content={metadata.referrer} />
+      <Meta name="theme-color" content={metadata.themeColor} />
+      <Meta name="color-scheme" content={metadata.colorScheme} />
+      <Meta name="viewport" content={metadata.viewport} />
+      <Meta name="creator" content={metadata.creator} />
+      <Meta name="publisher" content={metadata.publisher} />
+      <Meta name="robots" content={metadata.robots} />
+      <Meta name="abstract" content={metadata.abstract} />
+      {metadata.archives
+        ? metadata.archives.map((archive) => (
+            <link rel="archives" href={archive} key={archive} />
+          ))
+        : null}
+      {metadata.assets
+        ? metadata.assets.map((asset) => (
+            <link rel="assets" href={asset} key={asset} />
+          ))
+        : null}
+      {metadata.bookmarks
+        ? metadata.bookmarks.map((bookmark) => (
+            <link rel="bookmarks" href={bookmark} key={bookmark} />
+          ))
+        : null}
+      <Meta name="category" content={metadata.category} />
+      <Meta name="classification" content={metadata.classification} />
+      {Object.entries(metadata.other).map(([name, content]) => (
+        <Meta
+          key={name}
+          name={name}
+          content={Array.isArray(content) ? content.join(',') : content}
+        />
+      ))}
+    </>
+  )
+}