I'm using Next.js 14. I'm trying to create an endpoint. Until I take a build, the endpoint gives the correct result. But after taking the build, I can't see the new data added to the database in the endpoint
// This is the function that fetches data from Firebase.
export const getNames = async (): Promise<StateType<Name[]>> => {
try {
const usersCollection = collection(db, "names");
const querySnapshot = await getDocs(usersCollection);
const users = querySnapshot.docs.map((doc) => doc.data() as Name);
return {loading: false, data: users, error: null};
} catch (error) {
const e = new Error("An issue accorded while getting users from database");
return {loading: false, data: null, error: e};
}
};
I use the above function to fetch data from Firebase both in the src/app/api/route.ts file and in the src/app/page.tsx file.
//src/app/api/route.ts
export async function GET() {
const response = await getNames();
return NextResponse.json(response);
}
my home page
//src/app/page.tsx
export default function Home() {
const [result, setResult] = useState<Name[]>([])
React.useEffect(() => {
const fetchData = async () => await getNames()
fetchData().then((result) => {
if (result.data)
setResult(result.data)
})
}, [])
return (
<main className={"relative w-full"}>
<h1 className={"text-3xl font-bold text-center"}>Names</h1>
<div className={"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"}>
{result.map((name: { name: string }) => (
<div key={name.name} className={"bg-gray-100 p-4 rounded-md"}>
<h2 className={"text-xl font-bold"}>{name.name}</h2>
</div>
))}
</div>
</main>
)}
There's no problem on the Home page; the data is coming through properly. However, after taking the build, new data does not come through the endpoint I created.
Where am I making a mistake?