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 } })

if (!res.ok){
  throw new Error(`HTTP error! status: ${res.status}`)
}

const posts = await res.json();
return 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();

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

No posts found ; }

console.log('Posts data:', posts); // Add this to debug

return (
  

    {[posts.map](https://posts.map)((post) => (
      

        
      

    ))}
  

);

} 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('*')

    if (error) {
        console.error('Supabase error: ', error)
        return NextResponse.json(
            { error: 'Falied to fetch posts'},
            { status: 500}
        )
    }

    return NextResponse.json(posts as BlogPost[])
} catch (err) {
    console.error('Unexpected error:', err);
    return NextResponse.json(
        { error: 'Internal server error' },
        { status: 500 }
    );
}

}

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.

if (error) { console.error('Supabase error: ', error) return NextResponse.json( { error: 'Falied to fetch posts'}, { status: 500} ) } return NextResponse.json(posts as BlogPost[]) } catch (err) { console.error('Unexpected error:', err); return NextResponse.json( { error: 'Internal server error' }, { status: 500 } ); }