Las rutas din\u00e1micas son p\u00e1ginas que le permiten usar par\u00e1metros personalizados en una URL. Son especialmente beneficiosos cuando se crean p\u00e1ginas para contenido din\u00e1mico.<\/p>\n
Para un blog, puede usar una ruta din\u00e1mica para crear direcciones URL basadas en los t\u00edtulos de las publicaciones del blog. Este enfoque es mejor que crear un componente de p\u00e1gina para cada publicaci\u00f3n.<\/p>\n
Puede crear rutas din\u00e1micas en Next.js definiendo dos funciones: getStaticProps y getStaticPaths.<\/p>\n
Para crear una ruta din\u00e1mica en Next.js, agregue corchetes a una p\u00e1gina. Por ejemplo, [params].js, [slug].js o [id].js.<\/p>\n
Para un blog, podr\u00eda usar un slug para la ruta din\u00e1mica. Entonces, si una publicaci\u00f3n tuviera el slug dynamic-routes-nextjs<\/strong>, la URL resultante ser\u00eda https:\/\/example.com\/dynamic-routes-nextjs<\/a>.<\/p>\n En la carpeta de p\u00e1ginas, cree un nuevo archivo llamado [slug].js y cree el componente Publicar que toma los datos de la publicaci\u00f3n como apoyo.<\/p>\n Hay diferentes formas de pasar los datos de la publicaci\u00f3n a la publicaci\u00f3n. El m\u00e9todo que elija depende de c\u00f3mo desee representar la p\u00e1gina. Para obtener los datos durante el tiempo de compilaci\u00f3n, use getStaticProps() y para obtenerlos a pedido, use getServerSideProps().<\/p>\n Las publicaciones de blog no cambian con tanta frecuencia y es suficiente obtenerlas en el momento de la compilaci\u00f3n. Por lo tanto, modifique el componente Publicar para incluir getStaticProps().<\/p>\n La funci\u00f3n getStaticProps genera los datos de publicaci\u00f3n representados en la p\u00e1gina. Utiliza el slug de las rutas generadas por la funci\u00f3n getStaticPaths.<\/p>\n La funci\u00f3n getStaticPaths() devuelve las rutas de las p\u00e1ginas que deben renderizarse previamente. Cambie el componente Publicar para incluirlo:<\/p>\n Esta implementaci\u00f3n de getStaticPaths obtiene todas las publicaciones que deben procesarse y devuelve los slugs como par\u00e1metros.<\/p>\n En conjunto, [slug].js se ver\u00e1 as\u00ed:<\/p>\n Debe usar getStaticProps() y getStaticPaths() juntos para crear una ruta din\u00e1mica. La funci\u00f3n getStaticPaths() deber\u00eda generar las rutas din\u00e1micas, mientras que getStaticProps() obtiene los datos representados en cada ruta.<\/p>\n Para crear una ruta anidada en Next.js, debe crear una nueva carpeta dentro de la carpeta de p\u00e1ginas y guardar la ruta din\u00e1mica dentro de ella.<\/p>\n Por ejemplo, para crear \/pages\/posts\/dynamic-routes-nextjs, guarde [slug].js dentro de \/pages\/posts.<\/strong><\/p>\n Despu\u00e9s de crear la ruta, puede recuperar el par\u00e1metro<\/a> de URL de la ruta din\u00e1mica usando el gancho useRouter() React<\/a>.<\/p>\n Para las p\u00e1ginas\/[slug].js, obtenga el slug as\u00ed:<\/p>\n Esto mostrar\u00e1 el slug de la publicaci\u00f3n.<\/p>\n Con Next.js puede obtener datos en el momento de la compilaci\u00f3n y crear rutas din\u00e1micas. Puede usar este conocimiento para renderizar previamente p\u00e1ginas de una lista de elementos.<\/p>\n Si desea obtener datos en cada solicitud, use getServerSideProps en lugar de getStaticProps. Tenga en cuenta que este enfoque es m\u00e1s lento; solo debe usarlo cuando consuma datos que cambian regularmente.<\/p>\nconst Post = ({ postData }) => { return <div>{\/* content *\/}<\/div>;};<\/code><\/pre>\nUso de getStaticProps para obtener datos de publicaci\u00f3n<\/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>\nUso de getStaticPaths para obtener rutas<\/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>\nCreaci\u00f3n de rutas din\u00e1micas anidadas en Next.js<\/h2>\n
Acceso a par\u00e1metros de URL desde rutas din\u00e1micas<\/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>\nEnrutamiento din\u00e1mico con getServerSideProps<\/h2>\n