API route always returns status code 200 when fetching

[jakobhoeg]

Summary

Fairly new to nextjs, and I've come across an issue when trying to fetch an api. The API itself is fairly simple and checks if there is a session (user is logged in) and then returns a JSON with a GET. (Im using nextauth for authentication.
This is the getGoal/route.ts API file:

import { getAuthSession } from "@/lib/auth";
import { db } from "@/lib/db";

export async function GET(req: Request) {
    try {
        // Get the user session using NextAuth.js getAuthSession function
        const session = await getAuthSession();

        if (!session?.user) {
            // User is not logged in, return an error response
            return new Response("User is not logged in", {
                status: 401, // Unauthorized
            });
        }

        // Retrieve user ID from the session object
        const userId = session.user.id;

        // Fetch goals associated with the user ID
        const goals = await db.goal.findMany({
            where: {
                userId: userId,
            },
        });

        return new Response(JSON.stringify(goals), {
            status: 200,
        });
        
        
    } catch (error) {
        // Handle any other errors that occur during the request
        console.error(error);

        return new Response("Internal Server Error", {
            status: 500,
        });
    }
}

If i access this code in my browser http://localhost:3000/api/getGoal, it returns the 401 message with User not logged in, if im not logged in and it returns the json if I am logged in. However, if i then try and fetch this API in my page.tsx:

import ProgressBar from '@/components/ProgressBar';

async function getData() {

  const data = await fetch('http://localhost:3000/api/goal')
  console.log(data.status)
  
  if (data.status !== 200) {
    throw new Error(data.statusText)
  }

  return data.json()


}


export default async function Home(){


    const goals = await getData()

    return (
      <div className='flex justify-center items-center'>
        <ProgressBar goals={goals} />
      </div>
    );
};

And if I console.log the data.status, it always returns a status code of 200 and always shows the data. I think I'm missing something here, but I just can't seem to wrap my head around it. Again, I am fairly new to Nextjs and React in general.

Additional information

No response

Example

No response

[icyJoseph]

It might be that the API call is getting cached. Try passing a { cache: 'no-store' } option to fetch.

• https://nextjs.org/docs/app/building-your-application/data-fetching/caching#per-request-caching
• https://nextjs.org/docs/app/api-reference/functions/fetch#optionscache

fetch(`https://...`, { cache: 'no-store' })

That being said, this is a bit of an unnecessary setup.

You Home component is a server component, and it runs already on the server, exclusively. So you should just get the data you need, directly there.

I can understand this is a bit annoying, so perhaps you want to use a client component, and fetch the data through use-effect+use-state good old combo.

[muhammad-paksi]

I also experienced the same thing. My API literally returns response 500, my browser also says so, but my nextjs run by npm always says the response status is 200. Even Google Gemini says it's impossible, but yeah, it happens.

The funnier thing is, my database is off, but Nextjs magically says like, "Well, the response is ok, so keep arguing with Google Gemini to see who'll win."

[muhammad-paksi]

I'm not sure if the problem was on the nextjs or the npm.