Metadata fields improvements (#45945)

Resolves the comments from beta docs * fix typing of `metadata.authors` rendering * add `metadata.manifest` field ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
vercel · Feb 15, 2023 · 9101440 · 9101440
1 parent af6c26c
commit 9101440
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 14 deletions.
diff --git a/packages/next/src/lib/metadata/default-metadata.ts b/packages/next/src/lib/metadata/default-metadata.ts
@@ -18,6 +18,7 @@ export const createDefaultMetadata = (): ResolvedMetadata => {
     creator: null,
     publisher: null,
     robots: null,
+    manifest: null,
     alternates: {
       canonical: null,
       languages: null,

diff --git a/packages/next/src/lib/metadata/generate/basic.tsx b/packages/next/src/lib/metadata/generate/basic.tsx
@@ -12,7 +12,14 @@ export function BasicMetadata({ metadata }: { metadata: ResolvedMetadata }) {
       ) : null}
       <Meta name="description" content={metadata.description} />
       <Meta name="application-name" content={metadata.applicationName} />
-      <Meta name="author" content={metadata.authors?.join(',')} />
+      {metadata.authors &&
+        metadata.authors.map((author, index) => (
+          <React.Fragment key={index}>
+            {author.url && <link rel="author" href={author.url.toString()} />}
+            <Meta name="author" content={author.name} />
+          </React.Fragment>
+        ))}
+      <Meta name="manifest" content={metadata.manifest?.toString()} />
       <Meta name="generator" content={metadata.generator} />
       <Meta name="keywords" content={metadata.keywords?.join(',')} />
       <Meta name="referrer" content={metadata.referrer} />
@@ -79,7 +86,7 @@ export function FormatDetectionMeta({
   if (!formatDetection) return null
   let content = ''
   for (const key of formatDetectionKeys) {
-    if (formatDetection[key]) {
+    if (key in formatDetection) {
       if (content) content += ', '
       content += `${key}=no`
     }

diff --git a/packages/next/src/lib/metadata/resolve-metadata.ts b/packages/next/src/lib/metadata/resolve-metadata.ts
@@ -156,6 +156,7 @@ function merge(
       case 'colorScheme':
       case 'itunes':
       case 'formatDetection':
+      case 'manifest':
         // @ts-ignore TODO: support inferring
         target[key] = source[key] || null
         break

diff --git a/packages/next/src/lib/metadata/types/manifest-types.ts b/packages/next/src/lib/metadata/types/manifest-types.ts
diff --git a/packages/next/src/lib/metadata/types/metadata-interface.ts b/packages/next/src/lib/metadata/types/metadata-interface.ts
@@ -135,6 +135,13 @@ interface Metadata {
    */
   icons?: null | IconURL | Array<Icon> | Icons
 
+  /**
+   * The manifest.json file is the only file that every extension using WebExtension APIs must contain
+   *
+   * @type {null | string | URL}
+   */
+  manifest?: null | string | URL
+
   /**
    * @example
    * Example of Open Graph field:
@@ -293,6 +300,8 @@ interface ResolvedMetadata {
 
   openGraph: null | ResolvedOpenGraph
 
+  manifest: null | string | URL
+
   twitter: null | ResolvedTwitterMetadata
 
   // common verification tokens

diff --git a/test/e2e/app-dir/metadata/app/basic/page.tsx b/test/e2e/app-dir/metadata/app/basic/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 export default function Page() {
@@ -14,22 +15,23 @@ export default function Page() {
   )
 }
 
-export const metadata = {
+export const metadata: Metadata = {
   generator: 'next.js',
   applicationName: 'test',
-  referrer: 'origin-when-crossorigin',
+  referrer: 'origin-when-cross-origin',
   keywords: ['next.js', 'react', 'javascript'],
-  authors: ['John Doe', 'Jane Doe'],
+  authors: [{ name: 'huozhi' }, { name: 'tree', url: 'https://tree.com' }],
   themeColor: 'cyan',
   colorScheme: 'dark',
+  manifest: 'https://github.com/manifest.json',
   viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
   creator: 'shu',
   publisher: 'vercel',
   robots: 'index, follow',
   alternates: {},
   formatDetection: {
-    email: 'no',
-    address: 'no',
-    telephone: 'no',
+    email: false,
+    address: false,
+    telephone: false,
   },
 }
diff --git a/test/e2e/app-dir/metadata/metadata.test.ts b/test/e2e/app-dir/metadata/metadata.test.ts
@@ -102,17 +102,24 @@ createNextDescribe(
         const browser = await next.browser('/basic')
         await checkMetaNameContentPair(browser, 'generator', 'next.js')
         await checkMetaNameContentPair(browser, 'application-name', 'test')
+        await checkMetaNameContentPair(
+          browser,
+          'manifest',
+          'https://github.com/manifest.json'
+        )
+
         await checkMetaNameContentPair(
           browser,
           'referrer',
-          'origin-when-crossorigin'
+          'origin-when-cross-origin'
         )
         await checkMetaNameContentPair(
           browser,
           'keywords',
           'next.js,react,javascript'
         )
-        await checkMetaNameContentPair(browser, 'author', 'John Doe,Jane Doe')
+        await checkMetaNameContentPair(browser, 'author', ['huozhi', 'tree'])
+        await checkLink(browser, 'author', 'https://tree.com')
         await checkMetaNameContentPair(browser, 'theme-color', 'cyan')
         await checkMetaNameContentPair(browser, 'color-scheme', 'dark')
         await checkMetaNameContentPair(
@@ -293,7 +300,7 @@ createNextDescribe(
         await checkMetaNameContentPair(
           browser,
           'referrer',
-          'origin-when-crossorigin'
+          'origin-when-cross-origin'
         )
         await browser.back().waitForElementByCss('#index')
         expect(await getTitle(browser)).toBe('index page')