Define process.env.__NEXT_BUILD_ID in edge functions to be Next 14.2.8+ compatible

[Ambroos]

Tested locally in a repo where we encountered the bug (caused by vercel/next.js#65426) and as far as I can tell this should be backwards compatible / pretty safe.

I'm not 100% sure this is the right approach but it is an easy fix at least. I now actually think this is a neat way to fix it.

Fixes #876.

[changeset-bot]

🦋 Changeset detected

Latest commit: af2374a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@cloudflare/next-on-pages	Patch
eslint-plugin-next-on-pages	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ItsWendell]

@dario-piotrowicz sorry for the ping but can we get this merged? There's a bunch of minor fixes in the recent Next.js releases that we'd love to take advantage off.

[Ambroos]

FYI, while waiting for this to land, you can apply this patch on next-on-pages 1.13.2 with pnpm patch / yarn patch / patch-package (for npm) to get the exact same fix without waiting for an update:

diff --git a/dist/index.js b/dist/index.js
index 4cb150acd490b4ec5c6d1884b2f7819ef6866dc2..df72cab2983b7032c945c074aaacaf6ebebfc755 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -12907,6 +12907,10 @@ async function buildFile(contents, filePath, { relativeTo } = {}) {
     )
   );
   await (0, import_promises8.mkdir)((0, import_node_path7.dirname)(filePath), { recursive: true });
+  const nextBuildID = await (0, import_promises3.readFile)(
+    (0, import_path4.resolve)('.next', 'BUILD_ID'),
+    'utf8',
+  );
   await (0, import_esbuild2.build)({
     stdin: { contents },
     target: "es2022",
@@ -12915,7 +12919,10 @@ async function buildFile(contents, filePath, { relativeTo } = {}) {
     bundle: true,
     external: ["node:*", `${relativeNopDistPath}/*`, "*.wasm", "cloudflare:*"],
     minify: true,
-    plugins: [builtInModulesPlugin]
+    plugins: [builtInModulesPlugin],
+    define: {
+      'process.env.__NEXT_BUILD_ID': JSON.stringify(nextBuildID),
+    },
   });
 }
 function getRelativePathToAncestor(opts) {

[dario-piotrowicz]

Thanks a lot for the PR @Ambroos 🙂

Sorry for the delay in reviewing it 🙇

Would you be able to share a minimal reproduction I can use to validate the issue and this solution?

(@ItsWendell do you? 🙏 )

(PS: I've tried creating brand new Next.js apps and I didn't encounter the issue and the repro provided in the issue presents other (unrelated) issues for me)

[Ambroos]

@dario-piotrowicz if you add a route to a project that ends up living in it's own edge function with experimental-edge runtime and then navigate to that it should trigger it. Maybe it's limited to pages router, I'm very unfamiliar with Next but I'm a JS tooling nerd.

I'll try to get you a repo in 15 minutes!

[Ambroos]

@dario-piotrowicz 8 minutes late but here you go: https://github.com/Ambroos/cf-next-on-pages-buildid-crash

• Used pnpm create cloudflare@latest my-next-app --framework=next, bump Next to latest (14.2.8+)
• Pages router
• Add route with export const runtime = 'experimental-edge'
• pnpm preview
• http://localhost:8788/crash -> kaboom
• check out fix branch, pnpm i (applies the patch this commit will result in)
• pnpm preview
• http://localhost:8788/crash -> works

I've been trying to replicate the same crash with the app router but can't manage to trigger it. Which is strange, since the output JS has the same invariant error and same dependency on process.env.__NEXT_BUILD_ID.

[dario-piotrowicz]

@Ambroos thanks a lot for the reproduction! 🫶 I did try reproducing the issue yesterday but I didn't try with the Pages router 🤦

[dario-piotrowicz]

This looks perfect! thanks a lot @Ambroos! ❤️ 🚀

[dario-piotrowicz]

@Ambroos, @davidar and @ItsWendell the fix has been released in [email protected] 🙂 🚀