fix Next.js dynamic and static OG images

src/frameworks/index.ts

@@ -60,7 +60,7 @@
 /**
  *
  */
 export async function discover(dir: string, warn = true) {
   const allFrameworkTypes = [
     ...new Set(Object.values(WebFrameworks).map(({ type }) => type)),
   ].sort();
@@ -87,20 +87,20 @@
 const BUILD_MEMO = new Map<string[], Promise<BuildResult | void>>();
 
 // Memoize the build based on both the dir and the environment variables
 function memoizeBuild(
   dir: string,
   build: (dir: string, target: string) => Promise<BuildResult | void>,
   deps: any[],
   target: string
 ) {
   const key = [dir, ...deps];
   for (const existingKey of BUILD_MEMO.keys()) {
     if (isDeepStrictEqual(existingKey, key)) {
       return BUILD_MEMO.get(existingKey);
     }
   }
   const value = build(dir, target);
   BUILD_MEMO.set(key, value);
   return value;
 }
 
@@ -108,7 +108,7 @@
  * Use a function to ensure the same codebase name is used here and
  * during hosting deploy.
  */
 export function generateSSRCodebaseId(site: string) {
   return `firebase-frameworks-${site}`;
 }
 
@@ -174,7 +174,7 @@
         `Hosting config for site ${site} places server-side content in region ${ssrRegion} which is not known. Valid regions are ${validRegions}`
       );
     }
     const getProjectPath = (...args: string[]) => join(projectRoot, source, ...args);
     // Combined traffic tag (19 chars) and functionId cannot exceed 46 characters.
     const functionId = `ssr${site.toLowerCase().replace(/-/g, "").substring(0, 20)}`;
     const usesFirebaseAdminSdk = !!findDependency("firebase-admin", { cwd: getProjectPath() });
@@ -210,9 +210,9 @@
       if (selectedSite) {
         const { appId } = selectedSite;
         if (appId) {
           firebaseConfig = await getAppConfig(appId, AppPlatform.WEB);
           firebaseDefaults ||= {};
           firebaseDefaults.config = firebaseConfig;
         } else {
           const defaultConfig = await implicitInit(options);
           if (defaultConfig.json) {
@@ -221,7 +221,7 @@
   You can link a Web app to a Hosting site here https://console.firebase.google.com/project/${project}/settings/general/web`
             );
             firebaseDefaults ||= {};
             firebaseDefaults.config = JSON.parse(defaultConfig.json);
           } else {
             // N.B. None of us know when this can ever happen and the deploy would
             // still succeed. Maaaaybe if someone tried calling firebase serve
@@ -397,7 +397,11 @@
         frameworksEntry = framework,
         dotEnv = {},
         rewriteSource,
-      } = await codegenFunctionsDirectory(getProjectPath(), functionsDist, frameworksBuildTarget);
+      } = await codegenFunctionsDirectory(getProjectPath(), functionsDist, frameworksBuildTarget, {
+        projectId: project,
+        site: options.site,
+        hostingChannel: context?.hostingChannel,
+      });
 
       const rewrite = {
         source: rewriteSource || posix.join(baseUrl, "**"),

src/frameworks/interfaces.ts

@@ -52,6 +52,7 @@ export type FrameworksOptions = HostingOptions &
 export type FrameworkContext = {
   projectId?: string;
   hostingChannel?: string;
+  site?: string;
 };
 
 export interface Framework {
@@ -80,7 +81,8 @@ export interface Framework {
   ɵcodegenFunctionsDirectory?: (
     dir: string,
     dest: string,
-    target: string
+    target: string,
+    context?: FrameworkContext
   ) => Promise<{
     bootstrapScript?: string;
     packageJson: any;

src/frameworks/next/index.ts

@@ -30,7 +30,13 @@ import {
   validateLocales,
   getNodeModuleBin,
 } from "../utils";
-import { BuildResult, FrameworkType, SupportLevel } from "../interfaces";
+import {
+  BuildResult,
+  Framework,
+  FrameworkContext,
+  FrameworkType,
+  SupportLevel,
+} from "../interfaces";
 
 import {
   cleanEscapedChars,
@@ -67,7 +73,7 @@ import {
   APP_PATHS_MANIFEST,
   ESBUILD_VERSION,
 } from "./constants";
-import { getAllSiteDomains } from "../../hosting/api";
+import { getAllSiteDomains, getDeploymentDomain } from "../../hosting/api";
 import { logger } from "../../logger";
 
 const DEFAULT_BUILD_SCRIPT = ["next build"];
@@ -488,7 +494,12 @@ export async function ɵcodegenPublicDirectory(
 /**
  * Create a directory for SSR content.
  */
-export async function ɵcodegenFunctionsDirectory(sourceDir: string, destDir: string) {
+export async function ɵcodegenFunctionsDirectory(
+  sourceDir: string,
+  destDir: string,
+  target: string,
+  context?: FrameworkContext
+): ReturnType<NonNullable<Framework["ɵcodegenFunctionsDirectory"]>> {
   const { distDir } = await getConfig(sourceDir);
   const packageJson = await readJSON(join(sourceDir, "package.json"));
   // Bundle their next.config.js with esbuild via NPX, pinned version was having troubles on m1
@@ -558,9 +569,25 @@ export async function ɵcodegenFunctionsDirectory(sourceDir: string, destDir: st
     packageJson.dependencies["sharp"] = SHARP_VERSION;
   }
 
+  const dotEnv: Record<string, string> = {};
+  if (context?.projectId && context?.site) {
+    const deploymentDomain = await getDeploymentDomain(
+      context.projectId,
+      context.site,
+      context.hostingChannel
+    );
+
+    if (deploymentDomain) {
+      // Add the deployment domain to VERCEL_URL env variable, which is
+      // required for dynamic OG images to work without manual configuration.
+      // See: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#default-value
+      dotEnv["VERCEL_URL"] = deploymentDomain;
+    }
+  }
+
   await mkdirp(join(destDir, distDir));
   await copy(join(sourceDir, distDir), join(destDir, distDir));
-  return { packageJson, frameworksEntry: "next.js" };
+  return { packageJson, frameworksEntry: "next.js", dotEnv };
 }
 
 /**

src/hosting/api.ts

@@ -751,3 +751,20 @@ export async function getAllSiteDomains(projectId: string, siteId: string): Prom
 
   return Array.from(allSiteDomains);
 }
+
+/**
+ * Get the deployment domain.
+ * If hostingChannel is provided, get the channel url, otherwise get the
+ * default site url.
+ */
+export async function getDeploymentDomain(
+  projectId: string,
+  siteId: string,
+  hostingChannel?: string | undefined
+): Promise<string | undefined> {
+  const deploymentUrl = hostingChannel
+    ? await getChannel(projectId, siteId, hostingChannel).then((channel) => channel?.url)
+    : await getSite(projectId, siteId).then((site) => site.defaultUrl);
+
+  return deploymentUrl?.replace(/^https?:\/\//, "");
+}

src/test/hosting/api.spec.ts

@@ -821,6 +821,58 @@ describe("hosting", () => {
       expect(nock.isDone()).to.be.true;
     });
   });
+
+  describe("getDeploymentDomain", () => {
+    afterEach(nock.cleanAll);
+
+    it("should get the default site domain when hostingChannel is omitted", async () => {
+      const defaultDomain = EXPECTED_DOMAINS_RESPONSE[EXPECTED_DOMAINS_RESPONSE.length - 1];
+      const defaultUrl = `https://${defaultDomain}`;
+
+      nock(hostingApiOrigin)
+        .get(`/v1beta1/projects/${PROJECT_ID}/sites/${SITE}`)
+        .reply(200, { defaultUrl });
+
+      expect(await hostingApi.getDeploymentDomain(PROJECT_ID, SITE)).to.equal(defaultDomain);
+    });
+
+    it("should get the default site domain when hostingChannel is undefined", async () => {
+      const defaultDomain = EXPECTED_DOMAINS_RESPONSE[EXPECTED_DOMAINS_RESPONSE.length - 1];
+      const defaultUrl = `https://${defaultDomain}`;
+
+      nock(hostingApiOrigin)
+        .get(`/v1beta1/projects/${PROJECT_ID}/sites/${SITE}`)
+        .reply(200, { defaultUrl });
+
+      expect(await hostingApi.getDeploymentDomain(PROJECT_ID, SITE, undefined)).to.equal(
+        defaultDomain
+      );
+    });
+
+    it("should get the channel domain", async () => {
+      const channelId = "my-channel";
+      const channelDomain = `${PROJECT_ID}--${channelId}-123123.web.app`;
+      const channel = { url: `https://${channelDomain}` };
+
+      nock(hostingApiOrigin)
+        .get(`/v1beta1/projects/${PROJECT_ID}/sites/${SITE}/channels/${channelId}`)
+        .reply(200, channel);
+
+      expect(await hostingApi.getDeploymentDomain(PROJECT_ID, SITE, channelId)).to.equal(
+        channelDomain
+      );
+    });
+
+    it("should return undefined if channel not found", async () => {
+      const channelId = "my-channel";
+
+      nock(hostingApiOrigin)
+        .get(`/v1beta1/projects/${PROJECT_ID}/sites/${SITE}/channels/${channelId}`)
+        .reply(404, {});
+
+      expect(await hostingApi.getDeploymentDomain(PROJECT_ID, SITE, channelId)).to.be.undefined;
+    });
+  });
 });
 
 describe("normalizeName", () => {