I'm using file-based data fetching to show blog posts. I know we can revalidate the cache with revalidate: seconds
property but the problem is once a post written it usually won't change. Instead of revalidating the cache with seconds, is there any way to revalidate manually? So I'd like to have a system to revalidate the cache when a file in posts folder changes.
import path from 'path'
import { promises as fs } from 'fs'
function Blog ({ posts }) {
return (
<ul>
{posts.map((post, key) => (
<li key={key}>
<h3>{post.filename}</h3>
<p>{post.fileContent}</p>
</li>
))}
</ul>
)
}
export async function getStaticProps () {
const postsDirectory = path.join(process.cwd(), 'posts')
const filenames = await fs.readdir(postsDirectory)
const posts = filenames.map(async (filename) => {
const filePath = path.join(postsDirectory, filename)
const fileContent = await fs.readFile(filePath, 'utf8')
return { filename, fileContent }
})
return {
props: {
posts: await Promise.all(posts)
},
revalidate: 60
}
}
export default Blog