Fix and enhancement for Next 16

.changeset/thirty-bears-tell.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/aws": minor
+---
+
+Add support for Next 16

examples/app-pages-router/next.config.ts

@@ -3,12 +3,8 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   poweredByHeader: false,
   cleanDistDir: true,
-  transpilePackages: ["@example/shared"],
+  // transpilePackages: ["@example/shared"],
   output: "standalone",
-  // outputFileTracingRoot: "../sst",
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   trailingSlash: true,
   skipTrailingSlashRedirect: true,
 };

examples/app-pages-router/open-next.config.local.ts

@@ -29,6 +29,9 @@ export default {
     },
     loader: "fs-dev",
   },
+  dangerous: {
+    enableCacheInterception: true,
+  },
   // You can override the build command here so that you don't have to rebuild next every time you make a change
-  //buildCommand: "echo 'No build command'",
+  // buildCommand: "echo 'No build command'",
 } satisfies OpenNextConfig;

examples/app-pages-router/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "openbuild": "node ../../packages/open-next/dist/index.js build --build-command \"npx turbo build\"",
     "openbuild:local": "node ../../packages/open-next/dist/index.js build --config-path open-next.config.local.ts",
-    "openbuild:local:start": "PORT=3003 tsx proxy.ts",
+    "openbuild:local:start": "PORT=3003 tsx on-proxy.ts",
     "dev": "next dev --turbopack --port 3003",
     "build": "next build",
     "start": "next start --port 3003",

examples/app-pages-router/tsconfig.json

@@ -12,7 +12,7 @@
     "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -23,11 +23,17 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": [
     "node_modules",
     "open-next.config.ts",
     "open-next.config.local.ts",
-    "proxy.ts"
+    "on-proxy.ts"
   ]
 }

examples/app-router/app/api/after/revalidate/route.ts

@@ -6,7 +6,8 @@ export function POST() {
     () =>
       new Promise<void>((resolve) =>
         setTimeout(() => {
-          revalidateTag("date");
+          // We want to expire the "date" tag immediately
+          revalidateTag("date", { expire: 0 });
           resolve();
         }, 5000),
       ),

examples/app-router/app/api/after/ssg/route.ts

@@ -4,9 +4,13 @@ import { NextResponse } from "next/server";
 export const dynamic = "force-static";
 
 export async function GET() {
-  const dateFn = unstable_cache(() => new Date().toISOString(), ["date"], {
-    tags: ["date"],
-  });
+  const dateFn = unstable_cache(
+    async () => new Date().toISOString(),
+    ["date"],
+    {
+      tags: ["date"],
+    },
+  );
   const date = await dateFn();
   return NextResponse.json({ date });
 }

examples/app-router/app/api/revalidate-tag/route.ts

@@ -3,7 +3,7 @@ import { revalidateTag } from "next/cache";
 export const dynamic = "force-dynamic";
 
 export async function GET() {
-  revalidateTag("revalidate");
+  revalidateTag("revalidate", { expire: 0 });
 
   return new Response("ok");
 }

examples/app-router/app/isr-data-cache/page.tsx

@@ -4,7 +4,7 @@ async function getTime() {
   return new Date().toISOString();
 }
 
-const cachedTime = unstable_cache(getTime, { revalidate: false });
+const cachedTime = unstable_cache(getTime, ["getTime"], { revalidate: false });
 
 export const revalidate = 10;
 

examples/app-router/app/og/opengraph-image.tsx

@@ -31,6 +31,9 @@ export default async function Image() {
       // For convenience, we can re-use the exported opengraph-image
       // size config to also set the ImageResponse's width and height.
       ...size,
+      headers: {
+        "cache-control": "public, immutable, no-transform, max-age=31536000",
+      },
     },
   );
 }

examples/app-router/middleware.ts → examples/app-router/proxy.ts

@@ -1,7 +1,7 @@
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
-export function middleware(request: NextRequest) {
+export default function middleware(request: NextRequest) {
   const path = request.nextUrl.pathname; //new URL(request.url).pathname;
 
   const host = request.headers.get("host");

examples/app-router/tsconfig.json

@@ -12,7 +12,7 @@
     "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -23,7 +23,13 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": [
     "node_modules",
     "open-next.config.ts",

examples/pages-router/next.config.ts

@@ -9,10 +9,6 @@ const nextConfig: NextConfig = {
   cleanDistDir: true,
   reactStrictMode: true,
   output: "standalone",
-  // outputFileTracingRoot: "../sst",
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   headers: async () => [
     {
       source: "/",

examples/pages-router/tsconfig.json

@@ -12,7 +12,7 @@
     "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "baseUrl": ".",
     "paths": {

package.json

@@ -7,6 +7,8 @@
   "scripts": {
     "dev": "turbo run dev",
     "build": "turbo run build",
+    "openbuild:local": "turbo run openbuild:local",
+    "openbuild:local:start": "turbo run openbuild:local:start",
     "clean": "turbo run clean && rm -rf node_modules pnpm-lock.yaml",
     "lint": "biome check",
     "lint:fix": "biome check --fix",

packages/open-next/src/adapters/cache.ts

@@ -148,6 +148,14 @@ export default class Cache {
       }
       if (cacheData?.type === "page" || cacheData?.type === "app") {
         if (globalThis.isNextAfter15 && cacheData?.type === "app") {
+          const segmentData = new Map<string, Buffer>();
+          if (cacheData.segmentData) {
+            for (const [segmentPath, segmentContent] of Object.entries(
+              cacheData.segmentData ?? {},
+            )) {
+              segmentData.set(segmentPath, Buffer.from(segmentContent));
+            }
+          }
           return {
             lastModified: _lastModified,
             value: {
@@ -157,6 +165,7 @@ export default class Cache {
               status: meta?.status,
               headers: meta?.headers,
               postponed: meta?.postponed,
+              segmentData,
             },
           } as CacheHandlerValue;
         }

packages/open-next/src/adapters/plugins/image-optimization/image-optimization.replacement.ts

@@ -27,7 +27,8 @@ export async function optimizeImage(
   const { isAbsolute, href } = imageParams;
 
   const imageUpstream = isAbsolute
-    ? await fetchExternalImage(href)
+    ? //@ts-expect-error - fetchExternalImage signature has changed in Next.js 16, it has an extra boolean parameter.
+      await fetchExternalImage(href)
     : await fetchInternalImage(
         href,
         // @ts-expect-error - It is supposed to be an IncomingMessage object, but only the headers are used.

packages/open-next/src/build/copyTracedFiles.ts

@@ -260,6 +260,7 @@ File ${serverPath} does not exist
 
   // Only files that are actually copied
   const tracedFiles: string[] = [];
+  const erroredFiles: string[] = [];
   //Actually copy the files
   filesToCopy.forEach((to, from) => {
     // We don't want to copy excluded packages (e.g. sharp)
@@ -285,7 +286,15 @@ File ${serverPath} does not exist
         }
       }
     } else {
-      copyFileSync(from, to);
+      // Adding this inside a try-catch to handle errors on Next 16+
+      // where some files listed in the .nft.json might not be present in the standalone folder
+      // TODO: investigate that further - is it expected?
+      try {
+        copyFileSync(from, to);
+      } catch (e) {
+        logger.debug("Error copying file:", e);
+        erroredFiles.push(to);
+      }
     }
   });
 
@@ -383,7 +392,7 @@ File ${serverPath} does not exist
   logger.debug("copyTracedFiles:", Date.now() - tsStart, "ms");
 
   return {
-    tracedFiles,
+    tracedFiles: tracedFiles.filter((f) => !erroredFiles.includes(f)),
     nodePackages,
     manifests,
   };

packages/open-next/src/build/createAssets.ts

@@ -105,6 +105,10 @@ export function createCacheAssets(options: buildHelper.BuildOptions) {
   const isFileSkipped = (relativePath: string) =>
     relativePath.endsWith(".js") ||
     relativePath.endsWith(".js.nft.json") ||
+    // We skip manifest files as well
+    relativePath.endsWith("-manifest.json") ||
+    // We skip the segment rsc files as they are treated in a different way
+    relativePath.endsWith(".segment.rsc") ||
     (relativePath.endsWith(".html") && htmlPages.has(relativePath));
 
   // Merge cache files into a single file
@@ -169,6 +173,23 @@ export function createCacheAssets(options: buildHelper.BuildOptions) {
       logger.warn(`Skipping invalid cache file: ${cacheFilePath}`);
       return;
     }
+
+    // If we have a meta file, and it contains segmentPaths, we need to add them to the cache file
+    const segments: Record<string, string> = Array.isArray(
+      cacheFileMeta?.segmentPaths,
+    )
+      ? Object.fromEntries(
+          cacheFileMeta!.segmentPaths.map((segmentPath: string) => {
+            const absoluteSegmentPath = path.join(
+              files.meta!.replace(/\.meta$/, ".segments"),
+              `${segmentPath}.segment.rsc`,
+            );
+            const segmentContent = fs.readFileSync(absoluteSegmentPath, "utf8");
+            return [segmentPath, segmentContent];
+          }),
+        )
+      : {};
+
     const cacheFileContent = {
       type: files.body ? "route" : files.json ? "page" : "app",
       meta: cacheFileMeta,
@@ -184,6 +205,7 @@ export function createCacheAssets(options: buildHelper.BuildOptions) {
                 : "utf8",
             )
         : undefined,
+      segmentData: Object.keys(segments).length > 0 ? segments : undefined,
     };
 
     // Ensure directory exists before writing

packages/open-next/src/core/routing/cacheInterceptor.ts

@@ -11,7 +11,7 @@ import { emptyReadableStream, toReadableStream } from "utils/stream";
 
 import { isBinaryContentType } from "utils/binary";
 import { getTagsFromValue, hasBeenRevalidated } from "utils/cache";
-import { debug } from "../../adapters/logger";
+import { debug, error } from "../../adapters/logger";
 import { localizePath } from "./i18n";
 import { generateMessageGroupId } from "./queue";
 
@@ -29,6 +29,9 @@ const CACHE_ONE_MONTH = 60 * 60 * 24 * 30;
  */
 const VARY_HEADER =
   "RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch, Next-Url";
+const NEXT_SEGMENT_PREFETCH_HEADER = "next-router-segment-prefetch";
+const NEXT_PRERENDER_HEADER = "x-nextjs-prerender";
+const NEXT_POSTPONED_HEADER = "x-nextjs-postponed";
 
 async function computeCacheControl(
   path: string,
@@ -103,6 +106,34 @@ async function computeCacheControl(
   };
 }
 
+function getBodyForAppRouter(
+  event: MiddlewareEvent,
+  cachedValue: CacheValue<"cache">,
+): { body: string; additionalHeaders: Record<string, string> } {
+  if (cachedValue.type !== "app") {
+    throw new Error("getBodyForAppRouter called with non-app cache value");
+  }
+  try {
+    const segmentHeader = `${event.headers[NEXT_SEGMENT_PREFETCH_HEADER]}`;
+    const isSegmentResponse =
+      Boolean(segmentHeader) &&
+      segmentHeader in (cachedValue.segmentData || {});
+
+    const body = isSegmentResponse
+      ? cachedValue.segmentData![segmentHeader]
+      : cachedValue.rsc;
+    return {
+      body,
+      additionalHeaders: isSegmentResponse
+        ? { [NEXT_PRERENDER_HEADER]: "1", [NEXT_POSTPONED_HEADER]: "2" }
+        : {},
+    };
+  } catch (e) {
+    error("Error while getting body for app router from cache:", e);
+    return { body: cachedValue.rsc, additionalHeaders: {} };
+  }
+}
+
 async function generateResult(
   event: MiddlewareEvent,
   localizedPath: string,
@@ -113,19 +144,26 @@ async function generateResult(
   let body = "";
   let type = "application/octet-stream";
   let isDataRequest = false;
-  switch (cachedValue.type) {
-    case "app":
-      isDataRequest = Boolean(event.headers.rsc);
-      body = isDataRequest ? cachedValue.rsc : cachedValue.html;
-      type = isDataRequest ? "text/x-component" : "text/html; charset=utf-8";
-      break;
-    case "page":
-      isDataRequest = Boolean(event.query.__nextDataReq);
-      body = isDataRequest
-        ? JSON.stringify(cachedValue.json)
-        : cachedValue.html;
-      type = isDataRequest ? "application/json" : "text/html; charset=utf-8";
-      break;
+  let additionalHeaders = {};
+  if (cachedValue.type === "app") {
+    isDataRequest = Boolean(event.headers.rsc);
+    if (isDataRequest) {
+      const { body: appRouterBody, additionalHeaders: appHeaders } =
+        getBodyForAppRouter(event, cachedValue);
+      body = appRouterBody;
+      additionalHeaders = appHeaders;
+    } else {
+      body = cachedValue.html;
+    }
+    type = isDataRequest ? "text/x-component" : "text/html; charset=utf-8";
+  } else if (cachedValue.type === "page") {
+    isDataRequest = Boolean(event.query.__nextDataReq);
+    body = isDataRequest ? JSON.stringify(cachedValue.json) : cachedValue.html;
+    type = isDataRequest ? "application/json" : "text/html; charset=utf-8";
+  } else {
+    throw new Error(
+      "generateResult called with unsupported cache value type, only 'app' and 'page' are supported",
+    );
   }
   const cacheControl = await computeCacheControl(
     localizedPath,
@@ -149,6 +187,7 @@ async function generateResult(
       "content-type": type,
       ...cachedValue.meta?.headers,
       vary: VARY_HEADER,
+      ...additionalHeaders,
     },
   };
 }