Im using Nextjs14 with typescript. Using app router. Doing this in src/app/api/router.ts : import { Pool } from 'pg';

const pool = new Pool({
host: '111.111.111',
port: 1111,
database: 'db',
user: 'user',
password: 'password',
});

export default async function GET(response: Response) {
const client = await pool.connect();
const result = await client.query('SELECT get_x();');
client.release();
response = result.rows[0];
console.log(response);
return response;
}

Then when I'm trying to get the info from that api, whether I do it with my fetching hook: const { fetchApi } = useFetch();

const { showError } = useErrorState();

useEffect(() => {
fetchApi<BusinessPartner[]>('/api/route', {
method: 'GET',
})
.then((response) => {
if ('data' in response && Array.isArray(response.data)) {
setBusinessPartners(response.data);
}
})
.catch((error) => {
console.error('Failed to fetch Business Partner: ', error);
showError('Failed to fetch Business Partner.');
});
}, [businessPartners, showError, fetchApi]);

or just with fetch like:
useEffect(() => {
fetch('/api/route)
.then((response) => response.json())
.then((data) => setBusinessPartners(data))
.catch((error) =>
console.error('Error fetching business partner data: ', error)
);
}, [businessPartners]);

I will always only get the app-index.js:31 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 500 because for some reason what will be the response will not be the data from the calling of the sql function but my entire website again beginning from the layout.tsx. These are the headers the route sends: Request URL:
http://localhost:3000/api/route
Request Method:
GET
Status Code:
200 OK