Next.js Discord

Discord Forum

Dynamic Routes Error when deploying to Vercel

Answered
Yacare Caiman posted this in #help-forum
Open in Discord
Avatar
Yacare CaimanOP
I am trying to deploy my project in Vercel and I get this error, but in local it works and I do not understand why.

import Header from "@/components/Header/Header";
import { getEventById } from "@/utils/Events/query";
import EventData from "@/components/Events/Event/EventData";
import SeatSelector from "@/components/Theatre/SeatSelector";

export default async function EventPage({
  params,
}: {
  params: { id: string };
}) {

  const { id } = await params;
  const eventID = id.split("-").pop();
  const event = await getEventById(parseInt(eventID));

  return (
    <>
      <Header />
      <main>
        <section>
          <EventData
            image={event.image}
            title={event.title}
            description={event.description}
            datetime={event.datetime}
          />
        </section>
        <section>
          <SeatSelector />
        </section>
      </main>
    </>
  );
}
Image
Answered by James4u (Tag me if needed)
yeah then follow this
https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams
View full answer

7 Replies

Avatar
Julienng
Hi!
It happen because you await params but your ts configuration doesn’t match a promise
You need to change your params ts definitions to be a promise, eg: Promise<{label: string}>
Avatar
James4u (Tag me if needed)
@Yacare Caiman You must be using next15
https://nextjs.org/blog/next-15#async-request-apis-breaking-change
There has been a breaking change - now request apis are async
Avatar
Yacare CaimanOP
Yes i’m usung nextjs 15 when i have nextjs 14 works perfect
Avatar
James4u (Tag me if needed)
yeah then follow this
https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams
Answer
Avatar
James4u (Tag me if needed)
// Before
type Params = { slug: string }
 
export function generateMetadata({ params }: { params: Params }) {
  const { slug } = params
}
 
export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Params
}) {
  const { slug } = params
}
 
// After
type Params = Promise<{ slug: string }>
 
export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params
}
 
export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Params
}) {
  const { slug } = await params
}
Avatar
Yacare CaimanOP
Finally I fixed with this
import Header from "@/components/Header/Header";
import { getEventById } from "@/utils/Events/query";
import EventData from "@/components/Events/Event/EventData";
import SeatSelector from "@/components/Theatre/SeatSelector";

type EventPageProps = Promise<{ id: string }>;

export default async function EventPage({
  params,
}: {
  params: EventPageProps;
}) {
  const { id } = await params;
  const eventId = id.split("-").pop();
  const event = await getEventById(parseInt(eventId));
  return (
    <>
      <Header />
      <main>
        <section>
          <EventData
            image={event.image}
            title={event.title}
            description={event.description}
            datetime={event.datetime}
          />
        </section>
        <section>
          <SeatSelector />
        </section>
      </main>
    </>
  );
}