Next.js Discord

Discord Forum

Issue with Dynamic Data Update in Next.js on Vercel

Answered
Yacare Caiman posted this in #help-forum
Open in Discord
Yacare CaimanOP
I'm facing an issue with deploying my Next.js project to Vercel. My goal is to have dynamic data updates in my application, but currently, the data is only being updated during the build process. This is causing my app to not work correctly as it relies on real-time data, not data that’s fixed at build time.

I would appreciate any guidance on how to configure Vercel or Next.js to update the data dynamically (e.g., fetching data on the client side or through server-side rendering) rather than during the build phase.
Answered by Yacare Caiman
Solved using connection
View full answer

11 Replies

Arinji
show code @Yacare Caiman
also version
Yacare CaimanOP
Next Version: 15.0.3
@Arinji show code <@424272954595999745>
Yacare CaimanOP
// src/app/page.ts

import Header from "@/components/Header/Header";
import Ubication from "@/components/Ubication/Ubication";
import Event from "@/components/Events/Event";

export default async function Home() {
  return (
    <>
      <Header />
      <main>
        <section>
          <Event />
        </section>
        <Ubication />
      </main>
      {/* <Footer /> */}
    </>
  );
}

// src/components/Events/Event

import { getVisibleEvents } from "@/utils/Events/query";
import EventCard from "./EventCard";

export default async function Event() {
  const events = await getVisibleEvents();
  return (
    <>
      <h1 className="m-4 flex justify-center text-3xl font-bold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
        Properes representacions
      </h1>
      {events.length === 0 ? (
        <p className="m-4 text-center text-2xl text-gray-500 dark:text-gray-400">
          Ara mateix no hi ha cap representació programada.
        </p>
      ) : (
        <>
          <div className="grid justify-center m-4">
            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 xl:gap-7 2xl:gap-8">
              {events.map((event) => {
                const { id, image, title, description, datetime } = event;
                return (
                  <EventCard
                    key={id}
                    id={id}
                    image={image}
                    title={title}
                    description={description}
                    date={new Date(datetime)}
                    time={new Date(datetime)}
                  />
                );
              })}
            </div>
          </div>
        </>
      )}
    </>
  );
}
If you need something else, let me know 🙂
Arinji
to force dynamic, just use this https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
export const dynamic = "force-dynamic"
Yacare CaimanOP
I have seen apps made with Next that do not use this and update in real time the data
@Yacare Caiman Isn't there another way not to do it with that?
Arinji
sure, show your getVisibleEvents func
@Arinji sure, show your getVisibleEvents func
Yacare CaimanOP
export const getVisibleEvents = async () => {
  try {
    const events = await prisma.event.findMany({
      where: {
        visible: true,
      },
      orderBy: {
        datetime: "asc",
      },
    });
    return events;
  } catch (e) {
    console.error(e);
    throw new Error("Error getting visible events");
  }
};
Yacare CaimanOP
Solved using connection
Answer