fix: skip BC route resolution for 404 path

Author: jorgemoya

core/middlewares/with-routes.ts

@@ -248,6 +248,15 @@ const getRouteInfo = async (request: NextRequest, event: NextFetchEvent) => {
     // For route resolution parity, we need to also include query params, otherwise certain redirects will not work.
     const pathname = clearLocaleFromPath(request.nextUrl.pathname + request.nextUrl.search, locale);
 
+    // Skip BigCommerce route resolution for /404 paths to avoid GraphQL 400 errors
+    // This is a defensive check in case the early return in withRoutes doesn't catch it
+    if (pathname === '/404' || pathname === '/404/' || pathname.startsWith('/404?')) {
+      return {
+        route: undefined,
+        status: undefined,
+      };
+    }
+
     let [routeCache, statusCache] = await kv.mget<RouteCache | StorefrontStatusCache>(
       kvKey(pathname, channelId),
       kvKey(STORE_STATUS_KEY, channelId),
@@ -290,6 +299,27 @@ export const withRoutes: MiddlewareFactory = () => {
   return async (request, event) => {
     const locale = request.headers.get('x-bc-locale') ?? '';
 
+    const { pathname } = new URL(request.url);
+    const cleanPathName = clearLocaleFromPath(pathname, locale);
+
+    // Skip BigCommerce route resolution for /404 path to avoid GraphQL 400 errors on Vercel
+    // This path should be handled by Next.js's not-found page via the catch-all route
+    // Check both the clean path and the original pathname to catch all variations
+    if (
+      cleanPathName === '/404' ||
+      cleanPathName === '/404/' ||
+      pathname === '/404' ||
+      pathname === '/404/' ||
+      pathname.endsWith('/404') ||
+      pathname.endsWith('/404/')
+    ) {
+      const url404 = new URL(`/${locale}/404`, request.url);
+
+      url404.search = request.nextUrl.search;
+
+      return NextResponse.rewrite(url404);
+    }
+
     const { route, status } = await getRouteInfo(request, event);
 
     if (status === 'MAINTENANCE') {
@@ -403,10 +433,6 @@ export const withRoutes: MiddlewareFactory = () => {
       }
 
       default: {
-        const { pathname } = new URL(request.url);
-
-        const cleanPathName = clearLocaleFromPath(pathname, locale);
-
         url = `/${locale}${cleanPathName}`;
       }
     }