Hi @stone pollen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Prerendering dynamic routes
pliant locustBOT
Yes, it is possible to pre-render dynamic routes as static content in Next.js. This can be achieved using the getStaticPaths function in combination with getStaticProps.
The getStaticPaths function allows you to specify which paths you want to pre-render at build time. This function gets called at build time and lets you specify which paths you want to pre-render. Here's an example:
// 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 }
}
In the getStaticPaths function, you fetch the data from your database and return an array of objects, each with a params key that corresponds to the dynamic segments of your path.
Then, in getStaticProps, you fetch the data for each page using the parameters obtained from getStaticPaths. Here's an example:
export async function getStaticProps({ params }) {
// params contains the post `id`.
// Fetch necessary data for the blog post using params.id
}
In this function, you can fetch the data for each blog post based on the id and return it as props to your page.
This way, all your blog posts will be pre-rendered as static pages at build time. The data won't be fetched at request time, but rather at build time.
For more information, you can check the Next.js documentation on Dynamic Routes (https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) and getStaticPaths (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
stone pollen
I am using app router, not pages @pliant locust
pliant locustBOT
Let me check the knowledge base for you. One moment! :books:
In the App Router, the equivalent of getStaticPaths is generateStaticParams. This function behaves similarly to getStaticPaths, but has a simplified API for returning route parameters and can be used inside layouts. The return shape of generateStaticParams is an array of segments instead of an array of nested param objects or a string of resolved paths.
Here's an example of how you can use generateStaticParams:
// `app` directory
import PostLayout from '@/components/post-layout'
export async function generateStaticParams() {
const posts = await fetch('<https://.../posts'>).then((res) => res.json())
return posts.map((post) => ({ id: post.id }))
}
async function getPost(params) {
const res = await fetch(`<https://.../posts/${params.id}`>)
const post = await res.json()
return post
}
export default async function Post({ params }) {
const post = await getPost(params)
return <PostLayout post={post} />
}
In this example, generateStaticParams fetches the posts from your database and returns an array of objects, each with an id key that corresponds to the dynamic segments of your path. Then, in your default exported function (which is equivalent to the page component in the Pages Router), you fetch the data for each post using the parameters obtained from generateStaticParams.
For more information, you can check the Next.js documentation on generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params) and Dynamic Routes in App Router (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
stone pollen
No, this renders slug pages as SSG: "● (SSG) prerendered as static HTML (uses getStaticProps)" - which still makes calls to database when user requests the blog page.
I want them to be fully static: "○ (Static) prerendered as static content", like the "\blogs" page, which also fetches data from a database during build. @pliant locust
pliant locustBOT
Let me check the knowledge base for you. One moment! :books:
To render your dynamic routes as fully static content, you can use the generateStaticParams function to generate the paths at build time, and then use the generateStaticProps function to fetch the data for each path.
Here's an example:
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const posts = await fetch('<https://.../posts'>).then((res) => res.json())
return posts.map((post) => ({
slug: post.slug,
}))
}
export async function generateStaticProps({ params }) {
// Fetch necessary data for the blog post using params.slug
const post = await fetch(`<https://.../posts/${params.slug}`>).then((res) => res.json())
return { post }
}
export default function Post({ post }) {
// Render post...
}
In this example, generateStaticParams fetches the list of posts from your database and returns an array of objects, each with a slug key that corresponds to the dynamic segments of your path. Then, generateStaticProps fetches the data for each post using the slug obtained from generateStaticParams and returns it as props to your page.
This way, all your blog posts will be pre-rendered as fully static pages at build time. The data won't be fetched at request time, but rather at build time.
For more information, you can check the Next.js documentation on generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params#all-paths-at-build-time) and generateStaticProps (https://nextjs.org/docs/app/api-reference/functions/generate-static-props).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
stone pollen
generateStaticProps? I don't think that's a thing? @pliant locust
pliant locustBOT
Let me check the knowledge base for you. One moment! :books:
I apologize for the confusion. You're correct, there's no generateStaticProps in Next.js. That was my mistake.
In the App Router model, you would typically fetch the data for each page within the component itself, not in a separate generateStaticProps function. Here's an example:
// app/blog/[slug]/page.js
export async function generateStaticParams() {
const posts = await fetch('<https://.../posts'>).then((res) => res.json())
return posts.map((post) => ({
slug: post.slug,
}))
}
export default function Page({ params }) {
const { slug } = params
// Fetch necessary data for the blog post using slug
// Render post...
}
In this example, generateStaticParams fetches the list of posts from your database and returns an array of objects, each with a slug key that corresponds to the dynamic segments of your path. Then, within the Page component, you would fetch the data for each post using the slug obtained from params.
This way, all your blog posts will be pre-rendered as fully static pages at build time. The data won't be fetched at request time, but rather at build time.