← Pagina Inicial

Rotas dinâmicas

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

Implementando getStaticProps

Precisamos buscar os dados necessários para renderizar a postagem com o id fornecido.

Para fazer isso, abra lib/posts.js novamente e adicione esta função. Isso retornará os dados da postagem com base no id:

export 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)

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

Por fim, em pages/posts/[id].js, substitua esta linha:

import { getAllPostIds } from '../../lib/post

…with this:

import { getAllPostIds, getPostData } from '../../lib/posts'

And create getStaticProps which calls this function:

export async function getStaticProps({ params }) {
  const postData = getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

Atualize o componente Post para usar postData:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  )
}

É isso aí! Tente visitar estas páginas:

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

Você poderá ver os dados do blog para cada página:

Ótimo! Geramos páginas dinâmicas com sucesso.

Algo errado?

Se você encontrar um erro, verifique se seus arquivos têm o código correto:

• pages/posts/[id].js deve ficar assim.

• lib/posts.js deve ficar assim.

• (Se ainda não estiver funcionando) O código restante deve ficar assim.

Se você ainda está preso, não hesite em perguntar à comunidade nos debates do GitHub. Seria útil se você pudesse enviar seu código ao GitHub e vinculá-lo para que outros possam dar uma olhada.

Sumário

Novamente, aqui está o resumo gráfico do que fizemos:

Mas ainda não exibimos o conteúdo do markdown do blog. Então, vamos fazer isso a seguir.

← Pagina Inicial