As rotas din\u00e2micas s\u00e3o p\u00e1ginas que permitem usar par\u00e2metros personalizados em uma URL. Eles s\u00e3o especialmente ben\u00e9ficos ao criar p\u00e1ginas para conte\u00fado din\u00e2mico.<\/p>\n
Para um blog, voc\u00ea pode usar uma rota din\u00e2mica para criar URLs com base nos t\u00edtulos das postagens do blog. Essa abordagem \u00e9 melhor do que criar um componente de p\u00e1gina para cada postagem.<\/p>\n
Voc\u00ea pode criar rotas din\u00e2micas em Next.js definindo duas fun\u00e7\u00f5es: getStaticProps e getStaticPaths.<\/p>\n
Para criar uma rota din\u00e2mica em Next.js, adicione colchetes a uma p\u00e1gina. Por exemplo, [params].js, [slug].js ou [id].js.<\/p>\n
Para um blog, voc\u00ea pode usar um slug para a rota din\u00e2mica. Portanto, se uma postagem tivesse o slug dynamic-routes-nextjs<\/strong>, a URL resultante seria https:\/\/example.com\/dynamic-routes-nextjs<\/a>.<\/p>\n Na pasta pages, crie um novo arquivo chamado [slug].js e crie o componente Post que recebe os dados do post como prop.<\/p>\n Existem diferentes maneiras de passar os dados da postagem para a postagem. O m\u00e9todo escolhido depende de como voc\u00ea deseja renderizar a p\u00e1gina. Para buscar os dados durante o tempo de constru\u00e7\u00e3o, use getStaticProps() e para busc\u00e1-los mediante solicita\u00e7\u00e3o, use getServerSideProps().<\/p>\n As postagens do blog n\u00e3o mudam com tanta frequ\u00eancia, e busc\u00e1-las no momento da compila\u00e7\u00e3o \u00e9 suficiente. Portanto, modifique o componente Post para incluir getStaticProps().<\/p>\n A fun\u00e7\u00e3o getStaticProps gera os dados de postagem renderizados na p\u00e1gina. Ele usa o slug dos caminhos gerados pela fun\u00e7\u00e3o getStaticPaths.<\/p>\n A fun\u00e7\u00e3o getStaticPaths() retorna os caminhos para as p\u00e1ginas que devem ser pr\u00e9-renderizadas. Altere o componente Post para inclu\u00ed-lo:<\/p>\n Essa implementa\u00e7\u00e3o de getStaticPaths busca todos os posts que devem ser renderizados e retorna os slugs como par\u00e2metros.<\/p>\n Ao todo, [slug].js ficar\u00e1 assim:<\/p>\n Voc\u00ea deve usar getStaticProps() e getStaticPaths() juntos para criar uma rota din\u00e2mica. A fun\u00e7\u00e3o getStaticPaths() deve gerar as rotas din\u00e2micas, enquanto getStaticProps() busca os dados renderizados em cada rota.<\/p>\n Para criar uma rota aninhada em Next.js, voc\u00ea precisa criar uma nova pasta dentro da pasta pages e salvar a rota din\u00e2mica dentro dela.<\/p>\n Por exemplo, para criar \/pages\/posts\/dynamic-routes-nextjs, salve [slug].js dentro de \/pages\/posts.<\/strong><\/p>\n Depois de criar a rota, voc\u00ea pode recuperar o par\u00e2metro<\/a> de URL da rota din\u00e2mica usando o hook useRouter() React<\/a>.<\/p>\n Para o pages\/[slug].js, pegue o slug assim:<\/p>\n Isso exibir\u00e1 o slug do post.<\/p>\n Usando Next.js, voc\u00ea pode buscar dados em tempo de compila\u00e7\u00e3o e criar rotas din\u00e2micas. Voc\u00ea pode usar esse conhecimento para pr\u00e9-renderizar p\u00e1ginas de uma lista de itens.<\/p>\n Se voc\u00ea deseja buscar dados em cada solicita\u00e7\u00e3o, use getServerSideProps em vez de getStaticProps. Observe que essa abordagem \u00e9 mais lenta; voc\u00ea s\u00f3 deve us\u00e1-lo ao consumir dados que mudam regularmente.<\/p>\nconst Post = ({ postData }) => { return <div>{\/* content *\/}<\/div>;};<\/code><\/pre>\nUsando getStaticProps para buscar dados de postagem<\/h2>\n
import { getSinglePost } from \"..\/..\/utils\/posts\"; const Post = ({ content }) => { return <div>{\/* content *\/}<\/div>;}; export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.slug); return { props: { ...post }, }; };<\/code><\/pre>\nUsando getStaticPaths para buscar caminhos<\/h2>\n
export const getStaticPaths = async() => { const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); return { paths, fallback: false, };};<\/code><\/pre>\nimport { getAllPosts, getSinglePost } from \"..\/..\/utils\/posts\"; const Post = ({ content }) => { return <div>{content}<\/div>;}; export const getStaticPaths = async() => { const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); return { paths, fallback: false, };}; export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.slug); return { props: { ...post }, };}; export default Post;<\/code><\/pre>\nComo criar rotas din\u00e2micas aninhadas no Next.js<\/h2>\n
Acessando par\u00e2metros de URL de rotas din\u00e2micas<\/h2>\n
import { useRouter } from 'next\/router' const Post = () => { const router = useRouter() const { slug } = router.query return <p>Post: {slug}<\/p>} export default Post<\/code><\/pre>\nRoteamento din\u00e2mico com getServerSideProps<\/h2>\n