Challenges

Creating a Markdown Blog

Fix getStaticPaths Function

Now we need to update our getStaticPaths function so that Next.js will build our Markdown files properly.

To do that, replace the getStaticPaths function in pages/post/[slug].js with the following:

export async function getStaticPaths () {
  const markdownFiles = await fsPromises.readdir('data')
  
  const paths = markdownFiles.map(filename => {
    const slug = filename.replace(/.md$/, '')
    return {
      params: { slug }
    }
  })

  return {
    paths,
    fallback: false
  }
}

Now you can directly visit the following link, and it should work fine:

http://localhost:3009/post/2020-July-02-Using-Github-as-a-CMS


It's time for a question again.

Add the following code inside the Post page:

fsPromises.readdir('data')

So, it'll look like this:

export default function Post ({ post }) {
  fsPromises.readdir('data')
  
  return (
    <Theme>
      <div className='post'>
        <div className='time'>Published {ms(Date.now() - post.createdAt, { long: true })} ago</div>
        <h1>{post.title}</h1>
        <div className='content'>
          <Markdown>{post.content}</Markdown>
        </div>
      </div>
    </Theme>
  )
}
Q: What will be the outcome?
authenticating...

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: