← Pagina Inicial

Rotas dinâmicas

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

Detalhes das rotas dinâmicas

Você pode obter informações detalhadas sobre rotas dinâmicas em nossa documentação:

• Busca de dados

• Rotas dinâmicas

Mas aqui estão algumas informações essenciais que você deve saber sobre rotas dinâmicas.

Buscar API externa ou banco de dados de consulta

Como getStaticProps, getStaticPaths pode buscar dados de qualquer fonte de dados. Em nosso exemplo, getAllPostIds (que é usado por getStaticPaths) pode buscar de um terminal de API externo:

export async function getAllPostIds() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  const posts = await res.json()
  return posts.map(post => {
    return {
      params: {
        id: post.id
      }
    }
  })
}

Desenvolvimento vs Produção

• No desenvolvimento (npm run dev ou yarn dev), getStaticPaths é executado em todas as solicitações.
• Na produção, o getStaticPaths é executado no tempo de construção.

Fallback

Lembre-se de que retornamos fallback: false de getStaticPaths. O que isto significa?

Se o fallback for false, quaisquer caminhos não retornados por getStaticPaths resultarão em uma página 404.

Se o fallback for true, o comportamento de getStaticProps será alterado:

• Os caminhos retornados de getStaticPaths serão renderizados em HTML no momento da construção.

• Os caminhos que não foram gerados no tempo de construção não resultarão em uma página 404. Em vez disso, o Next.js exibirá uma versão de "fallback" da página na primeira solicitação para esse caminho.

• Em segundo plano, o Next.js irá gerar estaticamente o caminho solicitado. Solicitações subsequentes para o mesmo caminho servirão a página gerada, assim como outras páginas pré-renderizadas no momento da criação.

Isso está além do escopo de nossas lições, mas você pode aprender mais sobre fallback: true em nossa documentação.

Rotas abrangentes

As rotas dinâmicas podem ser estendidas para pegar todos os caminhos adicionando três pontos (...) dentro dos colchetes. Por exemplo:

• pages/posts/[...id].js corresponde a /posts/a, mas também /posts/a/b, /posts/a/b/c etc.

Se você fizer isso, em getStaticPaths, deverá retornar um array como o valor da chave id da seguinte maneira:

return [
  {
    params: {
      // Statically Generates /posts/a/b/c
      id: ['a', 'b', 'c']
    }
  }
  //...
]

E params.id será um array em getStaticProps:

export async function getStaticProps({ params }) {
  // params.id will be like ['a', 'b', 'c']
}

Dê uma olhada na documentação de Rotas dinâmicas para saber mais.

Roteador

Se você deseja acessar o roteador Next.js., faça isso importando o gancho useRouter do next/router. Dê uma olhada na documentação do roteador para saber mais.

404 Pages

Para criar uma página 404 personalizada, crie pages/404.js. Este arquivo é gerado estaticamente no momento da construção.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

Consulte a documentação das Páginas de erro para saber mais.

Mais exemplos

Criamos vários exemplos para ilustrar getStaticProps e getStaticPaths - consulte seu código-fonte para saber mais:

Blog Starter usando arquivos de marcação (Demo) Exemplo do DatoCMS (Demo) Exemplo de TakeShape (Demo) Exemplo de sanity (Demo)

É isso aí!

Na próxima lição, falaremos sobre o recurso Rotas da API para Next.js.

← Pagina Inicial