As rotas dinâmicas são páginas que permitem usar parâmetros personalizados em uma URL. Eles são especialmente benéficos ao criar páginas para conteúdo dinâmico.
Para um blog, você pode usar uma rota dinâmica para criar URLs com base nos títulos das postagens do blog. Essa abordagem é melhor do que criar um componente de página para cada postagem.
Você pode criar rotas dinâmicas em Next.js definindo duas funções: getStaticProps e getStaticPaths.
Criando uma Rota Dinâmica em Next.js
Para criar uma rota dinâmica em Next.js, adicione colchetes a uma página. Por exemplo, [params].js, [slug].js ou [id].js.
Para um blog, você pode usar um slug para a rota dinâmica. Então, se um post tivesse o slug dynamic-routes-nextjs, o URL resultante seria https://example.com/dynamic-routes-nextjs.
Na pasta pages, crie um novo arquivo chamado [slug].js e crie o componente Post que leva os dados do post como prop.
const Post = ({ postData }) => {
retornar <div>{/* contente */}</div>;
};
Existem diferentes maneiras de passar os dados do post para o Post. O método escolhido depende de como você deseja renderizar a página. Para buscar os dados durante o tempo de compilação, use getStaticProps() e, para buscá-los a pedido, use getServerSideProps().
Usando getStaticProps para buscar dados de postagem
As postagens do blog não mudam com tanta frequência e buscá-las no momento da compilação é suficiente. Portanto, modifique o componente Post para incluir getStaticProps().
importar { getSinglePost } de "../../utils/posts";const Postagem = ({ conteúdo }) => {
retornar <div>{/* contente */}</div>;
};
exportarconst getStaticProps = assíncrono ({ parâmetros }) => {
const postar = aguardam getSinglePost (params.slug);
retornar {
adereços: {... post },
};
};
A função getStaticProps gera os dados do post renderizados na página. Ele usa o slug dos caminhos gerados pela função getStaticPaths.
Usando getStaticPaths para buscar caminhos
A função getStaticPaths() retorna os caminhos para as páginas que devem ser pré-renderizadas. Altere o componente Post para incluí-lo:
exportarconst getStaticPaths = assíncrono () => {
const paths = getAllPosts().map(({ slug }) => ({ parâmetros: { slug } }));
retornar {
caminhos,
cair pra trás: falso,
};
};
Essa implementação de getStaticPaths busca todas as postagens que devem ser renderizadas e retorna os slugs como parâmetros.
Ao todo, [slug].js ficará assim:
importar { getAllPosts, getSinglePost } de "../../utils/posts";const Postagem = ({ conteúdo }) => {
retornar <div>{contente}</div>;
};exportarconst getStaticPaths = assíncrono () => {
const paths = getAllPosts().map(({ slug }) => ({ parâmetros: { slug } }));
retornar {
caminhos,
cair pra trás: falso,
};
};exportarconst getStaticProps = assíncrono ({ parâmetros }) => {
const postar = aguardam getSinglePost (params.slug);retornar {
adereços: {... post },
};
};
exportarpadrão Publicar;
Você deve usar getStaticProps() e getStaticPaths() juntos para criar uma rota dinâmica. A função getStaticPaths() deve gerar as rotas dinâmicas, enquanto getStaticProps() busca os dados renderizados em cada rota.
Criando rotas dinâmicas aninhadas em Next.js
Para criar uma rota aninhada no Next.js, você precisa criar uma nova pasta dentro da pasta pages e salvar a rota dinâmica dentro dela.
Por exemplo, para criar /pages/posts/dynamic-routes-nextjs, salve [slug].js dentro /pages/posts.
Acessando parâmetros de URL de rotas dinâmicas
Depois de criar a rota, você pode recuperar o Parâmetro de URL da rota dinâmica usando o useRouter() Gancho de reação.
Para pages/[slug].js, obtenha o slug assim:
importar { useRouter } de 'próximo/roteador'const Postagem = () => {
const roteador = useRouter()
const { slug } = roteador.consulta
retornar <p>Postagem: {slug}</p>
}
exportarpadrão Publicar
Isso exibirá o slug da postagem.
Roteamento dinâmico com getServerSideProps
Usando Next.js você pode buscar dados em tempo de construção e criar rotas dinâmicas. Você pode usar esse conhecimento para pré-renderizar páginas de uma lista de itens.
Se você deseja buscar dados em cada solicitação, use getServerSideProps em vez de getStaticProps. Observe que essa abordagem é mais lenta; você só deve usá-lo ao consumir dados que mudam regularmente.
