Getting "Error loading posts" on Vercel

This is the link for the project deployed on vercel: next.js app on vercel

You can see that on the blog page, it says: "Error loading posts".

I tried to use window.location.origin but it too did not work. I'll provide the necessary code:

page.tsx of blog of app: import React from "react"; import PostCard from "@/components/postCard/postCard"; import styles from "./blog.module.css";

type Post = { id: number; created_at: string; updated_at: string; title: string; desc: string; img: string; userId: string; slug: string; }

const getPosts = async(): Promise => { try{ const res = await fetch("http://localhost:3000/api/blog", { next: { revalidate: 3600 } })

1if (!res.ok){2  throw new Error(`HTTP error! status: ${res.status}`)3}45const posts = await res.json();6return posts as Post[];

} catch (error) { console.error("Failed to fetch posts:", error); throw new Error("Failed to fetch blog posts"); } }

const BlogPage = async () => { try { const posts = await getPosts();

1if (!posts || posts.length === 0) {2  return

No posts found ; }

1console.log('Posts data:', posts); // Add this to debug23return (4  56    {[posts.map](https://posts.map)((post) => (7      89        10      1112    ))}13  1415);

} catch (error) { console.error('Error fetching posts:', error); return Error loading posts ; } };

export default BlogPage;

route.ts of blog of api in app: import { supabase } from "@/app/lib/supabaseClient"; import { NextResponse } from "next/server";

type BlogPost = { id: number; title: string; desc: string; img: string; userId: string; slug: string; }

export const GET = async () => { try{ const { data: posts, error } = await supabase .from('posts') .select('*')

1    if (error) {2        console.error('Supabase error: ', error)3        return NextResponse.json(4            { error: 'Falied to fetch posts'},5            { status: 500}6        )7    }89    return NextResponse.json(posts as BlogPost[])10} catch (err) {11    console.error('Unexpected error:', err);12    return NextResponse.json(13        { error: 'Internal server error' },14        { status: 500 }15    );16}

}

I know that hardcoding the URL for fetching posts as http://localhost:3000/api/blog is causing this issue but i dont know what to do. Please help.