Can anyone explain how generateStaticParams() works along with the param object in next 13?

[alenart91]

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?

[icyJoseph]

It is very similar to getStaticPaths, so generateStaticParams has to return every path member that's dynamic.

In /app/[foo]/[bar]/page.tsx, generateStaticParams has to return a list of objects, where the keys are foo and bar, and the values are strings, or list of strings for catch-all paths.

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?

[chukwukap]

Can we use it inside the app router

[mertafor]

There is one "deadly" important thing about generateStaticParams which is it generates all pages on build time rather than runtime. In other words, it generates prebuilt html files that cannot access any server-side dynamic params such as headers and cookies. Otherwise you'll get "Dynamic server usage" error. This function should be better used for particular paths rather than entire app (layout.tsx) in most cases. Yesterday I wasted my entire day because this function suggested to be used for internalization in the docs. Then I found the reason totally by chance in one of the discussions here. I know that's also my carelesness yet I hope Next team highlights this vital information wherever this function is suggested to be used. Otherwise, an improved error message pointing out that generateStaticParams is involved would be really appreciated.

[Mintnoii]

I encountered the same problem when developing with the notion database api, how did you solve it?

[Julymycin]

Can I know how you get the Route structure?

[mercurymirror]

I have a problem with generateStaticParams because I can't find the files in the out folder after the build. Am I missing something or a step?

[gabriel-logan]

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.

[istealersn-dev]

@gabriel-logan You seem to be making fetch call twice isn't it? Once inside generateStaticParams and Post function. I am struggling to understand why does Nextjs require us to make fetch call twice in order to prebuild HTML page?

The only thing I can understand is Nextjs builds the dynamicroute pages based on generateStaticParams() however, what happens if you attempt a Post that doesn't exist? My expectation would be that it returns 404 rather it doesn't instead it renders the last known page. Once I added export const dynamicParams = false it started returning 404

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 slug. Does it mean if a new post is created at the server where API is hosted it will not render on request? as I am not passing the params

I would love some more understanding

[gabriel-logan]

You need to pass it twice because the fetch you do inside generateStaticParams is theoretically responsible for "creating the parameters" that will be accessed in the static routes.

Generate an html File for each route

And yes, if you pass a post that does not exist at the time of build, it will always return 404 because.

When you generate static pages in next

It generates all the files that are accessible in the build, so as I said if new data appears in the api it won't find it, you will have to generate a new build.

[designly1]

Next.js (or React actually, I think) extends the fetch API and does cool stuff like automatic deduplicating :D. I used to wonder the same thing but pretty cool eh?

[shweta-codeprism]

@gabriel-logan have you tried this combination:

export const dynamicParams = true
export const revalidate = [n]

This should revalidate the page/layout every n seconds. So unless you have a different cache time for fetching the params, the params should get updated every n seconds. No need to rebuild.

[shamun-khatri]

@icyJoseph I have the following code below but when I build that is not going to build and it throws error.

import React from "react";
import ProductSlider from "@/components/ProductSlider";
import { getProducts } from "@/utils/api";
import Banner from "@/components/Banner";
import "./page.css";
import { notFound } from "next/navigation";

// export const revalidate = 1;
export const revalidate = 1;
export const dynamicParams = true;

const fetchStoreData = async (username) => {
  const res = await fetch(`http://localhost:3000/api/user/${username}`);
  const data = await res.json();
  return data;
};

const UserProfile = async ({ params }) => {

  const data = await fetchStoreData(params.username);

  if (data.userInfo.length === 0) {
    return notFound();
  }

  const products = await getProducts();

  return (
    <div>
      <Banner />
      <ProductSlider products={products} />
      <h1>test man</h1>
      <h1>User Profile: {data.userInfo[0].email}</h1>
    </div>
  );
};

export async function generateStaticParams() {
  const storeNames = await fetch(
    `http://localhost:3000/api/user/store/getStoreNames`, { next: { revalidate: 1 } }
  ).then((res) => res.json());

  const stores = [...storeNames.storeNames];


  return stores.map((store) => ({ username: store }));
}

export default UserProfile;

how can I generate a static page for every user? or store

[icyJoseph]

You are trying to fetch from your own server at build time. More here: https://nextjs-faq.com/fetch-api-in-rsc

In short, just get the data you need, in the generate static params function, there is no need to make an extra request toward your own, non existing during build time, server.

[shamun-khatri]

@icyJoseph Yes, I think you are right, But how can I solve this.

[icyJoseph]

Move the contents of api/user/[username]/route.ts, or API route equivalent, into the get user function, and adjust the inputs you need. Also bring any imports necessary, and read the FAQ link I posted.

[aafnnp]

[aafnnp]

https://github.com/aafnnp/site