Necesitas conocer todos los urlslugs, los históricos y los actuales. Ahora echemos un vistazo a la implementación. En Next.js, tengo una página simple, slug-tsx. Ahora, todo esto se basa en un boilerplate de contenido de Next.js, por lo que no hay mucha funcionalidad. Pero aquí ves que hay dos métodos, getStaticPaths, getStaticProps. Y como mencioné en la presentación al principio, necesitas proporcionar todas las rutas a getStaticPaths o como resultado, a Next.js.
En getStaticProps, necesitas emitir la redirección si es una página que debe ser redirigida. Así que aquí solo necesitamos hacer un cambio simple y agregar al parámetro de elementos el historial también. Así que antes, solo estábamos usando el URL slug, pero ahora queremos usar el historial de URL slug también para obtener realmente todas las rutas. Y ahora necesitamos obtener todas las rutas en una lista simple.
Ahora, si solo obtenemos las rutas en getStaticProps, tendríamos que hacer una verificación adicional de la API con la API de contenido para ver si el slug es uno histórico o un actual. Así que lo que voy a hacer es que voy a crear una lista de todos los slugs y todos los slugs actuales a los que deben redirigir. Ahora, voy a hacer la implementación aquí, voy a avanzar rápidamente y luego voy a explicar el code en un segundo.
Bien, lo que implementé aquí es que estamos obteniendo todas las rutas del CMS de contenido, y en realidad estamos proporcionando todas esas rutas de vuelta como una estructura IPagePath, que puedes ver que contiene solo dos propiedades path y redirectsTo. Path es el URL slug, el actual, y redirectsTo es, en caso de que estemos trabajando con la ruta histórica, aquí vamos a mantener la ruta actual de cualquier página. Así que ves que para el elemento actual que viene del contenido, estamos proporcionando una ruta que es la ruta actual del elemento, la de la versión publicada de la página. Y luego estamos creando una estructura de las rutas históricas, slugs históricos, y redirigen todos a la ruta de la página actual.
Ahora el problema es, realmente no podemos tomar toda la estructura y proporcionarla a Next.js para que la obtengamos en getStaticProps. La razón es, Next.js solo nos permitirá transferir el slug, porque está en el nombre del archivo, es la variable en el camino a la página. Así que no vamos a poder transferir esto a getStaticProps y evitar los problemas de performance. Así que lo que vamos a hacer es, vamos a hacer un truco sugerido por Versal, donde simplemente vamos a tomar todas las rutas, las vamos a serializar en un archivo físico, y luego vamos a tomar ese archivo de vuelta en getStaticProps. Voy a hacer de nuevo la implementación y avanzar rápidamente.
Ahora ves aquí que estoy almacenando todas las rutas en la caché. Lo último que necesito hacer aquí es proporcionar todos los slugs, este es el segundo punto de la presentación. Necesitamos obtener todas las rutas, históricas y actuales, y devolverlas a Next.js aquí. Porque solo estamos diciendo a Next.js, en esta ruta, no hay un 404, hay una página aquí. Y ahora necesitamos hacer el tercer paso, y eso es emitir una redirección adecuada si descubrimos que deberíamos. Así que, en este caso, simplemente estamos tomando la ruta de la caché y si hay una página que debería ser redirigida, tendrá el campo redirects.to. Porque estos son todos los URL slugs históricos, y necesitamos redirigirlos a esta ruta. Así que, podemos hacer una condición simple aquí, si existe path.redirects.to.
Comments