Next.js Discord

Discord Forum

Dynamic Routing not working in production.

Answered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
The Dynamic routes work in the dev environment but if I build it and run it on production I get this error.

I removed the export const dynamicParams = false; and it works and routes everything properly but then it will also route a page that is not in the serviceList. Any idea why this is happening?

Also I am following this [part in the docs](https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

import { servicesList } from "@constants/servicesList";

export const dynamicParams = false;

export async function generateStaticParams() {
  return servicesList.map((serviceItem) => {
    {
      params: {
        service: serviceItem.href;
      }
    }
  });
}

const Page = ({ params }: { params: { service: string } }) => {
  const { service } = params;
  const serviceItem = servicesList.find((item) => {
    return item.href === service;
  });

  return (
    <section>
      <h1>{serviceItem?.title}</h1>
      <p>{serviceItem?.desc}</p>
    </section>
  );
};

export default Page;
Answered by joulev
export async function generateStaticParams() {
  return servicesList.map((serviceItem) => ({ service: serviceItem.href }));
}
View full answer

13 Replies

Giant AngoraOP
@aardani what is the path of this file?
Giant AngoraOP
src/app/services/[service]/page.tsx
am I doing something incorrectly here?
the pages do get rendered dynamically
export async function generateStaticParams() {
  return servicesList.map((serviceItem) => ({ service: serviceItem.href }));
}
Answer
the return type is { service: string }[]
put that in your generateStaticParams to see the ts error
@joulev put that in your `generateStaticParams` to see the ts error
Giant AngoraOP
thanks a lot! It worked! So, basically in this new app routing I don't have to have to pass a params key? Or is the issue related to TypeScript?
@Giant Angora thanks a lot! It worked! So, basically in this new app routing I don't have to have to pass a `params` key? Or is the issue related to TypeScript?
return type of getStaticPaths is
{
  paths: {
    params: Params;
    locale?: string;
  }[];
  fallback: "blocking" | boolean;
}

return type of generateStaticParams is just Params[]
they are quite different