// navbar.tsx

import Link from "next/link";
import Container from "./ui/container";
import MainNav from "./main-nav";
import getCategories from "@/actions/get-categories";

const Navbar = async () => {
 const categories = await getCategories();
 return (
 <>
  <div className="border-b">
    <Container>
      <div className="relative px-4 sm:px-6 lg:px-8 flex h-16 items-center">
        <Link href="/" className="ml-4 flex lg:ml-0 gap-x-2">
          <p className="font-bold text-xl">STORE</p>
        </Link>
        <MainNav data={categories} />
      </div>
    </Container>
  </div>
 </>
);
};

export default Navbar;

// getCategories.tsx

import { Category } from "@/types";

const URL = `${process.env.NEXT_PUBLIC_API_URL}/categories`;

const getCategories = async (): Promise<Category[]> => {
const res = await fetch(URL);

return res.json();
};

export default getCategories;

I am building a NextJS app, and I am trying to connect my server side to the client, but I am getting this “Unexpected token ‘<‘, “<!DOCTYPE “… is not valid JSON” error. There is no error in the file, but the console sends the error above.