Hi everyone ! Deployment error on Vercel with NextJS14:

.........
   Generating static pages (11/15) 
SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5584:19)
.........
}

I think this is because my fetch() endpoint hitting not the good variable environment.
.env.local :

API_URL=http://localhost:3000

VERCEL env var (on the Vercel Project dashboard):

API_URL=https://jdanse-asso.vercel.app

(This is the deployment URL on Vercel).

My server component to fetch the data :

import Loading from "@/utils/loading";
import { Suspense } from "react";
import ImageList from "../Gallery/ImageList";

export default async function ServerGallery() {
  const getGalleryImages = async () => {
    const response = await fetch(`${process.env.API_URL}/api/gallery`);
    const data = await response.json();
    return data;
  };

  const galleryImages = await getGalleryImages();

  return (
    <Suspense fallback={<Loading />}>
      <ImageList imagesList={galleryImages} />
    </Suspense>
  );
}

What's in /api/gallery/route.ts :

export async function GET(request: NextRequest) {
  await dbConnect();
  try {
    const images = (await GalleryImage.find({})) as GalleryImageTypes[];
    return NextResponse.json(images);
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json(
        { success: false, error: error.message },
        { status: 400 }
      );
    }
    return NextResponse.json(
      { success: false, error: "Unknown error" },
      { status: 400 }
    );
  }
}

I did a lot of research on the internet and couldn't find the solution. Is this an environment variable problem? Am I the one who's doing the wrong thing? I think there is a server/client problem but I'm having trouble understanding what's going on. THANKS !

No problem with next build and fetch on localhost:3000.