Cómo crear rutas dinámicas en Next.js

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-nextjsla 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.

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

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 es suficiente obtenerlas en el momento de la compilación. Por lo tanto, modifique el componente Publicar para incluir getStaticProps().

import { getSinglePost } from "../../utils/posts";
const Post = ({ content }) => {
return 
{/* content */}
;
};
export const getStaticProps = async ({ params }) => {
const post = await getSinglePost(params.slug);
return {
props: { ...post },
};
};

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:

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

Esta implementación de getStaticPaths obtiene todas las publicaciones que deben procesarse y devuelve los slugs como parámetros.

En total, [slug].js se verá así:

import { getAllPosts, getSinglePost } from "../../utils/posts";
const Post = ({ content }) => {
return 
{content}
;
};
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;

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 /páginas/mensajes.

Acceso a parámetros de URL desde rutas dinámicas

Después de crear la ruta, puede recuperar el parámetro de URL de la ruta dinámica usando el gancho useRouter() React.

para las paginas/[slug].js, obtén el slug así:

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

}
export default Post

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. Note que este enfoque es más lento; solo debe usarlo cuando consuma datos que cambian regularmente.