I have migrated my app from react 17.02 to use the latest version. recently from here.

I am trying to use /api routes to fetch data at client side using SWR.

lib/fetch

export default async function fetcher(...args) {
  const res = await fetch(...args);
  if (!res.ok) throw new Error('Failed to fetch');
  return res.json();
}

This is inside in /pages/dashboard:

  const { data, error } = useSWR(process.env.APP_URL + '/api/user', fetcher, { suspense: true });

  const router = useRouter();

  useEffect(() => {
    setUser(data);
    console.log(series);
  }, [data, user]);
  if (error) {
    router.push('/404');
  }
 return (
    <Suspense fallback={<div>Loading...</div>}>
      <div className="h-screen max-w-7xl mx-auto px-4 bg-background-dark">
        <Header title="Dashboard" />
        <h1 className="text-5xl text-white">You will see all the series here</h1>
      </div>
    </Suspense>
  );

env.local

APP_URL=http://localhost:3000

The application tries to go to this url.

http://localhost:3000/undefined/api/user