Primeiro, vamos configurar os arquivos:
Crie um arquivo chamado [id].js
dentro do diretório pages/posts
.
Além disso, remova first-post.js
dentro do diretório de pages/posts
- não usaremos mais isso.
Em seguida, adicione isso em pages/ posts/[id].js
. Vamos preencher ... mais tarde.
import Layout from '../../components/layout'
export default function Post() {
return <Layout>...</Layout>
}
Em seguida, abra lib/posts.js
e adicione esta função. Isso retornará a lista de nomes de arquivos (excluindo .md
) no diretório posts
:
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory)
// Returns an array that looks like this:
// [
// {
// params: {
// id: 'ssg-ssr'
// }
// },
// {
// params: {
// id: 'pre-rendering'
// }
// }
// ]
return fileNames.map(fileName => {
return {
params: {
id: fileName.replace(/\.md$/, '')
}
}
})
}
Importante: A lista retornada não é apenas um array de seqüências de caracteres - deve ser um array de objetos que se parecem com o comentário acima. Cada objeto deve ter a chave params
e conter um objeto com a chave id
(porque estamos usando [id]
no nome do arquivo). Caso contrário, getStaticPaths
falhará.
Por fim, em pages/posts/[id].js
, importaremos esta função:
import { getAllPostIds } from '../../lib/posts'
E crie getStaticPaths
que chama esta função:
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
O array de valores possíveis para id
deve ser o valor da chave de paths
do objeto retornado. É exatamente isso que getAllPostIds()
retorna.
Ignorar fallback: false
por enquanto - explicaremos isso mais tarde.
Estamos quase terminando, mas ainda precisamos implementar getStaticProps
. Vamos fazer isso na próxima página!