NEXT JS 14 Api Routes do not work as intended on Netlify hosted server

Support
, ,
1

Hello, I’m currently in the process of building a kind of quiz app that always takes a random entry from my database, which consists of a question and a list of answers. For the project I use the Next JS 14 App Router and MongoDB for the database. As a test, I defined a route in the built-in Next JS Api Router “numbers”. This looks like this:
import { NextResponse } from “next/server”;

export async function GET() {
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const randomIndex = Math.floor(Math.random() * numbers.length);
const randomEntry = numbers[randomIndex];

return NextResponse.json(
{ randomNumber: randomEntry },
{
headers: {
“Cache Control”: “no-cache, no-store”,
},
}
);
}

The problem is when I deploy the app and then go to this api at https://xwort.netlify.app/api/numbers, the same reponse is always returned. So the randomNumber doesn’t change when you refresh the page, even though it should actually do so. This also works locally, but unfortunately not on the deployed website… I hope you can help me.
My GitHub Repo: [https://github.com/julius205/XWort

2

Doesn’t seem to be a Netlify issue. Check your build logs:

image
image1146×449 49.6 KB

The /api/numbers is listed as a static file as indicated by the hollow dot. Refer to Next.js docs on how to make this a server-side API.

1 Like
3

Oh, okay, yeah, that makes sense. I tried the same thing with the next js pages router and the Api routes were automatically rendered on the server side. Thanks for the help