My Api Handlers

src/app/api/profile/route.ts

export async function GET(
  req: NextRequest,
  res: NextApiResponse<UserDataType>
) {
  const api = await apiInstance({ req: req });
  const { userId } = auth();

  if (!userId) {
    return new Response("Unauthorized", { status: 401 });
  }

  const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  const { data }: AxiosResponse = await api.get(`${apiUrl}/humans/profile`);
    console.log(data) 
  return Response.json({ data: data });
}

My page home.tsx

src/app/page.tsx

  try {
    const response = await fetch("<http://localhost:3000/api/profile>", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    console.log(response);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

My response in my page home.tsx

Response {
    type: 'basic',
    url:
      '<http://localhost:3000/api/profile>',
    redirected: false,
    status: 401,
    ok: false,
    statusText: 'Unauthorized',
... 
I'm getting 401 on my call to api/profile in my page folder, but within my api handle I can get the information 

my Middleware

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
  debug: true,
  publicRoutes: ["/api/trpc(.*)"],
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};