Getting "Error loading posts" on Vercel

Help
,
1

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<Post> => {
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 <div>No posts found</div>;
}

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

return (
  <div className={styles.container}>
    {posts.map((post) => (
      <div className={styles.post} key={post.id}>
        <PostCard post={post} />
      </div>
    ))}
  </div>
);

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