Las rutas dinámicas son páginas que le permiten usar parámetros personalizados en una URL. Son especialmente beneficiosos cuando se crean páginas para contenido dinámico.
Para un blog, puede usar una ruta dinámica para crear direcciones URL basadas en los títulos de las publicaciones del blog. Este enfoque es mejor que crear un componente de página para cada publicación.
Puede crear rutas dinámicas en Next.js definiendo dos funciones: getStaticProps y getStaticPaths.
Creación de una ruta dinámica en Next.js
Para crear una ruta dinámica en Next.js, agregue corchetes a una página. Por ejemplo, [params].js, [slug].js o [id].js.
Para un blog, podría usar un slug para la ruta dinámica. Entonces, si una publicación tuviera la babosa rutas dinámicas-nextjs, la URL resultante sería https://example.com/dynamic-routes-nextjs.
En la carpeta de páginas, cree un nuevo archivo llamado [slug].js y cree el componente Publicar que toma los datos de la publicación como apoyo.
constante Publicación = ({ postData }) => {
devolver <división>{/* contenido */}</div>;
};
Hay diferentes formas de pasar los datos de la publicación a la publicación. El método que elija depende de cómo desee representar la página. Para obtener los datos durante el tiempo de compilación, use getStaticProps() y para obtenerlos a pedido, use getServerSideProps().
Uso de getStaticProps para obtener datos de publicación
Las publicaciones de blog no cambian con tanta frecuencia, y obtenerlas en el momento de la compilación es suficiente. Por lo tanto, modifique el componente Publicar para incluir getStaticProps().
importar { obtenerPublicación Única } de "../../utils/posts";constante Publicar = ({ contenido }) => {
devolver <división>{/* contenido */}</div>;
};
exportarconstante getStaticProps = asíncrono ({parámetros}) => {
constante publicar = esperar getSinglePost (parámetros.slug);
devolver {
accesorios: {... publicar },
};
};
La función getStaticProps genera los datos de publicación representados en la página. Utiliza el slug de las rutas generadas por la función getStaticPaths.
Uso de getStaticPaths para obtener rutas
La función getStaticPaths() devuelve las rutas de las páginas que deben renderizarse previamente. Cambie el componente Publicar para incluirlo:
exportarconstante getStaticPaths = asíncrono () => {
constante rutas = getAllPosts().map(({ slug }) => ({ parámetros: { babosa } }));
devolver {
caminos,
retroceder: FALSO,
};
};
Esta implementación de getStaticPaths obtiene todas las publicaciones que deben procesarse y devuelve los slugs como parámetros.
En conjunto, [slug].js se verá así:
importar { getAllPosts, getSinglePost } de "../../utils/posts";constante Publicar = ({ contenido }) => {
devolver <división>{contenido}</div>;
};exportarconstante getStaticPaths = asíncrono () => {
constante rutas = getAllPosts().map(({ slug }) => ({ parámetros: { babosa } }));
devolver {
caminos,
retroceder: FALSO,
};
};exportarconstante getStaticProps = asíncrono ({parámetros}) => {
constante publicar = esperar getSinglePost (parámetros.slug);devolver {
accesorios: {... publicar },
};
};
exportarpor defecto Correo;
Debe usar getStaticProps() y getStaticPaths() juntos para crear una ruta dinámica. La función getStaticPaths() debería generar las rutas dinámicas, mientras que getStaticProps() obtiene los datos representados en cada ruta.
Creación de rutas dinámicas anidadas en Next.js
Para crear una ruta anidada en Next.js, debe crear una nueva carpeta dentro de la carpeta de páginas y guardar la ruta dinámica dentro de ella.
Por ejemplo, para crear /pages/posts/dynamic-routes-nextjs, guarde [slug].js dentro /pages/posts.
Acceso a parámetros de URL desde rutas dinámicas
Después de crear la ruta, puede recuperar la parámetro de URL desde la ruta dinámica usando useRouter() Gancho de reacción.
Para las páginas/[slug].js, obtenga el slug así:
importar { usar enrutador } de 'siguiente/enrutador'constante Publicar = () => {
constante enrutador = usar enrutador ()
constante { babosa } = enrutador.consulta
devolver <pag>Publicar: {slug}</pag>
}
exportarpor defecto Correo
Esto mostrará el slug de la publicación.
Enrutamiento dinámico con getServerSideProps
Con Next.js puede obtener datos en el momento de la compilación y crear rutas dinámicas. Puede usar este conocimiento para renderizar previamente páginas de una lista de elementos.
Si desea obtener datos en cada solicitud, use getServerSideProps en lugar de getStaticProps. Tenga en cuenta que este enfoque es más lento; solo debe usarlo cuando consuma datos que cambian regularmente.
