Cómo manejar correctamente los cambios de URL slug en Next.js

Rate this content
Bookmark

Si estás utilizando un CMS headless para almacenar contenido, también trabajas con URL slugs, que son las últimas partes de cualquier URL. El problema es que los editores de contenido pueden cambiar libremente los slugs, lo que puede causar errores 404, pérdida de clasificación de páginas, enlaces rotos y, en última instancia, confusión para los visitantes de tu sitio. En esta charla, presentaré una solución para mantener un historial de URL slugs en el CMS y explicaré cómo implementar un mecanismo de redireccionamiento adecuado (¡usando TypeScript!) para páginas generadas dinámicamente en un sitio web de Next.js.

Agrega a las notas de la charla: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022

10 min
29 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explica cómo manejar los cambios de URL slug en Next.js utilizando los métodos getStaticPaths y getStaticProps. Cubre la implementación de redireccionamientos y proporciona una solución para eliminar la necesidad de que los editores realicen pasos adicionales. El enfoque implica realizar un seguimiento de los cambios de URL slug y emitir redireccionamientos adecuados. El presentador anima a la audiencia a comunicarse con cualquier pregunta o experiencia relacionada con el manejo de URL slugs.

Available in English

1. Manejo de cambios de URL en Next.js

Short description:

Hola a todos. Soy Andrey, evangelista de desarrolladores en Content by Kentico. Hoy, explicaré cómo manejar los cambios de URL en Next.js. Cada elemento de contenido en el CMS sin cabeza contiene un slug de URL, y cuando el editor lo cambia, el antiguo slug de URL deja de existir, lo que resulta en errores 404 para los visitantes. Para manejar esto correctamente, necesitamos conocer el historial de slugs de URL y utilizar los métodos getStaticPaths y getStaticProps en Next.js para emitir redireccionamientos. Comencemos con el lado del contenido, donde podemos usar el elemento personalizado urlslug-history para rastrear los cambios de slugs de URL.

Soy Andrey, evangelista de desarrolladores en Content by Kentico. Y hoy, quiero contarles cómo manejar correctamente los cambios de URL en Next.js.

Ahora, en primer lugar, ¿por qué deberíamos preocuparnos por los slugs de URL? Cada elemento de contenido que se almacena en el headless CMS y que se muestra como una página en la implementación de su sitio contiene un slug de URL. Ahora, el problema surge cuando el editor ingresa a ese elemento de contenido, cambia el slug de URL y la implementación de su sitio simplemente toma el cambio, reconstruye la página y la antigua página, el antiguo slug de URL, simplemente deja de existir. El problema es que si esa página solía tener un buen ranking en los motores de búsqueda, o si utilizó esa página en sus campañas de marketing, todos esos visitantes que utilizan esa URL ahora recibirán errores 404. Y en estos días no podemos permitirnos tener visitantes confundidos, ¿verdad?

Entonces, lo que debemos hacer es, en primer lugar, necesitamos conocer para cada página, cada elemento de contenido, el historial de slugs de URL. Aquí pueden ver que el ejemplo es que la página actual tiene un slug de URL, hello-typescript-congress, pero en el pasado solía tener un slug de URL, typescript-congress y hello-conference, necesitamos conocer el historial para poder emitir los redireccionamientos correctamente. El siguiente paso es para Next.js, ahora vamos a utilizar Next.js y contenido en este ejemplo, pero si están utilizando un framework diferente, pueden aplicar los mismos principios allí. Aquí estamos hablando solo de Next.js, así que tenemos dos métodos. Tenemos getStaticPaths y getStaticProps. En getStaticPaths, necesitamos proporcionar todos los slugs de URL donde hay una página para que generemos. En este caso, necesitamos proporcionar los tres slugs de URL. Es decir, los históricos y los actuales. Y el último paso, el tercer paso, es agregar una redirección adecuada en getStaticProps. Allí necesitamos averiguar según el slug, si este es un slug actual, como el hello-typescript-congress, que es la página de destino, o si el slug que estamos utilizando es uno histórico, y debemos redirigir al visitante a una página actual. En este caso, sería typescript-congress, hello-conferences, que emitirá redireccionamientos. Entonces, ¿cómo podemos hacer esto en Next.js? Echemos un vistazo. Comencemos en el contenido primero. En el lado del contenido, preparé un tipo de contenido llamado conferencia. Y cuando miras el elemento de contenido, ya está utilizando ese tipo de contenido. Aquí puedes ver en el contenido tenemos un elemento personalizado especial llamado urlslug-history que puedes usar en tu proyecto. Está disponible de código abierto, por lo que podemos implementarlo en Netlify o Vercel y usarlo tal como lo estoy usando aquí. En realidad, realiza un seguimiento de todos los cambios que haces en un slug de URL. Entonces, aquí puedes ver que ahora el slug de URL es typescript-congress-2022. Si lo cambio a typescript-congress, se registra automáticamente el cambio. Y cuando publico la página, se almacenará el cambio dentro del elemento de contenido. Así que aquí puedes ver que está en el historial. Ahora, podemos hacer esto tantas veces como queramos. Simplemente obtendremos una lista de cadenas de la API, pero este es el primer paso.

2. Implementación de cambios de URL Slug en Next.js

Short description:

En Next.js, debes proporcionar todos los caminos a getStaticPaths o como resultado a Next.js. En getStaticProps, debes emitir la redirección si es una página que debe redirigirse. Creamos una lista de todos los slugs y todos los slugs actuales a los que deben redirigirse. Almacenamos todos los caminos en la caché y proporcionamos todos los slugs, tanto históricos como actuales, a Next.js. Emitimos una redirección adecuada si descubrimos que debemos hacerlo.

Debes conocer todos los urlslugs, tanto los históricos como los actuales. Ahora veamos la implementación. En Next.js, tengo una página simple, slug-tsx. Todo esto se basa en una plantilla de contenido de Next.js, por lo que no hay una tonelada de funcionalidad. Aquí puedes ver que hay dos métodos, getStaticPaths, getStaticProps. Como mencioné en la presentación al principio, debes proporcionar todos los caminos a getStaticPaths o como resultado a Next.js.

En getStaticProps, debes emitir la redirección si es una página que debe redirigirse. Entonces, aquí solo necesitamos hacer un cambio simple y agregar al parámetro de elementos el historial también. Antes, solo estábamos usando el slug de URL, pero ahora queremos usar también el historial del slug de URL para obtener realmente todos los caminos. Y ahora necesitamos obtener todos los caminos en una lista simple.

La cosa es que si solo obtenemos los caminos 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 uno actual. Entonces, lo que voy a hacer es crear una lista de todos los slugs y todos los slugs actuales a los que deben redirigirse. Ahora, voy a hacer la implementación aquí, voy a avanzar rápidamente y luego voy a explicar el código en un segundo.

Correcto, lo que implementé aquí es que estamos obteniendo todos los caminos del CMS de contenido y realmente estamos proporcionando todos esos caminos como una estructura IPagePath, que puedes ver que contiene solo dos propiedades: path y redirectsTo. Path es el slug de URL, 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. Entonces, puedes ver que para el elemento real que proviene 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, los slugs históricos, y redirigen todos a la ruta actual de la página.

Ahora, el problema es que no podemos tomar toda la estructura y proporcionarla a Next.js para que la obtengamos en getStaticProps. La razón es que Next.js solo nos permitirá transferir el slug, porque está en el nombre de archivo, es la variable en el camino hacia la página. Entonces no vamos a poder transferir esto a getStaticProps y evitar los problemas de rendimiento. Entonces, lo que vamos a hacer es hacer un truco sugerido por Versal, donde simplemente vamos a tomar todos los caminos, los vamos a serializar en un archivo físico y luego vamos a tomar ese archivo de vuelta en getStaticProps. Voy a hacer la implementación nuevamente y avanzar rápidamente.

Ahora puedes ver aquí que estoy almacenando todos los caminos en la caché. Lo último que necesito hacer aquí es proporcionar todos los slugs, esto es el segundo punto de la presentación. Necesitamos obtener todos los caminos, los históricos y los actuales, y devolverlos a Next.js aquí. Porque simplemente le estamos diciendo a Next.js que en este camino no hay un error 404, hay una página aquí. Y ahora necesitamos hacer el tercer paso, y eso es emitir una redirección adecuada si descubrimos que debemos hacerlo. Entonces, en este caso, simplemente tomamos el camino de la caché y si hay una página que debe redirigirse, tendrá el campo redirects.to. Porque estos son todos los slugs de URL históricos, y necesitamos redirigirlos a esta ruta. Entonces, podemos hacer una condición simple aquí, si existe path.redirects.to.

3. Implementación de Redirecciones y Conclusiones

Short description:

Para realizar la redirección, necesitamos devolver un objeto de redirección que incluya los campos de destino y permanente. El destino debe establecerse desde la raíz del sitio y el campo permanente determina si se utiliza una redirección 307 o 308. Después de implementar la solución, podemos probarla actualizando la página. El URL actual de la slack debería mostrar la página correspondiente y agregar la slack anterior debería redirigir a la página correcta. Si bien la implementación puede no ser ideal, elimina la necesidad de que los editores realicen pasos adicionales. Si tienes alguna pregunta o quieres compartir tu experiencia en el manejo de URL slacks, no dudes en contactarme en Twitter.

En ese caso, queremos hacer la redirección. Por lo tanto, vamos a devolver un objeto de redirección, y el objeto de redirección solo necesita contener un destino y un permanente. Entonces, permanente, si quieres hacer una redirección 307 o 308, en función de eso, establece el campo permanente. Quiero que permanente sea verdadero. Y en el destino, solo recuerda si estás en la subcarpeta o en la raíz, esto será el destino desde la raíz de tu sitio. En mi caso, es solo una barra diagonal y la ruta a la que se redirige. Guardemos esto.

Todavía hay un problema aquí en getStaticPaths. Correcto. Olvidé. Sí, hay path.path, porque aquí solo estamos obteniendo el objeto, así que queremos la slack en ese campo. Ahora, esto está bien. Intentemos ejecutar el sitio. Y volvamos al navegador y actualicemos esta página. Ahora, el URL actual de la slack es TypeScript Congress. Entonces, en esa página en el URL slack deberíamos tener la página de TypeScript Congress. Como puedes ver, esto funciona. Y la slack anterior era TypeScript Congress 2022. Entonces, si agregamos aquí 2022, deberíamos ser redirigidos a TypeScript Congress. Funciona como se esperaba.

Ahora, la implementación no es ideal, para ser honesto, pero funciona de esta manera y nos permite poner todo en orden. Y lo más importante, no requiere que los editores realicen pasos adicionales. Simplemente funciona. Eso es todo de mi parte. Si deseas obtener más información sobre esta solución o quieres compartir tu experiencia en el manejo de URL slacks, definitivamente contáctame. Puedes encontrarme en Twitter. Espero que disfrutes el resto de la conferencia.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Workshop
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
WorkshopFree
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others