Improve Metadata JSDoc (#69037)

Currently the JSDoc for deprecated metadata fields is too confusing.
`@deprecated` tag is inside the `@example` and it doesn't give any
information about the deprecation.

This fix adds a deprecation message and a link to the correct docs.


![CleanShot-2024-08-18-37v7ShgN@2x](https://github.com/user-attachments/assets/20b33f5c-9608-4244-b321-2e5811b22ce2)

packages/next/src/lib/metadata/types/metadata-interface.ts

@@ -132,9 +132,9 @@ interface Metadata extends DeprecatedMetadataFields {
 
   /**
    * The theme color for the document.
+   * @deprecated Use `export const viewport: Viewport = { ... }` instead.
+   * @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
    * @example
-   * @deprecated
-   *
    * ```tsx
    * "#000000"
    * <meta name="theme-color" content="#000000" />
@@ -154,9 +154,9 @@ interface Metadata extends DeprecatedMetadataFields {
 
   /**
    * The color scheme for the document.
+   * @deprecated Use `export const viewport: Viewport = { ... }` instead.
+   * @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
    * @example
-   * @deprecated
-   *
    * ```tsx
    * "dark"
    * <meta name="color-scheme" content="dark" />
@@ -166,11 +166,10 @@ interface Metadata extends DeprecatedMetadataFields {
 
   /**
    * The viewport setting for the document.
+   * @deprecated Use `export const viewport: Viewport = { ... }` instead.
+   * @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
    * @example
-   * @deprecated
-   *
    * ```tsx
-   *
    * { width: "device-width", initialScale: 1 }
    * <meta name="viewport" content="width=device-width, initial-scale=1" />
    * ```