Next.js Discord

Discord Forum

Inconsistency between OpenGraph Metadata interfaces (Next.js Canary 58)

Unanswered
Pacific herring posted this in #help-forum
Open in Discord
Pacific herringOP
Using ResolvingMetadata seems incompatible with Metadata interface.

Type '{ title: string; description: string | undefined; determiner?: "a" | "an" | "the" | "auto" | ""; emails?: Array<string>; phoneNumbers?: Array<string>; faxNumbers?: Array<string>; siteName?: string; ... 7 more ...; ttl?: number; }' is not assignable to type 'OpenGraph | null | undefined'.
  Type '{ title: string; description: string | undefined; determiner?: "a" | "an" | "the" | "auto" | ""; emails?: Array<string>; phoneNumbers?: Array<string>; faxNumbers?: Array<string>; siteName?: string; ... 7 more ...; ttl?: number; }' is not assignable to type 'OpenGraphVideoOther'.
    Type '{ title: string; description: string | undefined; determiner?: "a" | "an" | "the" | "auto" | ""; emails?: Array<string>; phoneNumbers?: Array<string>; faxNumbers?: Array<string>; siteName?: string; ... 7 more ...; ttl?: number; }' is not assignable to type 'OpenGraphMetadata'.
      Types of property 'url' are incompatible.
        Type 'string | URL | null | undefined' is not assignable to type 'string | URL | undefined'.
          Type 'null' is not assignable to type 'string | URL | undefined'.


Context:

import type { Metadata, ResolvingMetadata } from 'next';

type Args = {
    incomingMetadata: ResolvingMetadata;
};

export async function generateMetadata({
    incomingMetadata,
}: Args): Promise<Metadata> {
    const { openGraph } = await incomingMetadata;

    return {
        openGraph: {
            ...(openGraph || {}),
        },
    };
}

1 Reply

Pacific herringOP
The only solution is to cast the type, but TS should infer the right type.