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:
Você poderá ver os dados do blog para cada página:
Ótimo! Geramos páginas dinâmicas com sucesso.
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.
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.