3.md

← Pagina Inicial

Rotas dinâmicas

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

O caminho da página depende de dados externos

Na lição anterior, abordamos o caso em que o conteúdo da página depende de dados externos. Usamos getStaticProps para buscar os dados necessários para renderizar a página de índice.

Nesta lição, falaremos sobre o caso em que cada caminho da página depende de dados externos. O Next.js permite gerar estaticamente páginas com caminhos que dependem de dados externos. Isso habilita URLs dinâmicos no Next.js.

Como gerar estaticamente páginas com rotas dinâmicas

No nosso caso, queremos criar páginas dinâmicas para postagens do blog:

Queremos que cada postagem tenha o caminho /posts/<id>, onde <id> é o nome do arquivo de remarcação no diretório de posts de nível superior. Como temos ssg-ssr.md e pre-rendering.md, gostaríamos que os caminhos fossem /posts/ssg-ssr e /posts/pre-rendering.

Visão geral das etapas

Podemos fazer isso executando as seguintes etapas. Você ainda não precisa fazer essas alterações. Faremos tudo na próxima página.

Primeiro, criaremos uma página chamada [id].js em pages/posts. As páginas que começam com [ e terminam com ] são páginas dinâmicas no Next.js.

Em pages/posts/[id].js, escreveremos um código que renderizará uma página de postagem, assim como outras páginas que criamos.

import Layout from '../../components/layout'

export default function Post() {
  return <Layout>...</Layout>
}

Agora, aqui está o que há de novo: exportaremos uma função assíncrona chamada getStaticPaths desta página. Nesta função, precisamos retornar uma lista de possíveis valores para id.

import Layout from '../../components/layout'

export default function Post() {
  return <Layout>...</Layout>
}

export async function getStaticPaths() {
  // Return a list of possible value for id
}

Por fim, precisamos implementar getStaticProps novamente - desta vez, para buscar os dados necessários para a postagem do blog com um determinado id. getStaticProps recebe parâmetros, que contém o id.

import Layout from '../../components/layout'

export default function Post() {
  return <Layout>...</Layout>
}

export async function getStaticPaths() {
  // Return a list of possible value for id
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

Aqui está um resumo gráfico do que acabamos de falar:

Vamos tentar isso na próxima página!

← Pagina Inicial