Add instructions for open next examples, format

.prettierrc

@@ -1,7 +1,8 @@
 {
-	"printWidth": 80,
-	"singleQuote": false,
-	"semi": true,
-	"useTabs": true,
-	"trailingComma": "es5"
+  "printWidth": 110,
+  "singleQuote": false,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
 }

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-	"editor.formatOnSave": true
+  "editor.formatOnSave": true
 }

TODO.md

@@ -19,10 +19,10 @@ DONE:
   ```typescript
   /** @type {import('next').NextConfig} */
   const nextConfig = {
-  	output: "standalone",
-  	experimental: {
-  		serverMinification: false,
-  	},
+    output: "standalone",
+    experimental: {
+      serverMinification: false,
+    },
   };
 
   export default nextConfig;
@@ -70,3 +70,42 @@ DONE:
     ```sh
     SKIP_NEXT_APP_BUILD=1 node /path/to/poc-next/builder/dist/index.mjs && npx wrangler dev
     ```
+
+## Open next [example app](https://github.com/sst/open-next/tree/main/example)
+
+Changes:
+
+- App: Patch the next.config.js
+- App: Update package.json
+
+```text
+  "scripts": {
+    "dev": "next dev",
+    ...
+  },
+  "dependencies": {
+    "next": "^14.2.11",
+    "next-auth": "latest",
+    ...
+  },
+  "devDependencies": {
+    "node-url": "npm:url@^0.11.4",
+    "wrangler": "^3.77.0"
+    ...
+  }
+```
+
+- wrangler, update bundle.ts (based on 3.76.0)
+
+```js
+  //l 354
+  conditions: [],
+  platform: "node",
+```
+
+The conditions (`export const BUILD_CONDITIONS = ["workerd", "worker", "browser"];`)
+would pull browser files that are not traced by nft.
+
+- Build the app
+
+- Use the updated wrangler `pnpm --filter wrangler start dev -c /path/to/open-next/example/wrangler.toml`

builder/package.json

@@ -1,19 +1,19 @@
 {
-	"name": "builder",
-	"scripts": {
-		"build": "tsup",
-		"build:watch": "tsup --watch src"
-	},
-	"bin": "dist/index.mjs",
-	"files": [
-		"dist"
-	],
-	"devDependencies": {
-		"@types/node": "^22.2.0",
-		"esbuild": "^0.23.0",
-		"glob": "^11.0.0",
-		"next": "14.2.5",
-		"tsup": "^8.2.4",
-		"typescript": "^5.5.4"
-	}
+  "name": "builder",
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch src"
+  },
+  "bin": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^22.2.0",
+    "esbuild": "^0.23.0",
+    "glob": "^11.0.0",
+    "next": "14.2.5",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4"
+  }
 }

builder/src/args.ts

@@ -3,61 +3,51 @@ import { parseArgs } from "node:util";
 import { resolve } from "node:path";
 
 export function getArgs(): {
-	skipBuild: boolean;
-	outputDir?: string;
+  skipBuild: boolean;
+  outputDir?: string;
 } {
-	const {
-		values: { skipBuild, output },
-	} = parseArgs({
-		options: {
-			skipBuild: {
-				type: "boolean",
-				short: "s",
-				default: false,
-			},
-			output: {
-				type: "string",
-				short: "o",
-			},
-		},
-		allowPositionals: false,
-	});
+  const {
+    values: { skipBuild, output },
+  } = parseArgs({
+    options: {
+      skipBuild: {
+        type: "boolean",
+        short: "s",
+        default: false,
+      },
+      output: {
+        type: "string",
+        short: "o",
+      },
+    },
+    allowPositionals: false,
+  });
 
-	const outputDir = output ? resolve(output) : undefined;
+  const outputDir = output ? resolve(output) : undefined;
 
-	if (outputDir) {
-		assertDirArg(outputDir, "output", true);
-	}
+  if (outputDir) {
+    assertDirArg(outputDir, "output", true);
+  }
 
-	return {
-		outputDir,
-		skipBuild:
-			skipBuild ||
-			["1", "true", "yes"].includes(String(process.env.SKIP_NEXT_APP_BUILD)),
-	};
+  return {
+    outputDir,
+    skipBuild: skipBuild || ["1", "true", "yes"].includes(String(process.env.SKIP_NEXT_APP_BUILD)),
+  };
 }
 
 function assertDirArg(path: string, argName?: string, make?: boolean) {
-	let dirStats: Stats;
-	try {
-		dirStats = statSync(path);
-	} catch {
-		if (!make) {
-			throw new Error(
-				`Error: the provided${
-					argName ? ` "${argName}"` : ""
-				} input is not a valid path`
-			);
-		}
-		mkdirSync(path);
-		return;
-	}
+  let dirStats: Stats;
+  try {
+    dirStats = statSync(path);
+  } catch {
+    if (!make) {
+      throw new Error(`Error: the provided${argName ? ` "${argName}"` : ""} input is not a valid path`);
+    }
+    mkdirSync(path);
+    return;
+  }
 
-	if (!dirStats.isDirectory()) {
-		throw new Error(
-			`Error: the provided${
-				argName ? ` "${argName}"` : ""
-			} input is not a directory`
-		);
-	}
+  if (!dirStats.isDirectory()) {
+    throw new Error(`Error: the provided${argName ? ` "${argName}"` : ""} input is not a directory`);
+  }
 }

builder/src/build/build-next-app.ts

@@ -8,26 +8,24 @@ import { execSync } from "node:child_process";
  * @param nextAppDir the directory of the app to build
  */
 export function buildNextjsApp(nextAppDir: string): void {
-	runNextBuildCommand("pnpm", nextAppDir);
+  runNextBuildCommand("pnpm", nextAppDir);
 }
 
 // equivalent to: https://github.com/sst/open-next/blob/f61b0e94/packages/open-next/src/build.ts#L175-L186
 function runNextBuildCommand(
-	// let's keep things simple and just support only pnpm for now
-	packager: "pnpm" /*"npm" | "yarn" | "pnpm" | "bun"*/,
-	nextAppDir: string
+  // let's keep things simple and just support only pnpm for now
+  packager: "pnpm" /*"npm" | "yarn" | "pnpm" | "bun"*/,
+  nextAppDir: string
 ) {
-	const command = ["bun", "npm"].includes(packager)
-		? `${packager} next build`
-		: `${packager} next build`;
-	execSync(command, {
-		stdio: "inherit",
-		cwd: nextAppDir,
-		env: {
-			...process.env,
-			// equivalent to: https://github.com/sst/open-next/blob/f61b0e9/packages/open-next/src/build.ts#L168-L173
-			// Equivalent to setting `output: "standalone"` in next.config.js
-			NEXT_PRIVATE_STANDALONE: "true",
-		},
-	});
+  const command = ["bun", "npm"].includes(packager) ? `${packager} next build` : `${packager} next build`;
+  execSync(command, {
+    stdio: "inherit",
+    cwd: nextAppDir,
+    env: {
+      ...process.env,
+      // equivalent to: https://github.com/sst/open-next/blob/f61b0e9/packages/open-next/src/build.ts#L168-L173
+      // Equivalent to setting `output: "standalone"` in next.config.js
+      NEXT_PRIVATE_STANDALONE: "true",
+    },
+  });
 }