I have a backend running on:

http://test.localhost/api/housing/db-apartments/26e87de6-f912-49de-86e8-407fb3ca997e

Which returns data for a single item.

In my nextjs frontend which runs on http://localhost:3000

I have a [slug].tsx which does following:

type Properties = {
  params: Promise<{ slug: string }>
}

export default async function HousingDetailPage({ params }: Properties) {
  const { slug } = await params
  const housing = await getHousingById(slug)
...

export async function getHousingById(id: string): Promise<HousingUnit | null> {
    console.log('getHousingById', `${API_PATH}/db-apartments/${id}`);
    try {
        // Use the rewrite rule to get data
        const response = await fetch(`${API_PATH}/db-apartments/${id}`, {
            headers: {
                'Accept': 'application/json',
            }
        });

        // If the response is not OK, it means the housing unit wasn't found
        if (!response.ok) {
            console.error(`Housing unit with ID ${id} not found`);
            return null;
        }

        const data = await response.json();
        return data;
    } catch (error) {
        console.error(`Error fetching housing unit with ID ${id}:`, error);
        return null;
    }
} 

The generated url is correct, but I get this error

Console Error

[ Server ] Error: fetch failed

Source
src/lib/api/housing.ts (110:26) @ async getHousingById

  108 |     try {
  109 |         // Use the rewrite rule to get data
> 110 |         const response = await fetch(`${API_PATH}/db-apartments/${id}`, {

The dev console says:

 Server  Error fetching housing unit with ID 26e87de6-f912-49de-86e8-407fb3ca997e: Error: fetch failed
    at async getHousingById (housing.ts:110:26)
    at async HousingDetailPage (page.tsx:30:19)

What am I missing, shouldn't it just fetch the data?