NextJS/React server function called from client returning 404

Hi!

Been struggling with this issue for several hours, before figuring out that it might not be an issue on my end but perhaps on Netlify’s end.

I’m using Next 14 and React for my website. I’m using server functions to request data. This works fine when building the static pages, but it does not work on the client components. So for example if if cal the server function from my client, for example in a useEffect, it returns a 404. On my localhost, this issue does not arise, and the correct data is returned.

After a while, I tried another platform/competitor to build the same website, and they did not have this issue. So now I’m wondering if it’s something related to Netlify?

Please find my development link below;

Even with a really simple server function, the issue arises;

"use server";

export const testFunction = async () => { 
  return "test";
}

This will not return in an async function awaiting the return on client side in Netlify. But it does on localhost and another platform.

"use client";
import { useEffect } from "react";
import { testFunction } from "@/src/lib/data/test";

export const Test = () => {
  const handleTest = async () => {
    const data = await testFunction();
    console.log("server function return:", data);
  };

  useEffect(() => {
    handleTest();
  }, []);

  return <></>;
};

On the preview link you will notice a 404 and;
server function return: undefined

No responses yet, but to show where it does work;

You will see a “server function return: test” in your console, whereas you will see the 404 in the Netlify equivalent.

This is very likely related to various Next.js 14 issues on Netlify at the moment. It should be fixed by the upcoming v5 release of Next.js Runtime that might be out of beta sometime this quarter.