I have a dynamic route [lang] and inside this I have an About page and a Events page.
But I'm forced to rerun the same generateStaticParams function on those pages as well
#Is generateStaticParams required on all pages with output: export?
ornate ingot
abstract nestBOT
Hi @ornate ingot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you're correct. In Next.js, the generateStaticParams function is used to statically generate routes at build time. This function is used in combination with dynamic route segments. If you have a dynamic route [lang] and inside this you have an About page and an Events page, you would need to run generateStaticParams for each of these pages.
Here's an example of how you might use generateStaticParams in your root layout:
// app/[lang]/layout.js
export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}
export default function Root({ children, params }) {
return (
<html lang={params.lang}>
<body>{children}</body>
</html>
)
}
In this example, generateStaticParams is used to generate static routes for the given set of locales 'en-US' and 'de' (source (https://nextjs.org/docs/app/building-your-application/routing/internationalization)).
If you have multiple dynamic segments in a route that use generateStaticParams, the child generateStaticParams function is executed once for each set of params the parent generates (source (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)).
However, it's important to note that during revalidation (ISR), generateStaticParams will not be called again. Also, generateStaticParams replaces the getStaticPaths function in the Pages Router (source (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)).
For caching, paths provided by generateStaticParams are cached in the Full Route Cache at build time. At request time, Next.js will also cache paths that weren't known at build time the first time they're visited (source (https://nextjs.org/docs/app/building-your-application/caching)).
If you're migrating from the pages directory, you might find the migration guide (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#dynamic-paths-getstaticpaths) useful.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ornate ingot
How would ISR work when output is set to export?
@abstract nest How would ISR work when output is set to export?
abstract nestBOT
Let me check the knowledge base for you. One moment! :books:
Incremental Static Regeneration (ISR) is a feature in Next.js that allows you to create or update static pages after you've built your site, without needing to rebuild the entire site. However, it's important to note that ISR does not integrate with output: 'export' as it does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use output: 'export' are fully supported (source (https://nextjs.org/docs/pages/building-your-application/routing/internationalization)).
On the other hand, starting from Next.js 13.3, the Next.js App Router now supports fully static exports. You can start as a static site or Single-Page Application (SPA), then later optionally upgrade to use Next.js features that require a server. When running next build, Next.js generates an HTML file per route. By breaking a strict SPA into individual HTML files, Next.js can avoid loading unnecessary JavaScript code on the client-side, reducing the bundle size and enabling faster page loads. Here's how you can set output to export in your next.config.js:
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
output: 'export',
};
module.exports = nextConfig;
(source (https://nextjs.org/blog/next-13-3))
So, while ISR and output: 'export' are both powerful features of Next.js, they are used in different scenarios and are not compatible with each other.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ornate ingot
@abstract nest Does generateStaticPaths creates a page for each object in the returned list?
Can I have mutliple keys in that object?
abstract nestBOT
Let me check the knowledge base for you. One moment! :books:
Yes, the generateStaticParams function in Next.js creates a page for each object in the returned list. Each object in the list represents the parameters for a specific route. For example, if you return the following from generateStaticParams:
return [
{ category: 'a', product: '1' },
{ category: 'b', product: '2' },
{ category: 'c', product: '3' },
]
Next.js will statically generate the pages /products/a/1, /products/b/2, and /products/c/3 during the build process (source (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)).
And yes, you can have multiple keys in each object. The keys in each object should correspond to the dynamic segments in your route. For example, if your page is located at pages/posts/**postId]/[commentId], then the params object should contain postId and commentId ([source** (https://nextjs.org/docs/pages/api-reference/functions/get-static-paths)).
Here's an example:
return [
{ postId: '1', commentId: 'a' },
{ postId: '2', commentId: 'b' },
{ postId: '3', commentId: 'c' },
]
In this case, Next.js will generate the pages /posts/1/a, /posts/2/b, and /posts/3/c.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ornate ingot
@abstract nest What if I want to pass different data on each segment?
eg I want to pass [{category: 'a', data: dataX }, {category: 'b', data: dataY }]
And generate /category/a and /category/b
abstract nestBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, the generateStaticParams function is used to generate the parameters for dynamic routes. The keys in the returned objects should correspond to the dynamic segments in your route. However, the data you want to pass to the page should not be included in the params object returned by generateStaticParams. Instead, it should be fetched in getStaticProps based on the params.
Here's an example:
// pages/category/[id].js
export async function generateStaticParams() {
return [
{ id: 'a' },
{ id: 'b' },
]
}
export async function getStaticProps({ params }) {
let data;
// Fetch the data based on params.id
if (params.id === 'a') {
data = dataX;
} else if (params.id === 'b') {
data = dataY;
}
return {
props: {
data,
},
}
}
export default function Page({ data }) {
// Render the page using data
}
In this example, generateStaticParams returns an array of objects, each with an id property. This id corresponds to the dynamic segment in the route ([id]). Then, in getStaticProps, we fetch the data based on the id and return it in the props object. The Page component then receives this data as a prop and can use it to render the page.