What is the equivalent of getStaticPaths in Apps? I want to set up specific pages to be rendered but to be revalidated only after a specific time.
#Equivalent of getStaticPaths in Apps
graceful nest
sweet craterBOT
Hi @graceful nest. 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, the getStaticProps function is used for data fetching and it allows you to add a revalidate field to automatically regenerate a page after a certain amount of time. This is applicable in both the pages and app directories.
Here's an example of how you can use getStaticProps in the pages directory:
// `pages` directory
export async function getStaticProps() {
const res = await fetch(`<https://.../posts`>)
const posts = await res.json()
return {
props: { posts },
revalidate: 60, // The page will be regenerated after 60 seconds
}
}
export default function Index({ posts }) {
return (
<Layout>
<PostList posts={posts} />
</Layout>
)
}
And here's how you can use it in the app directory:
// `app` directory
async function getPosts() {
const res = await fetch(`<https://.../posts`,> { next: { revalidate: 60 } })
const data = await res.json()
return data.posts
}
export default async function PostList() {
const posts = await getPosts()
return posts.map((post) => <div>{post.name}</div>)
}
In both examples, the revalidate field is set to 60, which means the page will be regenerated every 60 seconds.
Please note that the getStaticPaths function is not directly available in the app directory. It's specifically used in the pages directory for dynamic routing.
For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
graceful nest
@sweet crater What if the data comes from an external function and not from a fetch call? Where do I say the revalidate time?
sweet craterBOT
Let me check the knowledge base for you. One moment! :books:
If the data comes from an external function and not directly from a fetch call, you can still set the revalidation time. You can do this by setting the revalidate option in the external function itself. Here's an example:
// utils/get-item.ts
import { cache } from 'react'
export const revalidate = 3600 // revalidate the data at most every hour
export const getItem = cache(async (id: string) => {
const item = await db.item.findUnique({ id })
return item
})
In this example, the revalidate option is set to 3600, meaning the data will be cached and revalidated at most every hour. The getItem function is then used to fetch data from the database.
Then, you can use this function in your pages:
// app/item/layout.tsx
import { getItem } from '@/utils/get-item'
export default async function Layout({
params: { id },
}: {
params: { id: string }
}) {
const item = await getItem(id)
// ...
}
// app/item/[id]/page.tsx
import { getItem } from '@/utils/get-item'
export default async function Page({
params: { id },
}: {
params: { id: string }
}) {
const item = await getItem(id)
// ...
}
In these examples, the getItem function is called with an id parameter to fetch a specific item from the database. The data for this item will be revalidated at most every hour.