How to pass params when two dynamic segments is separated by a static segment?
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
I have a pagination structure that looks like this: /fiction/page/23
I want to be able to get the category param inside the [number] page. But Nextjs doesn't seem to allow it by default? what is the best strategy to handle this?
I want to be able to get the category param inside the [number] page. But Nextjs doesn't seem to allow it by default? what is the best strategy to handle this?
22 Replies
and for server components:
add, category and number in the types instead of id
Asian black bearOP
I want to access the params inside generateStaticParams
you can't do that.
generateStaticParams computes both the category and the number params@joulev you can't do that. `generateStaticParams` computes both the `category` and the `number` params
Asian black bearOP
what do you mean?
@Asian black bear what do you mean?
it means
instead of
generateStaticParams returns { category: string, number: string }[]instead of
generateStaticParams(category: string) returns { number: string }[]you have to query all categories, then for each category you query all numbers associated with it, and build your
{ category, number }[] arraywell, whatever you do, that is just what it is and you cannot do anything about it
Asian black bearOP
how can i get the category params inside the number page in this case?
@American black bear and for server components:
inside the page component itself then just use the
params prop like described hereAsian black bearOP
so, I can't generate these pages statically?
Asian black bearOP
just to be clear i have two dynamic segments [category]/a_page/[number] I am using this pattern for pagination. Now I want to statically generate the pages for different categories with all the content paginated
@joulev you *can*, do this
Asian black bearOP
I think you didn't get my question, please read it again.
@Asian black bear just to be clear i have two dynamic segments [category]/a_page/[number] I am using this pattern for pagination. Now I want to statically generate the pages for different categories with all the content paginated
so you didn't understand me at all, so i guess i have to write the code for you
async function generateStaticParams() {
const categories = await getCategories();
const params = await Promise.all(categories.map(async category => {
const count = await getNumberOfPages(category);
return new Array(count)
.fill(null)
.map((_, i) => ({ category, number: i });
}));
return params;
}Asian black bearOP
nice, thanks. It's my bad that I didn't try bottom up strategy that was suggested in the docs. I thought if others are only working for adjacent dynamic segments, then this will also only work for adjeacent dyanmic segments.
I couldn't able to test it fully though because it overloads my turso db and I am getting econreset errors
It would be really nice if we could receive category params and get the number using that