astral stratus
In my NextJs app, I want to export the site to be able to use static hosting.
I currently have generateStaticParams() on the layout to grab slugs from a firebase collection.
When new slugs are created, the page is obviously not available because it wasnt generated on build. So how can I achieve having dynamic routes with dynamic data when exporting
muted daggerBOT
Hi @astral stratus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, you can use the getStaticPaths function in combination with dynamic routes to pre-render pages at build time based on data from your Firebase collection. This function allows you to specify which paths you want to pre-render. However, this approach has a limitation: if new slugs are created after the build, the corresponding pages won't be available because they weren't generated at build time.
Here's an example of how you can use getStaticPaths:
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get posts
const res = await fetch('<https://.../posts'>)
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}
(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation))
However, for your use case where new slugs can be created after the build, static export (output: 'export') might not be the best option. Static export does not support features that require dynamic logic that cannot be computed during the build process, such as dynamic routes without generateStaticParams().
(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/deploying/static-exports))
Instead, you might want to consider using a server-side rendering (SSR) or Incremental Static Regeneration (ISR) approach, which can handle dynamic data that changes after build time. However, please note that ISR is not supported in static export mode.