Metadata Generation

Copyinterface ResolvedMetadataWithURLs {
  // origin and base path for absolute urls for various metadata links such as
  // opengraph-image
  metadataBase: string | null | URL
 
  // The Document title and template if defined
  title: null | AbsoluteTemplateString
 
  // The Document description, and optionally the opengraph and twitter descriptions
  description: null | string
 
  // Standard metadata names
  // https://developer.mozilla.org/docs/Web/HTML/Element/meta/name
  applicationName: null | string
  authors: null | Array<Author>
  generator: null | string
  // if you provide an array it will be flattened into a single tag with comma separation
  keywords: null | Array<string>
  referrer: null | ReferrerEnum
  /**
   * @deprecated
   */
  themeColor: null | ThemeColorDescriptor[]
  /**
   * @deprecated
   */
  colorScheme: null | ColorSchemeEnum
  /**
   * @deprecated
   */
  viewport: null | string
  creator: null | string
  publisher: null | string
 
  // https://developer.mozilla.org/docs/Web/HTML/Element/meta/name#other_metadata_names
  robots: null | ResolvedRobots
 
  // The canonical and alternate URLs for this location
  alternates: null | ResolvedAlternateURLs
 
  // Defaults to rel="icon" but the Icons type can be used
  // to get more specific about rel types
  icons: null | ResolvedIcons
 
  openGraph: null | ResolvedOpenGraph
 
  manifest: null | string | URL
 
  twitter: null | ResolvedTwitterMetadata
 
  facebook: null | ResolvedFacebook
 
  pinterest: null | ResolvedPinterest
 
  // common verification tokens
  verification: null | ResolvedVerification
 
  // Apple web app metadata
  // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
  appleWebApp: null | ResolvedAppleWebApp
 
  // Should devices try to interpret various formats and make actionable links
  // out of them? The canonical example is telephone numbers on mobile that can
  // be clicked to dial
  formatDetection: null | FormatDetection
 
  // meta name="apple-itunes-app"
  itunes: null | ItunesApp
 
  // meta name="abstract"
  // A brief description of what this web-page is about.
  // Not recommended, superceded by description.
  // https://www.metatags.org/all-meta-tags-overview/meta-name-abstract/
  abstract: null | string
 
  // Facebook AppLinks
  appLinks: null | ResolvedAppLinks
 
  // link rel properties
  archives: null | Array<string>

Copytype RobotsFile = {
  // Apply rules for all
  rules:
    | (RobotsRuleBase & {
        userAgent?: string | string[] | undefined
      })
    // Apply rules for specific user agents
    | Array<
        RobotsRuleBase & {
          userAgent: string | string[]
        }
      >
  sitemap?: string | string[] | undefined
  host?: string | undefined
}
 
type SitemapFile = Array<{
  url: string
  lastModified?: string | Date | undefined
  changeFrequency?:
    | 'always'
    | 'hourly'
    | 'daily'
    | 'weekly'
    | 'monthly'
    | 'yearly'
    | 'never'
    | undefined
  priority?: number | undefined
  alternates?:
    | {
        languages?: Languages<string> | undefined
      }
    | undefined
  images?: string[] | undefined
  videos?: Videos[] | undefined
}>
 
type ResolvingMetadata = Promise<ResolvedMetadata>
declare namespace MetadataRoute {
  // eslint-disable-next-line @typescript-eslint/no-shadow
  export type Robots = RobotsFile
  export type Sitemap = SitemapFile
  export type Manifest = ManifestFile
}

Copyfunction getContentType(resourcePath: string) {
  let { name, ext } = getFilenameAndExtension(resourcePath)
  if (ext === 'jpg') ext = 'jpeg'
 
  if (name === 'favicon' && ext === 'ico') return 'image/x-icon'
  if (name === 'sitemap') return 'application/xml'
  if (name === 'robots') return 'text/plain'
  if (name === 'manifest') return 'application/manifest+json'
 
  if (ext === 'png' || ext === 'jpeg' || ext === 'ico' || ext === 'svg') {
    return imageExtMimeTypeMap[ext]
  }
  return 'text/plain'
}
 
async function getStaticAssetRouteCode(
  resourcePath: string,
  fileBaseName: string
) {
  const cache =
    process.env.NODE_ENV !== 'production'
      ? CACHE_HEADERS.NO_CACHE
      : CACHE_HEADERS.REVALIDATE
 
  const isTwitter = fileBaseName === 'twitter-image'
  const isOpenGraph = fileBaseName === 'opengraph-image'
  // Twitter image file size limit is 5MB.
  // General Open Graph image file size limit is 8MB.
  // x-ref: https://developer.x.com/en/docs/x-for-websites/cards/overview/summary
  // x-ref(facebook): https://developers.facebook.com/docs/sharing/webmasters/images
  const fileSizeLimit = isTwitter ? 5 : 8
  const imgName = isTwitter ? 'Twitter' : 'Open Graph'
 
  const code = `\
/* static asset route */
import { NextResponse } from 'next/server'
 
const contentType = ${JSON.stringify(getContentType(resourcePath))}
const buffer = Buffer.from(${JSON.stringify(
    (await fs.promises.readFile(resourcePath)).toString('base64')
  )}, 'base64'
  )
 
if (${isTwitter || isOpenGraph}) {
  const fileSizeInMB = buffer.byteLength / 1024 / 1024
  if (fileSizeInMB > ${fileSizeLimit}) {
    throw new Error('File size for ${imgName} image ${JSON.stringify(resourcePath)} exceeds ${fileSizeLimit}MB. ' +
    \`(Current: \${fileSizeInMB.toFixed(2)}MB)\n\` +
    'Read more: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif'
    )
  }
}
 
export function GET() {
  return new NextResponse(buffer, {
    headers: {
      'Content-Type': contentType,
      'Cache-Control': ${JSON.stringify(cache)},
    },
  })
}
 
export const dynamic = 'force-static'
`
  return code
}

Copy  let imageError
  const imageSize: { width?: number; height?: number } = await getImageSize(
    content
  ).catch((error) => {
    const message = `Process image "${path.posix.join(segment || '/', interpolatedName)}" failed: ${error}`
    imageError = new Error(message)
    return {}
  })
 
  if (imageError) {
    throw imageError
  }
 
  const imageData: Omit<MetadataImageModule, 'url'> = {
    ...(extension in imageExtMimeTypeMap && {
      type: imageExtMimeTypeMap[extension as keyof typeof imageExtMimeTypeMap],
    }),
    ...(useNumericSizes && imageSize.width != null && imageSize.height != null
      ? imageSize
      : {
          sizes:
            // For SVGs, skip sizes and use "any" to let it scale automatically based on viewport,
            // For the images doesn't provide the size properly, use "any" as well.
            // If the size is presented, use the actual size for the image.
            extension !== 'svg' &&
            imageSize.width != null &&
            imageSize.height != null
              ? `${imageSize.width}x${imageSize.height}`
              : 'any',
        }),
  }
  if (type === 'openGraph' || type === 'twitter') {
    const altPath = path.join(
      path.dirname(resourcePath),
      fileNameBase + '.alt.txt'
    )
 
    if (existsSync(altPath)) {
      imageData.alt = await fs.readFile(altPath, 'utf8')
    }
  }
 
  const imageUrl = fillStaticMetadataSegment(pathnamePrefix, pageSegment)
 
  return `\
  export default function () {
    const imageData = ${JSON.stringify(imageData)}
 
    return [{
      ...imageData,
      url: ${JSON.stringify(imageUrl + hashQuery)},
    }]
  }`
}

Copyexport async function accumulateMetadata(
  route: string,
  metadataItems: MetadataItems,
  pathname: Promise<string>,
  metadataContext: MetadataContext
): Promise<ResolvedMetadata> {
  let resolvedMetadata = createDefaultMetadata()
 
  let titleTemplates: TitleTemplates = {
    title: null,
    twitter: null,
    openGraph: null,
  }
 
  const buildState = {
    warnings: new Set<string>(),
  }
 
  let favicon
 
  // Collect the static icons in the most leaf node,
  // since we don't collect all the static metadata icons in the parent segments.
  const leafSegmentStaticIcons = {
    icon: [],
    apple: [],
  }
 
  const resolversAndResults = prerenderMetadata(metadataItems)
  let resultIndex = 0
 
  for (let i = 0; i < metadataItems.length; i++) {
    const staticFilesMetadata = metadataItems[i][1]
    // Treat favicon as special case, it should be the first icon in the list
    // i <= 1 represents root layout, and if current page is also at root
    if (i <= 1 && isFavicon(staticFilesMetadata?.icon?.[0])) {
      const iconMod = staticFilesMetadata?.icon?.shift()
      if (i === 0) favicon = iconMod
    }
 
    let pendingMetadata = resolversAndResults[resultIndex++]
    if (typeof pendingMetadata === 'function') {
      // This metadata item had a `generateMetadata` and
      // we need to provide the currently resolved metadata
      // to it before we continue;
      const resolveParentMetadata = pendingMetadata
      // we know that the next item is a result if this item
      // was a resolver
      pendingMetadata = resolversAndResults[resultIndex++] as Result<Metadata>
 
      resolveParentMetadata(freezeInDev(resolvedMetadata))
    }
    // Otherwise the item was either null or a static export
 
    let metadata: Metadata | null
    if (isPromiseLike(pendingMetadata)) {
      metadata = await pendingMetadata
    } else {
      metadata = pendingMetadata
    }
 
    resolvedMetadata = await mergeMetadata(route, pathname, {
      resolvedMetadata,
      metadata,
      metadataContext,
      staticFilesMetadata,
      titleTemplates,
      buildState,
      leafSegmentStaticIcons,
    })
 
    // If the layout is the same layer with page, skip the leaf layout and leaf page
    // The leaf layout and page are the last two items
    if (i < metadataItems.length - 2) {
      titleTemplates = {
        title: resolvedMetadata.title?.template || null,
        openGraph: resolvedMetadata.openGraph?.title.template || null,
        twitter: resolvedMetadata.twitter?.title.template || null,
      }
    }
  }

Copyfunction getResult<TData extends object, TResolved>(
  resolversAndResults: Array<((value: TResolved) => void) | Result<TData>>,
  exportForResult: null | TData | InstrumentedResolver<TData, TResolved>
) {
  if (typeof exportForResult === 'function') {
    // If the function is a 'use cache' function that uses the parent data as
    // the second argument, we don't want to eagerly execute it during
    // metadata/viewport pre-rendering, as the parent data might also be
    // computed from another 'use cache' function. To ensure that the hanging
    // input abort signal handling works in this case (i.e. the depending
    // function waits for the cached input to resolve while encoding its args),
    // they must be called sequentially. This can be accomplished by wrapping
    // the call in a lazy promise, so that the original function is only called
    // when the result is actually awaited.
    const useCacheFunctionInfo = getUseCacheFunctionInfo(
      exportForResult.$$original
    )
    if (useCacheFunctionInfo && useCacheFunctionInfo.usedArgs[1]) {
      const promise = new Promise<TResolved>((resolve) =>
        resolversAndResults.push(resolve)
      )
      resolversAndResults.push(
        createLazyResult(async () => exportForResult(promise))
      )
    } else {
      let result: TData | Promise<TData>
      if (useCacheFunctionInfo) {
        resolversAndResults.push(noop)
        // @ts-expect-error We intentionally omit the parent argument, because
        // we know from the check above that the 'use cache' function does not
        // use it.
        result = exportForResult()
      } else {
        result = exportForResult(
          new Promise<TResolved>((resolve) => resolversAndResults.push(resolve))
        )
      }
      resolversAndResults.push(result)
      if (result instanceof Promise) {
        // since we eager execute generateMetadata and
        // they can reject at anytime we need to ensure
        // we attach the catch handler right away to
        // prevent unhandled rejections crashing the process
        result.catch((err) => {
          return {
            __nextError: err,
          }
        })
      }
    }
  } else if (typeof exportForResult === 'object') {
    resolversAndResults.push(exportForResult)
  } else {
    resolversAndResults.push(null)
  }
}

Copyfunction getResult<TData extends object, TResolved>(
  exportForResult: null | TData | InstrumentedResolver<TData, TResolved>
): PrerenderedResult<TData, TResolved> {
  if (typeof exportForResult === 'function') {
    // If the function is a 'use cache' function that uses the parent data as
    // the second argument, we don't want to eagerly execute it during
    // metadata/viewport pre-rendering, as the parent data might also be
    // computed from another 'use cache' function. To ensure that the hanging
    // input abort signal handling works in this case (i.e. the depending
    // function waits for the cached input to resolve while encoding its args),
    // they must be called sequentially. This can be accomplished by wrapping
    // the call in a lazy promise, so that the original function is only called
    // when the result is actually awaited.
    const useCacheFunctionInfo = getUseCacheFunctionInfo(
      exportForResult.$$original
    )
    if (useCacheFunctionInfo && !useCacheFunctionInfo.usedArgs[1]) {
      return {
        resolveParent: null,
        result: callResolver(() => {
          // @ts-expect-error We intentionally omit the parent argument, because
          // we know this 'use cache' function does not use it.
          return exportForResult()
        }),
      }
    }
 
    let resolveParent: (value: TResolved) => void
    const parent = new Promise<TResolved>((resolve) => {
      resolveParent = resolve
    })
    return {
      resolveParent: resolveParent!,
      result: useCacheFunctionInfo
        ? createLazyResult(() => exportForResult(parent))
        : callResolver(() => exportForResult(parent)),
    }
  }
 
  return {
    resolveParent: null,
    result: typeof exportForResult === 'object' ? exportForResult : null,
  }
}

Copyasync function Viewport() {
  const tags = await getMetadataResolution(
    tree,
    pathnameForMetadata,
    searchParams,
    interpolatedParams,
    metadataContext,
    errorType
  )
    .then(async (resolution) => {
      const selected = await resolution.selectedViewport
      if (selected.status === 'resolved') {
        return <>{createViewportElements(selected.value)}</>
      }
      if (
        !errorType &&
        (selected.status === 'not-found' ||
          selected.status === 'forbidden' ||
          selected.status === 'unauthorized')
      ) {
        const convention = await getViewportForBranch(
          tree,
          pathnameForMetadata,
          searchParams,
          selected.status,
          interpolatedParams,
          metadataContext,
          resolution.selectedKeyPath
        )
        if (convention.status === 'resolved') {
          return <>{createViewportElements(convention.value)}</>
        }
      }
      return null
    })
    .catch(() => {
      // We're going to throw the error from the metadata outlet so we just render null here instead
      return null
    })
 
  return tags
}

Copyexport function createViewportElements(
  viewport: ResolvedViewport
): React.ReactElement[] {
  const tags: React.ReactElement[] = []
  let i = 0
 
  tags.push(<meta key={i++} charSet="utf-8" />)
 
  // Build viewport content string from layout properties
  const viewportParts: string[] = []
  if (viewport.width != null) {
    viewportParts.push(`width=${viewport.width}`)
  }
  if (viewport.height != null) {
    viewportParts.push(`height=${viewport.height}`)
  }
  if (viewport.initialScale != null) {
    viewportParts.push(`initial-scale=${viewport.initialScale}`)
  }
  if (viewport.minimumScale != null) {
    viewportParts.push(`minimum-scale=${viewport.minimumScale}`)
  }
  if (viewport.maximumScale != null) {
    viewportParts.push(`maximum-scale=${viewport.maximumScale}`)
  }
  if (viewport.userScalable != null) {
    viewportParts.push(`user-scalable=${viewport.userScalable ? 'yes' : 'no'}`)
  }

Copyexport function createMetadataElements(
  metadata: SelectedMetadata
): React.ReactElement[] {
  const tags: React.ReactElement[] = []
  let i = 0
 
  // --- Title ---
  if (metadata.title) {
    tags.push(<title key={i++}>{metadata.title}</title>)
  }
 
  // --- Basic meta tags ---
  if (metadata.description) {
    tags.push(
      <meta key={i++} name="description" content={metadata.description} />
    )
  }
  if (metadata.applicationName) {
    tags.push(
      <meta
        key={i++}
        name="application-name"
        content={metadata.applicationName}
      />
    )
  }
 
  // --- Authors ---
  if (metadata.authors) {
    for (const author of metadata.authors) {
      if (author.url) {
        tags.push(<link key={i++} rel="author" href={author.url.toString()} />)
      }
      if (author.name) {
        tags.push(<meta key={i++} name="author" content={author.name} />)
      }
    }
  }
 
  // --- Manifest ---
  if (metadata.manifest) {
    const manifestOrigin = getOrigin(metadata.manifest)
    tags.push(
      <link
        key={i++}
        rel="manifest"
        href={metadata.manifest.toString()}
        crossOrigin={
          !manifestOrigin && process.env.VERCEL_ENV === 'preview'
            ? 'use-credentials'
            : undefined
        }
      />
    )
  }
 
  if (metadata.generator) {
    tags.push(<meta key={i++} name="generator" content={metadata.generator} />)
  }
  if (metadata.keywords && metadata.keywords.length) {
    tags.push(
      <meta key={i++} name="keywords" content={metadata.keywords.join(',')} />
    )
  }
  if (metadata.referrer) {
    tags.push(<meta key={i++} name="referrer" content={metadata.referrer} />)
  }

Copyexport function createMetadataComponents({
  tree,
  pathname,
  parsedQuery,
  metadataContext,
  interpolatedParams,
  errorType,
  serveStreamingMetadata,
}: {
  tree: LoaderTree
  pathname: string
  parsedQuery: SearchParams
  metadataContext: MetadataContext
  interpolatedParams: Params
  errorType?: MetadataErrorType | 'redirect'
  serveStreamingMetadata: boolean
}): {
  Viewport: React.ComponentType
  Metadata: React.ComponentType
  MetadataOutlet: React.ComponentType<{ tree: LoaderTree }>
} {

Copyexport function resolveRobots(data: MetadataRoute.Robots): string {
  let content = ''
  const rules = Array.isArray(data.rules) ? data.rules : [data.rules]
  for (const rule of rules) {
    const userAgent = resolveArray(rule.userAgent || ['*'])
    for (const agent of userAgent) {
      content += `User-Agent: ${agent}\n`
    }
    if (rule.allow) {
      const allow = resolveArray(rule.allow)
      for (const item of allow) {
        content += `Allow: ${item}\n`
      }
    }
    if (rule.disallow) {
      const disallow = resolveArray(rule.disallow)
      for (const item of disallow) {
        content += `Disallow: ${item}\n`
      }
    }
    if (rule.crawlDelay) {
      content += `Crawl-delay: ${rule.crawlDelay}\n`
    }
    if (rule.other) {
      for (const key of Object.keys(rule.other)) {
        const value = rule.other[key]
        if (value == null) continue
        const values = Array.isArray(value) ? value : [value]
        for (const v of values) {
          content += `${key}: ${v}\n`
        }
      }
    }
    content += '\n'
  }
  if (data.host) {
    content += `Host: ${data.host}\n`
  }
  if (data.sitemap) {
    const sitemap = resolveArray(data.sitemap)
    // TODO-METADATA: support injecting sitemap url into robots.txt
    sitemap.forEach((item) => {
      content += `Sitemap: ${item}\n`
    })
  }
 
  return content
}

Copyexport function resolveSitemap(data: MetadataRoute.Sitemap): string {
  const hasAlternates = data.some(
    (item) => Object.keys(item.alternates ?? {}).length > 0
  )
  const hasImages = data.some((item) => Boolean(item.images?.length))
  const hasVideos = data.some((item) => Boolean(item.videos?.length))
 
  let content = ''
  content += '<?xml version="1.0" encoding="UTF-8"?>\n'
  content += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"'
  if (hasImages) {
    content += ' xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"'
  }
  if (hasVideos) {
    content += ' xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"'
  }
  if (hasAlternates) {
    content += ' xmlns:xhtml="http://www.w3.org/1999/xhtml">\n'
  } else {
    content += '>\n'
  }
  for (const item of data) {
    content += '<url>\n'
    content += `<loc>${item.url}</loc>\n`
 
    const languages = item.alternates?.languages
    if (languages && Object.keys(languages).length) {
      // Since sitemap is separated from the page rendering, there's not metadataBase accessible yet.
      // we give the default setting that won't effect the languages resolving.
      for (const language in languages) {
        content += `<xhtml:link rel="alternate" hreflang="${language}" href="${
          languages[language as keyof typeof languages]
        }" />\n`
      }
    }
    if (item.images?.length) {
      for (const image of item.images) {
        content += `<image:image>\n<image:loc>${image}</image:loc>\n</image:image>\n`
      }
    }
    if (item.videos?.length) {
      for (const video of item.videos) {
        let videoFields = [
          `<video:video>`,
          `<video:title>${video.title}</video:title>`,
          `<video:thumbnail_loc>${video.thumbnail_loc}</video:thumbnail_loc>`,
          `<video:description>${video.description}</video:description>`,
          video.content_loc &&
            `<video:content_loc>${video.content_loc}</video:content_loc>`,
          video.player_loc &&
            `<video:player_loc>${video.player_loc}</video:player_loc>`,
          video.duration &&
            `<video:duration>${video.duration}</video:duration>`,
          video.view_count &&
            `<video:view_count>${video.view_count}</video:view_count>`,
          video.tag && `<video:tag>${video.tag}</video:tag>`,
          video.rating && `<video:rating>${video.rating}</video:rating>`,
          video.expiration_date &&
            `<video:expiration_date>${video.expiration_date}</video:expiration_date>`,
          video.publication_date &&
            `<video:publication_date>${video.publication_date}</video:publication_date>`,
          video.family_friendly &&
            `<video:family_friendly>${video.family_friendly}</video:family_friendly>`,
          video.requires_subscription &&
            `<video:requires_subscription>${video.requires_subscription}</video:requires_subscription>`,
          video.live && `<video:live>${video.live}</video:live>`,
          video.restriction &&
            `<video:restriction relationship="${video.restriction.relationship}">${video.restriction.content}</video:restriction>`,
          video.platform &&
            `<video:platform relationship="${video.platform.relationship}">${video.platform.content}</video:platform>`,
          video.uploader &&
            `<video:uploader${video.uploader.info && ` info="${video.uploader.info}"`}>${video.uploader.content}</video:uploader>`,
          `</video:video>\n`,
        ].filter(Boolean)
        content += videoFields.join('\n')
      }
    }
    if (item.lastModified) {
      const serializedDate =
        item.lastModified instanceof Date

Copyfunction importOgModule(): Promise<OgModule> {
  // Cache Components is Node-only (rejected for the edge runtime at compile
  // time), so we always load the Node build. Loading it dynamically keeps the
  // heavy `@vercel/og` renderer (satori + WASM) off the module-load path, so
  // it's pulled in only when an image is actually rendered.
  return import('next/dist/compiled/@vercel/og/index.node.js')
}

Copyconst chunks: Buffer[] = []
for await (const chunk of prelude) {
  chunks.push(chunk)
}
 
const elementBuffer = Buffer.concat(chunks)
 
// Derive a stable cache key from the serialized element plus the options.
// We hash rather than reuse the raw serialized bytes so the key stays
// compact even for large inputs (e.g. embedded fonts), and we fold the
// options in by content so two images that differ only in their options
// (size, fonts, ...) don't collide. The options are hashed directly here,
// never serialized through Flight, which would both bloat the key and apply
// `Buffer.prototype .toJSON` to font data.
const hash = createHash('sha256')
hash.update(elementBuffer)
updateHashWithOptions(hash, options)
const cacheKey = hash.digest('base64')