Next.js Discord

Discord Forum

generateStaticParams problem with next 14.2.1

Unanswered
Broad-billed Hummingbird posted this in #help-forum
Open in Discord
Broad-billed HummingbirdOP
Hello I want to generate a static website so I need to use generateStaticParams() for dynamic segments and nevertheless I have problem with it.

Here's the code of .../[shopId]/pages.tsx :

import ShopContent from "@/app/components/dashboard/shops/shopId/shopContent";
import { getShopById, getShops } from "@/app/core/dashboard/_requests";

export async function generateStaticParams() {
  let shops = await getShops("").then((response) => response); // get all shops

  const paths = shops.map((shop) => ({
    params: { shopId: shop.id },
  }));

  return [
    {
      shopId: paths,
    }
  ]
}

export default async function Page({ params }: { params: { shopId: string } }) {
  const { shopId } = params;
  const shop = await getShopById(shopId).then((response) => response);

  return (
    <div className="w-full h-full">
      <ShopContent shop={shop} />
    </div>
  );
}


I receive
Error: Jest worker encountered 2 child process exceptions, exceeding retry limit

And I changed many things, and I really don't get where the problem is. I have no issues with the routes (getShops, getShopById) and I can't just get the slug.

2 Replies

Broad-billed HummingbirdOP
here it works for a test slug : 

export async function generateStaticParams() {
  return [
    {
      shopId: "1",
    }
  ]
}


export default async function Page(props:any) {

  return (
    <div className="w-full h-full">
    </div>
  );
}


but when I make my request : 

export async function generateStaticParams() {
  let shops = await getShops("").then((res) => res);

  return [
    {
      shopId: "1",
    }
  ]
}


Even if I don't return anything it bugs with the previous error message
@Broad-billed Hummingbird Hello I want to generate a static website so I need to use `generateStaticParams()` for dynamic segments and nevertheless I have problem with it. Here's the code of `.../[shopId]/pages.tsx` : tsx import ShopContent from "@/app/components/dashboard/shops/shopId/shopContent"; import { getShopById, getShops } from "@/app/core/dashboard/_requests"; export async function generateStaticParams() { let shops = await getShops("").then((response) => response); // get all shops const paths = shops.map((shop) => ({ params: { shopId: shop.id }, })); return [ { shopId: paths, } ] } export default async function Page({ params }: { params: { shopId: string } }) { const { shopId } = params; const shop = await getShopById(shopId).then((response) => response); return ( <div className="w-full h-full"> <ShopContent shop={shop} /> </div> ); } I receive `Error: Jest worker encountered 2 child process exceptions, exceeding retry limit` And I changed many things, and I really don't get where the problem is. I have no issues with the routes (getShops, getShopById) and I can't just get the slug.
Turkish Van
First of all make sure the passed param is a string.

I don't really see a reason behind .then(response => response) part.

I assume You want to generate static pages for all the shops where params in that case represents the shop.id. That might look like this:

export async function generateStaticParams() {
  const shops = await getShops("");
  // Make sure shops is an array of shops at this point

  return shops.map(shop => ({
    shopId: shop.id.toString(),
  }))
}

export default async function Page({ params }: { params : {shopId: string} }) {
  const { shopId } = params;
  // shopId is a string at this point
  // make sure to convert it to appropriate type
  const shop = await getShopById(JSON.parse(shopId));

  return (
    <div className={"w-full h-full"}>
      <ShopContent shop={shop} />
    </div>
  )
}