feat: support Metadata.openGraph

packages/react-server-next/src/vite/index.ts

@@ -114,7 +114,11 @@ function nextConfigPlugin(): Plugin {
       // we might want to define process.env.NEXT_PUBLIC_xxx for better compatibility.
       // https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
       return {
-        envPrefix: ["NEXT_PUBLIC_", ...[config.envPrefix ?? []]].flat(),
+        envPrefix: [
+          "VITE_",
+          "NEXT_PUBLIC_",
+          ...[config.envPrefix ?? []],
+        ].flat(),
       };
     },
   };

packages/react-server/examples/next/app/layout.tsx

@@ -16,6 +16,13 @@ const geistMono = localFont({
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
+  metadataBase: import.meta.env.VITE_METADATA_BASE
+    ? new URL(import.meta.env.VITE_METADATA_BASE)
+    : undefined,
+  openGraph: {
+    title: "Next on Vite",
+    images: [encodeURI("/test/og?title=Next on Vite")],
+  },
 };
 
 export default function RootLayout({

packages/react-server/examples/next/e2e/basic.test.ts

@@ -145,3 +145,17 @@ test("next/og", async ({ page }) => {
   expect(res?.status()).toBe(200);
   expect(res?.headers()).toMatchObject({ "content-type": "image/png" });
 });
+
+testNoJs("Metadata.openGraph", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator(`meta[property="og:title"]`)).toHaveAttribute(
+    "content",
+    "Next on Vite",
+  );
+  await expect(page.locator(`meta[property="og:image"]`)).toHaveAttribute(
+    "content",
+    (process.env.E2E_CF
+      ? "https://test-next-vite.pages.dev"
+      : "http://localhost:5243") + "/test/og?title=Next%20on%20Vite",
+  );
+});

packages/react-server/examples/next/package.json

@@ -10,10 +10,10 @@
     "test-e2e": "playwright test",
     "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
     "test-e2e-cf-preview": "E2E_PREVIEW=1 E2E_CF=1 pnpm test-e2e",
-    "cf-build": "CF_PAGES=1 pnpm build",
+    "cf-build": "CF_PAGES=1 VITE_METADATA_BASE=https://test-next-vite.pages.dev pnpm build",
     "cf-preview": "wrangler pages dev ./dist/cloudflare --compatibility-date=2024-01-01 --compatibility-flags=nodejs_compat",
     "cf-release": "wrangler pages deploy ./dist/cloudflare --commit-dirty --branch main --project-name test-next-vite",
-    "vc-build": "VERCEL=1 pnpm build",
+    "vc-build": "VERCEL=1 VITE_METADATA_BASE=https://test-next-vite.vercel.app pnpm build",
     "vc-release-staging": "vercel deploy --prebuilt",
     "vc-release": "vercel deploy --prod --prebuilt"
   },

packages/react-server/src/features/meta/server.tsx

@@ -8,12 +8,36 @@ export function renderMetadata(m: Metadata) {
       : objectHas(m.title, "default")
         ? m.title.default
         : null;
+
+  // cf. https://github.com/vercel/next.js/blob/a6b2e8bf85316855995fad84ebfc93c62ab3ce04/packages/next/src/lib/metadata/resolvers/resolve-url.ts
+  const metadataBase = new URL(
+    m.metadataBase ??
+      globalThis?.process?.env?.["METADATA_BASE"] ??
+      "http://localhost:5243",
+  );
+
   return (
     <>
       {typeof title === "string" && <title>{title}</title>}
       {typeof m.description === "string" && (
         <meta name="description" content={m.description} />
       )}
+      {typeof m.openGraph?.title === "string" && (
+        <meta property="og:title" content={m.openGraph.title} />
+      )}
+      {typeof m.openGraph?.description === "string" && (
+        <meta property="og:description" content={m.openGraph.description} />
+      )}
+      {typeof m.openGraph?.images !== "undefined" &&
+        [m.openGraph.images]
+          .flat()
+          .map((image, i) => (
+            <meta
+              key={i}
+              property="og:image"
+              content={new URL(image, metadataBase).href}
+            />
+          ))}
     </>
   );
 }

packages/react-server/src/features/meta/utils.ts

@@ -2,5 +2,15 @@
 export type Metadata = {
   title?: null | string | { default: string; [k: string]: unknown };
   description?: null | string;
+  metadataBase?: null | URL;
+  openGraph?: null | MetadataOpenGraph;
   [k: string]: unknown;
 };
+
+export type MetadataOpenGraph = {
+  title?: string;
+  description?: string;
+  images?: MetadataOgImage | Array<MetadataOgImage>;
+};
+
+type MetadataOgImage = string | URL;