← Pagina Inicial

Rotas dinâmicas

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9

Renderizando o Markdown

Para renderizar o conteúdo da markdown, usaremos a biblioteca de remark. Primeiro, vamos instalá-lo:

npm install remark remark-html

Importe-os em lib/posts.js:

import remark from 'remark'
import html from 'remark-html'

E atualize o getPostData() da seguinte maneira para usar o remark.

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents)

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content)
  const contentHtml = processedContent.toString()

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data
  }
}

Importante: adicionamos a palavra-chave async ao getPostData porque precisamos usar o await para o remark.

Isso significa que precisamos atualizar o getStaticProps em pages/posts/[id].js para usar o await ao chamar getPostData:

export async function getStaticProps({ params }) {
  // Add the "await" keyword like this:
  const postData = await getPostData(params.id)
  // ...
}

Por fim, atualize o componente Post para renderizar contentHtml usando DangerouslySetInnerHTML:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  )
}

Tente visitar estas páginas novamente:

• http://localhost:3000/posts/ssg-ssr

• http://localhost:3000/posts/pre-rendering

Agora você deve ver o conteúdo do blog:

Estamos quase terminando! Vamos polir cada página a seguir.

← Pagina Inicial