my code gives me error ate fetch when deployment at vercel at localhost with the same db it works i am a begginer at nextjs any help would be nice
const URL = process.env.VERCEL_URL;

async function getBooksFetch(): Promise<Book[]> {
if (!URL) {
return [];
}
const url = URL.startsWith("localhost")
? http://${URL}/api/books
: https://${URL}/api/books;
const res = await fetch(url, {
cache: "force-cache", //use this to cache
});

if (!res.ok) {
return [];
}

return res.json();
}

export default async function BooksPage() {
const books = await getBooksFetch();
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-6">My Book Collection