← Pagina Inicial

Rotas dinâmicas

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

Implementando getStaticPaths

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!

← Pagina Inicial