Com crear rutes dinàmiques a Next.js

Les rutes dinàmiques són pàgines que us permeten utilitzar paràmetres personalitzats en un URL. Són especialment útils quan es creen pàgines per a contingut dinàmic.

Per a un bloc, podeu utilitzar una ruta dinàmica per crear URL basats en els títols de les entrades del bloc. Aquest enfocament és millor que crear un component de pàgina per a cada publicació.

---

---

Podeu crear rutes dinàmiques a Next.js definint dues funcions: getStaticProps i getStaticPaths.

MAKEUSEO VÍDEO DEL DIA

Creació d'una ruta dinàmica a Next.js

Per crear una ruta dinàmica a Next.js, afegiu claudàtors a una pàgina. Per exemple, [params].js, [slug].js o [id].js.

Per a un bloc, podeu utilitzar un llimac per a la ruta dinàmica. Per tant, si una publicació tingués el llimac dynamic-routes-nextjs , l'URL resultant seria https://example.com/dynamic-routes-nextjs.

A la carpeta de pàgines, creeu un fitxer nou anomenat [slug].js i creeu el component Publicació que pren les dades de publicació com a complement.

const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
}; 

Hi ha diferents maneres de passar les dades de la publicació a la publicació. El mètode que trieu depèn de com vulgueu representar la pàgina. Per obtenir les dades durant el temps de compilació, utilitzeu getStaticProps() i per obtenir-les a petició, utilitzeu getServerSideProps().

---

---

Utilitzant getStaticProps per obtenir dades de publicació

Les publicacions del blog no canvien amb tanta freqüència, i n'hi ha prou amb buscar-les en temps de creació. Per tant, modifiqueu el component Post per incloure getStaticProps().

com publicar un gif a instagram

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 }, 
    }; 
  }; 

La funció getStaticProps genera les dades de publicació representades a la pàgina. Utilitza el slug dels camins generats per la funció getStaticPaths.

---

---

Utilitzant getStaticPaths per obtenir camins

La funció getStaticPaths() retorna els camins de les pàgines que s'han de representar prèviament. Canvieu el component Publicació per incloure'l:

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 

Aquesta implementació de getStaticPaths recupera totes les publicacions que s'han de representar i retorna els slugs com a paràmetres.

En conjunt, [slug].js tindrà aquest aspecte:

import { 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; 

Heu d'utilitzar getStaticProps() i getStaticPaths() junts per crear una ruta dinàmica. La funció getStaticPaths() hauria de generar les rutes dinàmiques, mentre que getStaticProps() obté les dades representades a cada ruta.

Creació de rutes dinàmiques niuades a Next.js

Per crear una ruta imbricada a Next.js, heu de crear una nova carpeta dins de la carpeta de pàgines i desar-hi la ruta dinàmica.

Per exemple, per crear /pages/posts/dynamic-routes-nextjs, deseu [slug].js dins /pages/publicacions.

Accés als paràmetres d'URL des de les rutes dinàmiques

Després de crear la ruta, podeu recuperar el Paràmetre d'URL de la ruta dinàmica utilitzant useRouter() Ganxo de reacció .

Per a les pàgines/[slug].js, obteniu el slug així:

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post 

Això mostrarà el slug de la publicació.

Enrutament dinàmic amb getServerSideProps

Amb Next.js podeu obtenir dades en temps de creació i crear rutes dinàmiques. Podeu utilitzar aquest coneixement per renderitzar prèviament les pàgines d'una llista d'elements.

Si voleu obtenir dades de cada sol·licitud, utilitzeu getServerSideProps en lloc de getStaticProps. Tingueu en compte que aquest enfocament és més lent; només l'heu d'utilitzar quan consumiu dades que canvien regularment.