Add og:image meta rendering

ijjk · ijjk · commit cab12e034b98 · 2021-06-03T16:49:08.000-05:00
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
@@ -370,6 +370,7 @@ export default async function exportApp(
       domainLocales: i18n?.domains,
       trailingSlash: nextConfig.trailingSlash,
       disableOptimizedLoading: nextConfig.experimental.disableOptimizedLoading,
+      ogImage: nextConfig.experimental.ogImage,
     }
 
     const { serverRuntimeConfig, publicRuntimeConfig } = nextConfig
diff --git a/packages/next/next-server/lib/utils.ts b/packages/next/next-server/lib/utils.ts
@@ -8,6 +8,7 @@ import { Env } from '@next/env'
 import { BuildManifest } from '../server/get-page-files'
 import { DomainLocales } from '../server/config'
 import { PreviewData } from 'next/types'
+import { OgImageConfig } from '../server/og-image-config'
 
 /**
  * Types used by both next and next-server
@@ -206,6 +207,8 @@ export type DocumentProps = DocumentInitialProps & {
   scriptLoader: { afterInteractive?: string[]; beforeInteractive?: any[] }
   locale?: string
   disableOptimizedLoading?: boolean
+  ogImage: Pick<OgImageConfig, 'height' | 'width' | 'type'>
+  ogImageUrl?: string
 }
 
 /**
diff --git a/packages/next/next-server/server/incremental-cache.ts b/packages/next/next-server/server/incremental-cache.ts
@@ -187,6 +187,8 @@ export class IncrementalCache {
       pageData?: any
       isNotFound?: boolean
       isRedirect?: boolean
+      upstreamCache?: string
+      contentType?: string
     },
     revalidateSeconds?: number | false
   ) {
diff --git a/packages/next/next-server/server/load-components.ts b/packages/next/next-server/server/load-components.ts
@@ -93,14 +93,27 @@ export async function loadComponents(
   ])
 
   const { getServerSideProps, getStaticProps, getStaticPaths } = ComponentMod
+  const pageConfig = ComponentMod.config || {}
+
+  if (!pathname.endsWith('.image')) {
+    try {
+      // TODO: do we want to use findPageComponent in dev mode to
+      // render meta tags correctly? Currently we only auto-add
+      // complimentary meta tags in production
+      await requirePage(pathname + '.image', distDir, serverless)
+      pageConfig.hasOgImage = true
+    } catch (_) {
+      console.log('idk', _)
+    }
+  }
 
   return {
     App,
     Document,
     Component,
     buildManifest,
     reactLoadableManifest,
-    pageConfig: ComponentMod.config || {},
+    pageConfig,
     ComponentMod,
     getServerSideProps,
     getStaticProps,
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
@@ -94,6 +94,7 @@ import escapePathDelimiters from '../lib/router/utils/escape-path-delimiters'
 import { getUtils } from '../../build/webpack/loaders/next-serverless-loader/utils'
 import { PreviewData } from 'next/types'
 import HotReloader from '../../server/hot-reloader'
+import { OgImageConfig } from './og-image-config'
 
 const getCustomRouteMatcher = pathMatch(true)
 
@@ -165,6 +166,7 @@ export default class Server {
     defaultLocale?: string
     domainLocales?: DomainLocales
     distDir: string
+    ogImage: Pick<OgImageConfig, 'height' | 'width' | 'type'>
   }
   private compression?: Middleware
   private incrementalCache: IncrementalCache
@@ -224,6 +226,7 @@ export default class Server {
         .disableOptimizedLoading,
       domainLocales: this.nextConfig.i18n?.domains,
       distDir: this.distDir,
+      ogImage: this.nextConfig.experimental.ogImage!,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side
@@ -1689,6 +1692,8 @@ export default class Server {
           } as UrlWithParsedQuery)
         }
       } else if ((cachedData as any).image) {
+        res.setHeader('Content-Type', (cachedData as any).contentType)
+        res.setHeader('Cache-Control', (cachedData as any).upstreamCache)
         // TODO: set revalidate headers
         ;(cachedData as any).image.pipe(res)
       } else {
@@ -1727,6 +1732,8 @@ export default class Server {
         sprRevalidate: number | false
         isNotFound?: boolean
         isRedirect?: boolean
+        upstreamCache?: string
+        contentType?: string
       }> => {
         let pageData: any
         let html: string | null
@@ -1753,6 +1760,8 @@ export default class Server {
           res.end(buffer)
 
           return {
+            contentType,
+            upstreamCache,
             imageData: buffer,
             html: null,
             pageData: null,
@@ -1923,6 +1932,8 @@ export default class Server {
         sprRevalidate,
         isNotFound,
         isRedirect,
+        upstreamCache,
+        contentType,
       },
     } = await doRender()
     let resHtml = html
@@ -1963,7 +1974,15 @@ export default class Server {
     if (isOrigin && ssgCacheKey) {
       await this.incrementalCache.set(
         ssgCacheKey,
-        { imageData, html: html!, pageData, isNotFound, isRedirect },
+        {
+          imageData,
+          html: html!,
+          pageData,
+          isNotFound,
+          isRedirect,
+          upstreamCache,
+          contentType,
+        },
         sprRevalidate
       )
     }
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
@@ -61,6 +61,7 @@ import {
   Redirect,
 } from '../../lib/load-custom-routes'
 import { DomainLocales } from './config'
+import { OgImageConfig } from './og-image-config'
 
 function noRouter() {
   const message =
@@ -191,6 +192,7 @@ export type RenderOptsPartial = {
   defaultLocale?: string
   domainLocales?: DomainLocales
   disableOptimizedLoading?: boolean
+  ogImage: Pick<OgImageConfig, 'height' | 'width' | 'type'>
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -236,6 +238,8 @@ function renderDocument(
     domainLocales,
     isPreview,
     disableOptimizedLoading,
+    ogImage,
+    ogImageUrl,
   }: RenderOpts & {
     props: any
     docComponentsRendered: DocumentProps['docComponentsRendered']
@@ -260,6 +264,8 @@ function renderDocument(
     scriptLoader: any
     isPreview?: boolean
     autoExport?: boolean
+    ogImage: Pick<OgImageConfig, 'height' | 'width' | 'type'>
+    ogImageUrl?: string
   }
 ): string {
   return (
@@ -308,6 +314,8 @@ function renderDocument(
           scriptLoader,
           locale,
           disableOptimizedLoading,
+          ogImage,
+          ogImageUrl,
           ...docProps,
         })}
       </AmpStateContext.Provider>
@@ -1085,6 +1093,9 @@ export async function renderToHTML(
     isPreview: isPreview === true ? true : undefined,
     autoExport: isAutoExport === true ? true : undefined,
     nextExport: nextExport === true ? true : undefined,
+    ogImageUrl: (pageConfig as any)?.hasOgImage
+      ? `${pathname}.image.${renderOpts.ogImage.type}`
+      : undefined,
   })
 
   if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -464,6 +464,8 @@ export class Head extends Component<
     const {
       styles,
       ampPath,
+      ogImage,
+      ogImageUrl,
       inAmpMode,
       hybridAmp,
       canonicalBase,
@@ -644,6 +646,14 @@ export class Head extends Component<
           name="next-head-count"
           content={React.Children.count(head || []).toString()}
         />
+        {ogImageUrl ? (
+          <>
+            <meta name="og:image" content={ogImageUrl} />
+            <meta name="og:image:type" content={ogImage.type} />
+            <meta name="og:image:width" content={ogImage.width.toString()} />
+            <meta name="og:image:height" content={ogImage.height.toString()} />
+          </>
+        ) : null}
         {inAmpMode && (
           <>
             <meta

Original file line number	Diff line number	Diff line change
`@@ -370,6 +370,7 @@ export default async function exportApp(`
`370`	`370`	`domainLocales: i18n?.domains,`
`371`	`371`	`trailingSlash: nextConfig.trailingSlash,`
`372`	`372`	`disableOptimizedLoading: nextConfig.experimental.disableOptimizedLoading,`
	`373`	`+ ogImage: nextConfig.experimental.ogImage,`
`373`	`374`	`}`
`374`	`375`
`375`	`376`	`const { serverRuntimeConfig, publicRuntimeConfig } = nextConfig`