fix: fix next not using prebundled react library (#106)

* fix: fix next not using prebundled react library

* cleanup

* cleanup

* reset compress

* restore compress

* Sync

---------

Co-authored-by: Frank <[email protected]>

Author: khuezy

.changeset/dirty-apricots-shout.md

@@ -0,0 +1,5 @@
+---
+"open-next": patch
+---
+
+Set `__NEXT_PRIVATE_PREBUNDLED_REACT` to use prebundled React

README.md

@@ -357,6 +357,14 @@ In this case, `path.join(process.cwd(), "posts", "my-post.md")` cannot be resolv
 
 To work around the issue, we change the working directory for the server function to where `.next/` is located, ie. `packages/web`.
 
+#### WORKAROUND: Set `__NEXT_PRIVATE_PREBUNDLED_REACT` to use prebundled React
+
+For Next.js 13.2 and later versions, you need to explicitly set the `__NEXT_PRIVATE_PREBUNDLED_REACT` environment variable. Although this environment variable isn't documented at the time of writing, you can refer to the Next.js source code to understand its usage:
+
+> In standalone mode, we don't have separated render workers so if both app and pages are used, we need to resolve to the prebundled React to ensure the correctness of the version for app.
+
+> Require these modules with static paths to make sure they are tracked by NFT when building the app in standalone mode, as we are now conditionally aliasing them it's tricky to track them in build time.
+
 ## Example
 
 In the `example` folder, you can find a Next.js benchmark app. It contains a variety of pages that each test a single Next.js feature. The app is deployed to both Vercel and AWS using [SST](https://docs.sst.dev/start/nextjs).

packages/open-next/src/adapters/image-optimization-adapter.ts

@@ -21,7 +21,6 @@ import {
 } from "next/dist/server/image-optimizer";
 import { loadConfig, setNodeEnv } from "./util.js";
 import { debug } from "./logger.js";
-import { convertFrom, isAPIGatewayProxyEvent } from "./event-mapper.js";
 
 setNodeEnv();
 const bucketName = process.env.BUCKET_NAME;

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

@@ -0,0 +1,33 @@
+// NOTE: add more next config typings as they become relevant
+
+type RemotePattern = {
+  protocol?: "http" | "https";
+  hostname: string;
+  port?: string;
+  pathname?: string;
+};
+declare type ImageFormat = "image/avif" | "image/webp";
+
+type ImageConfigComplete = {
+  deviceSizes: number[];
+  imageSizes: number[];
+  path: string;
+  loaderFile: string;
+  domains: string[];
+  disableStaticImages: boolean;
+  minimumCacheTTL: number;
+  formats: ImageFormat[];
+  dangerouslyAllowSVG: boolean;
+  contentSecurityPolicy: string;
+  contentDispositionType: "inline" | "attachment";
+  remotePatterns: RemotePattern[];
+  unoptimized: boolean;
+};
+type ImageConfig = Partial<ImageConfigComplete>;
+
+export interface NextConfig {
+  experimental: {
+    serverActions?: boolean;
+  };
+  images: ImageConfig;
+}

packages/open-next/src/adapters/server-adapter.ts

@@ -22,6 +22,7 @@ const openNextDir = path.join(__dirname, ".open-next");
 const config = loadConfig(nextDir);
 const htmlPages = loadHtmlPages();
 const publicAssets = loadPublicAssets();
+setNextjsPrebundledReact(config);
 debug({ nextDir });
 
 // Create a NextServer
@@ -109,6 +110,14 @@ function setNextjsServerWorkingDirectory() {
   process.chdir(__dirname);
 }
 
+function setNextjsPrebundledReact(config: any) {
+  // WORKAROUND: Set `__NEXT_PRIVATE_PREBUNDLED_REACT` to use prebundled React — https://github.com/serverless-stack/open-next#workaround-set-__next_private_prebundled_react-to-use-prebundled-react
+  process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = config.experimental
+    .serverActions
+    ? "experimental"
+    : "next";
+}
+
 function loadHtmlPages() {
   const filePath = path.join(nextDir, "server", "pages-manifest.json");
   const json = fs.readFileSync(filePath, "utf-8");

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

@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
+import type { NextConfig } from "./next-types.js";
 
 export function setNodeEnv() {
   process.env.NODE_ENV = process.env.NODE_ENV ?? "production";
@@ -9,5 +10,5 @@ export function loadConfig(nextDir: string) {
   const filePath = path.join(nextDir, "required-server-files.json");
   const json = fs.readFileSync(filePath, "utf-8");
   const { config } = JSON.parse(json);
-  return config;
+  return config as NextConfig;
 }