1

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

ozgrozer
  • 1,824
  • 1
  • 23
  • 35

0 Answers0