Help with generateStaticParams

Unanswered

Orinoco Crocodile posted this in #help-forum

Orinoco CrocodileOP

2023-11-20T16:27:58.000Z

export async function generateStaticParams() {
  return;
}

Can someone explain to me how to use this? I have a dynamic page but cant preload the pages beforehand, only when you load the page itself (requires client side code)

42 Replies

Orinoco CrocodileOP

2023-11-20T16:28:25.000Z

export async function generateStaticParams() {
  return [];
}

- This doesnt work either, its forcing me to generate with a number which I'd rather not do

Orinoco CrocodileOP

2023-11-21T12:11:27.000Z

bump

Orinoco CrocodileOP

2023-11-22T14:12:51.000Z

bump

Orinoco CrocodileOP

2023-11-23T13:54:06.000Z

bump

Orinoco CrocodileOP

2023-11-23T19:30:07.000Z

bump

Orinoco CrocodileOP

2023-11-26T15:52:08.000Z

@Orinoco Crocodile .

!isColonel

2023-11-26T17:36:57.000Z

https://nextjs.org/docs/app/api-reference/functions/generate-static-params

Im not a total expert on Nextjs. I normally just code in it without a reason why, however, never seen people use the function the way you do it. David Gray has a good video on it. From what this does, you map over and return your data so it prebuilds pages on build time. Anyway

Orinoco CrocodileOP

2023-11-26T17:41:11.000Z

Yeah but pages are generated automatically on load depending if you have an auth token

Balinese

2023-11-26T19:52:00.000Z

I think the clue is in the name, Static.
If you need Auth to deal with this page. Static params probably are not the solution. Static pages are generated at build time. Do a tutorial or 2 on how to use these and you'll understand why noone has replied here for 6 days

@Balinese I think the clue is in the name, Static. If you need Auth to deal with this page. Static params probably are not the solution. Static pages are generated at build time. Do a tutorial or 2 on how to use these and you'll understand why noone has replied here for 6 days

Northeast Congo Lion

2023-11-27T13:22:16.000Z

you can combine ISR with auth no problem

i have it set-up to use ISR with generateStaticParams

@Orinoco Crocodile Yeah but pages are generated automatically on load depending if you have an auth token

Northeast Congo Lion

2023-11-27T13:23:32.000Z

your generateStaticParams should return a list of the slugs for that route.

export async function generateStaticParams() {

    const slugsReq = await fetch(...);
    const slugRes = await slugsReq.json();

    return slugRes.map((slug) => ({
        '...slug': slug.path
    }))
}

@Northeast Congo Lion your `generateStaticParams` should return a list of the slugs for that route. js export async function generateStaticParams() { const slugsReq = await fetch(...); const slugRes = await slugsReq.json(); return slugRes.map((slug) => ({ '...slug': slug.path })) }

Orinoco CrocodileOP

2023-11-27T13:26:56.000Z

And if it's not there at build but is there afterwards

Northeast Congo Lion

2023-11-27T13:28:30.000Z

then

wait what

@Orinoco Crocodile And if it's not there at build but is there afterwards

Northeast Congo Lion

2023-11-27T13:29:00.000Z

usually slug list will come from cms etc

where are you defining pages

Orinoco CrocodileOP

2023-11-27T13:30:09.000Z

Pages are created dynamically after through the cms?

So at build there me be x page but that page may be deleted in the db

Northeast Congo Lion

2023-11-27T13:30:36.000Z

then use above

with fallback + isr

genStaticParams will take initial slug list

but if nextjs detects new published page

iirc, it will essentially build it on demand, then store it as part of list

does that make sense?

Orinoco CrocodileOP

2023-11-27T13:31:19.000Z

And there's no way to do it client side?

Northeast Congo Lion

2023-11-27T13:31:37.000Z

uhm

i dont follow

Orinoco CrocodileOP

2023-11-27T13:31:56.000Z

My api requires a auth token which is saved to local storage

Northeast Congo Lion

2023-11-27T13:32:08.000Z

i would consider moving that from localStorage to a cookie

or env file

@Northeast Congo Lion iirc, it will essentially build it on demand, then store it as part of list

Orinoco CrocodileOP

2023-11-29T14:55:53.000Z

so appears to not be working - just returns 404 if it cant find the new page

import { SERVER_IP } from "@/_hooks";
import { CreateOrModifyJob } from "@/_pages/createOrModifyJob/createOrModifyJob";

export async function generateStaticParams() {
  const posts = await fetch(`${SERVER_IP}/cms/get-pages?pageName=jobs`).then(
    (res) => res.json()
  );
  return posts.map((post: { jobID: string }) => ({
    edit: post.jobID.toString(),
  }));
}
export default async function Page({ params }: { params: { edit: string } }) {
  return <CreateOrModifyJob id={params.edit} />;
}