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?

[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?

[hectorzea]

your comment helped me a lot and i think is the most important one here to take a look @mertafor

i was trying a POC using react-i18next in the most actual nextjs version with app router and i faced this error.

In the official tutorial of react-i18next they use generateStaticParams at layout level (check the documentation here )
in layout.tsx they used a getT function which used 'next/headers' and that can generate some errors if you want to generate the page at build time.

i know for sure that if pages are statically generated site could be more faster, but in an scenario like this i dont know if its worth to find different workarounds.

[mertafor]

@hectorzea I remember I've had to build my own i18n solution back then. But afterwards I started using next-intl.

I don't know if there are any better i18n libraries for app router out there but this library is in active development since the early days of Next 14 beta release and by far the best for dealing with RSC and static rendering limitations. Also it's listed in official Next JS docs.

[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.

[JazzyMichael]

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.

This is not accurate. What you described is a basic form of static site generation that is completely different from nextjs' incremental static generation offering. ISR is intended to generate static pages at runtime. If the revalidation time has passed, the first visitor gets a stale version of the page while a new page is statically generated. The only static pages generated at build time are ones that are specified in generateStaticParams, however returning an empty array should force generation of dynamic routes at runtime.

From the docs: https://nextjs.org/docs/app/api-reference/functions/generate-static-params "You must return an empty array from generateStaticParams or utilize export const dynamic = 'force-static' in order to revalidate (ISR) paths at runtime. "

[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