Replies: 5 comments 21 replies
-
It is very similar to In For example from the docs: // app/products/[categorySlug]/[productId]/page.js
// Generate segments for both [categorySlug] and [productId]
export async function generateStaticParams() {
const rows = await query('SELECT category, id FROM products');
return rows.map((row) => ({
categorySlug: row.category,
productId: row.id,
}));
} Does that help out? |
Beta Was this translation helpful? Give feedback.
-
You can take a look at my repository, I'm using an example of generateStaticParams very clearly there, you can make a clone and take a look at the code to understand it better, it will help you. https://github.com/gabriel-logan/generateStaticParams-nextjs14 Basically generateStaticParams works as follows, when you use dynamic routes, nextjs can create these routes based on the parameter that is passed to the browser, however when you use a static page, the page cannot update the information dynamically. When you use generateStaticParams nextjs at build time "generates" all the parameters that are possible, IN THE BOTTOM actually what happens is that nextjs creates an html for EACH route you wanted to access so you need to pass the endpoint where ALL the ids are . In my example you can see, I'm looking for data from an API so I pass it into my staticParams then when the next build the application it makes a request to the address that I put there and returns the array containing the number of items within the array , so when you access the parameters on the static page, it will already have ALL the pages preloaded. Basically, static pages are not good when you are dealing with routes because after the build is done IF a new item appears in the API it will not update as it is only generated at build time. |
Beta Was this translation helpful? Give feedback.
-
@gabriel-logan You seem to be making fetch call twice isn't it? Once inside The only thing I can understand is Nextjs builds the dynamicroute pages based on As an experiment, I excluded from passing params to the Page function to see if my page renders fine and to my surprise it seem to LOAD fine. Apparently, page doesn't need the params unless you are going to make use of I would love some more understanding |
Beta Was this translation helpful? Give feedback.
-
@icyJoseph I have the following code below but when I build that is not going to build and it throws error.
how can I generate a static page for every user? or store |
Beta Was this translation helpful? Give feedback.
-
From what I understand the generateStaticParams() function runs at build time and uses the returned list to generate the static pages. So it seems like it executes the code of the dynamic page.js file (for instance blog/[slug]/page.js) for every slug and outputs an html file in the build folder with whatever the slug is. I don't understand how the params object works. It looks like it uses some kind of routing object to match the url to the slug?
Beta Was this translation helpful? Give feedback.
All reactions