Get dynamic content working

Author: Yuangwang

packages/@apphosting/adapter-nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wei-nextjs-adapter-test",
-  "version": "15.0.10",
+  "version": "15.0.13",
   "main": "dist/index.js",
   "description": "Experimental addon to the Firebase CLI to add web framework support",
   "repository": {

packages/@apphosting/adapter-nextjs/src/bin/build.ts

@@ -1,12 +1,11 @@
 #! /usr/bin/env node
 import { build } from "esbuild";
-import { stringify } from "yaml"; // Add this import
+import { stringify } from "yaml";
 import { spawn } from "child_process";
-import { join, dirname } from "path"; // Ensure dirname is imported
+import { join, dirname } from "path";
 import fs from "fs-extra";
-import { fileURLToPath } from "url";  // Import this
+import { fileURLToPath } from "url";
 
-// 1. SHIM __dirname for ES Modules
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 export async function main() {
@@ -29,9 +28,6 @@ export async function main() {
   });
 
   // 2. Move Standalone Output to .apphosting
-  // The standalone build creates a folder structure that mirrors your hard drive
-  // e.g., .next/standalone/Users/name/project/...
-  // We need to find the actual project root inside standalone.
   const standaloneDir = join(root, ".next", "standalone");
   const outputDir = join(root, ".apphosting");
 
@@ -77,7 +73,6 @@ export async function main() {
       // This runs the file we just bundled in step 3
       runCommand: "node .apphosting/adapter-server.js",
 
-      // Basic defaults - you can expose these as flags later if needed
       concurrency: 80,
       cpu: 1,
       memoryMiB: 512,
@@ -86,13 +81,12 @@ export async function main() {
     },
     metadata: {
       adapterPackageName: "wei-nextjs-adapter-test",
-      adapterVersion: "15.0.3", // You might want to import this from package.json
+      adapterVersion: "15.0.3",
+      frameworkVersion: "16.0.1",
       framework: "nextjs",
     },
     outputFiles: {
       serverApp: {
-        // We tell App Hosting to only upload/keep the .apphosting folder
-        // since we moved everything important into it during Step 2.
         include: [".apphosting"]
       }
     }

packages/@apphosting/adapter-nextjs/src/bin/serve.ts

@@ -2,72 +2,83 @@ import { createServer } from "http";
 import { parse } from "url";
 import path from "path";
 import fs from "fs";
-// DELETE: import { fileURLToPath } from "url"; 
-
-// DELETE these lines. They crash in CJS.
-// const __filename = fileURLToPath(import.meta.url);
-// const __dirname = path.dirname(__filename);
 
 // 1. SET ENV VARS
 // @ts-ignore
 process.env['NODE_ENV'] = "production";
 process.env['NEXT_PRIVATE_MINIMAL_MODE'] = "1";
 
-console.log("🚀 Starting Native Adapter...");
-
 async function start() {
-  // CRITICAL FIX: Use the native __dirname directly.
-  // We use @ts-ignore because TypeScript might complain if it thinks this is ESM.
   // @ts-ignore
   const serverDir = __dirname;
 
-  try {
-    // 2. Load the Serialized Config relative to THIS script
-    const configPath = path.join(serverDir, "firebase-next-config.json");
+  // 2. IMPORT NEXT.JS INTERNALS (REQUIRED FOR PPR)
+  // We need this symbol to attach the postponed state
+  const nextMetaPath = require.resolve("next/dist/server/request-meta", { paths: [serverDir] });
+  const { NEXT_REQUEST_META } = require(nextMetaPath);
+
+  // 3. LOAD CONFIG
+  const configPath = path.join(serverDir, "firebase-next-config.json");
+  const rawConfig = fs.readFileSync(configPath, 'utf-8');
+  const buildContext = JSON.parse(rawConfig);
+
+  // Helper to find the postponed state for a path
+  const getPostponedState = (path: string) => {
+    // 1. Try exact match
+    let prerender = buildContext.outputs.prerenders.find((it: any) => it.pathname === path);
 
-    console.log(`📥 Loading config from ${configPath}`);
-    const rawConfig = fs.readFileSync(configPath, 'utf-8');
-    const buildContext = JSON.parse(rawConfig);
+    // 2. Try dynamic match
+    if (!prerender) {
+      const dynamicMatch = buildContext.routes.dynamicRoutes.find((it: any) => 
+        path.match(new RegExp(it.sourceRegex))
+      )?.source;
+      prerender = buildContext.outputs.prerenders.find((it: any) => it.pathname === dynamicMatch);
+    }
 
-    // 3. Resolve Next.js Server relative to THIS script
-    const nextPath = require.resolve("next/dist/server/next-server", { paths: [serverDir] });
-    const NextServer = require(nextPath).default;
+    return prerender?.fallback?.postponedState;
+  };
 
-    // 4. Initialize Server with the loaded config
-    const server = new NextServer({
-      dir: serverDir, 
-      hostname: '0.0.0.0',
-      port: parseInt(process.env.PORT || "8080"),
-      conf: buildContext.config 
-    });
+  // 4. SETUP SERVER
+  const nextPath = require.resolve("next/dist/server/next-server", { paths: [serverDir] });
+  const NextServer = require(nextPath).default;
+  
+  const server = new NextServer({
+    dir: serverDir,
+    hostname: '0.0.0.0',
+    port: parseInt(process.env.PORT || "8080"),
+    conf: buildContext.config,
+  });
 
-    console.log("⏳ Preparing server...");
-    const requestHandler = server.getRequestHandler();
-    await server.prepare();
+  await server.prepare();
+  const requestHandler = server.getRequestHandler();
 
-    // 5. Start HTTP Listener
-    createServer(async (req: any, res: any) => {
-      try {
-        const parsedUrl = parse(req.url, true);
+  createServer(async (req: any, res: any) => {
+    try {
+      const parsedUrl = parse(req.url, true);
+      const { pathname } = parsedUrl;
 
-        if (!req.headers['x-matched-path']) {
-          req.headers['x-matched-path'] = parsedUrl.pathname;
+      if (req.headers['next-resume'] === '1' && pathname) {
+        const postponed = getPostponedState(pathname);
+        if (postponed) {
+          console.log(`⚡️ Injecting Postponed State for ${pathname}`);
+          
+          req[NEXT_REQUEST_META] = { 
+            postponed: postponed 
+          };
         }
+      }
 
-        await requestHandler(req, res, parsedUrl);
-      } catch (err) {
-        console.error("Request Error:", err);
-        res.statusCode = 500;
-        res.end("Internal Error");
+      if (!req.headers['x-matched-path']) {
+        req.headers['x-matched-path'] = pathname;
       }
-    }).listen(parseInt(process.env.PORT || "8080"), () => {
-      console.log(`> Ready on http://localhost:${process.env.PORT || 8080}`);
-    });
 
-  } catch (e) {
-    console.error("❌ Critical Error:", e);
-    process.exit(1);
-  }
+      await requestHandler(req, res, parsedUrl);
+    } catch (err) {
+      console.error(err);
+      res.statusCode = 500;
+      res.end("Internal Error");
+    }
+  }).listen(parseInt(process.env.PORT || "8080"));
 }
 
 start();

packages/@apphosting/adapter-nextjs/src/index.ts

@@ -5,7 +5,6 @@ import path from 'path';
 const adapter: NextAdapter = {
   name: 'firebase-apphosting-adapter',
 
-  // Hook 1: Modify Config (Optional)
   async modifyConfig(config, context) {
     console.log(`🔌 [Adapter] Modifying config for phase: ${context.phase}`);
     // You can force settings here, e.g., enforcing standalone output
@@ -14,13 +13,11 @@ const adapter: NextAdapter = {
       output: 'standalone', 
       experimental: {
         ...config.experimental,
-        // Helper to ensure ISR works correctly in some environments
         isrMemoryCacheSize: 0, 
       }
     };
   },
 
-  // Hook 2: Build Complete (The specific feature you wanted)
 async onBuildComplete(data) {
     console.log('🔌 [Adapter] Build Complete. Serializing config...');
 
@@ -33,5 +30,4 @@ async onBuildComplete(data) {
   }
 };
 
-// Next.js expects a CommonJS export for the adapter
 export default adapter;