fix(dev-overrides): make assets and imageLoader work with basePath

Author: sommeeeer

packages/open-next/src/overrides/imageLoader/fs-dev.ts

@@ -1,13 +1,21 @@
 import fs from "node:fs";
 import path from "node:path";
 
+import { NextConfig } from "config/index";
 import type { ImageLoader } from "types/overrides";
 import { getMonorepoRelativePath } from "utils/normalize-path";
 
 export default {
   name: "fs-dev",
   load: async (url: string) => {
-    const imagePath = path.join(getMonorepoRelativePath(), "assets", url);
+    const urlWithoutBasePath = NextConfig.basePath
+      ? url.slice(NextConfig.basePath.length)
+      : url;
+    const imagePath = path.join(
+      getMonorepoRelativePath(),
+      "assets",
+      urlWithoutBasePath,
+    );
     const body = fs.createReadStream(imagePath);
     const contentType = url.endsWith(".png") ? "image/png" : "image/jpeg";
     return {

packages/open-next/src/overrides/wrappers/express-dev.ts

@@ -1,14 +1,19 @@
 import path from "node:path";
 import express from "express";
 
+import { NextConfig } from "config/index";
 import type { StreamCreator } from "types/open-next.js";
 import type { WrapperHandler } from "types/overrides.js";
 import { getMonorepoRelativePath } from "utils/normalize-path";
 
 const wrapper: WrapperHandler = async (handler, converter) => {
   const app = express();
   // To serve static assets
-  app.use(express.static(path.join(getMonorepoRelativePath(), "assets")));
+  const basePath = NextConfig.basePath ?? "";
+  app.use(
+    basePath,
+    express.static(path.join(getMonorepoRelativePath(), "assets")),
+  );
 
   const imageHandlerPath = path.join(
     getMonorepoRelativePath(),
@@ -17,7 +22,7 @@ const wrapper: WrapperHandler = async (handler, converter) => {
 
   const imageHandler = await import(imageHandlerPath).then((m) => m.handler);
 
-  app.all("/_next/image", async (req, res) => {
+  app.all(`${NextConfig.basePath ?? ""}/_next/image`, async (req, res) => {
     const internalEvent = await converter.convertFrom(req);
     const streamCreator: StreamCreator = {
       writeHeaders: (prelude) => {