Cómo implementar redirecciones en Next.js

Los motores de búsqueda y los usuarios no quieren encontrar una página que no existe o que está incompleta. Como desarrollador, también debe evitarlo, ya que puede reducir la cantidad de visitas repetidas a su sitio y afectar la forma en que los motores de búsqueda lo indexan.

Next.js es un marco popular creado sobre la biblioteca React y viene con un montón de funciones integradas útiles, una de ellas es el manejo de redirección para evitar tales casos.

En este artículo, configuraremos una aplicación y veremos más de cerca las diferentes formas de implementar redireccionamientos en sus proyectos Next.js. También proporcionaré fragmentos de código para rutas y archivos de configuración y explicaré cómo funcionan en Next.js.

Empecemos.

¿Qué son las redirecciones?

Los redireccionamientos permiten a los usuarios reenviar una URL ejecutada a una nueva URL o, dicho de otro modo, redirigir una solicitud entrante de una ruta a otra.

Estos generalmente son manejados por el servidor a través de códigos de estado de redirección HTTP (3xx), que también pueden ser entendidos por los rastreadores web.

Los redireccionamientos se usan con frecuencia en situaciones en las que una sección del sitio no existe o está en construcción, el contenido se ha movido a una URL diferente, el sistema de enrutamiento ha cambiado, los usuarios son redirigidos debido a restricciones de acceso o muchas otras situaciones.

Configurar el proyecto Next.js

Usaremos create-next-app, que es una forma de Next.js compatible oficialmente para configurar el servidor de desarrollo que usaremos para probar nuestros ejemplos de redirección.

Primero, abra su terminal y ejecute el comando npx create-next-app test-app. Esto creará una nueva carpeta de proyecto donde vivirá toda la lógica de la aplicación.

Luego, cambie el directorio de trabajo a la carpeta recién creada por cd test-app, luego ejecute npm run dev para iniciar el servidor de desarrollo.

A continuación, abra su navegador y navegue hasta https://localhost:3000 para ver la vista previa en vivo de la aplicación.

Rutas definidas

La forma más común de crear redireccionamientos en Next.js es usar el archivo next.config.js, que debe estar en el nivel raíz del marco de su producto. Si no, crea uno e incluye el siguiente código:

module.exports = {
  async redirects() {
    return [
      {
        source: "https://blog.logrocket.com/",
        destination: '/welcome',
        permanent: true,
      },
    ]
  },
}

En el fragmento anterior, la propiedad de origen es la ruta solicitada, el destino es la ruta a la que queremos redirigir al usuario y las comprobaciones permanentes si queremos o no que la ruta de redirección se almacene en caché para el cliente de la máquina y los motores de búsqueda.

Vamos a crear una nueva ruta para /welcome que usamos en la configuración. En la raíz de la carpeta de páginas, cree un nuevo archivo, welcome.js, e incluya el siguiente código:

export default function Welcome() {
  return <h1>Welcome page</h1>;
}

Ahora reinicie el servidor de desarrollo presionando CTRL+C en su teclado y luego ejecute ; npm ejecuta dev para reiniciarlo. Esto es necesario para que los cambios que hicimos en next.config.js surtan efecto. No olvide hacer esto también para otros ejemplos en el artículo.

Para probar la redirección, abra su navegador y navegue hasta https://localhost:3000 nuevamente. Ahora debería ser redirigido automáticamente a https://localhost:3000/welcome.

Partido de babosas

Next.js admite el acceso a slugs de URL y la configuración de redireccionamientos para ellos. Para este ejemplo, cambiemos next.config.js a esto:

Más artículos interesantes de LogRocket:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ]
  },
}

Para configurar las rutas, vaya a la carpeta de páginas y cree dos carpetas nuevas llamadas draft y blog, luego cree el archivo article.js dentro de ambas.

En el archivo draft/article.js, incluya el siguiente código:

export default function Article() {
  return <h1>Source route</h1>;
}

En el blog/article.js, incluya el siguiente código:

export default function Article() {
  return <h1>Destination route</h1>;
}

Después de reiniciar el servidor de desarrollo, intente acceder a https://localhost:3000/draft/article y será redirigido a https://localhost:3000/blog/article. El slug puede ser cualquier valor admitido en la URL, a menos que lo enrute y no lo anide en varios niveles.

comodines

Para redirigir rutas anidadas, puede usar comodines, que esencialmente tomarán todas las rutas después del último nivel conocido y redirigirán a la nueva ruta. Es tan simple como agregar un carácter * al slug al que se dirige en la URL.

Regrese a next.config.js y reemplácelo con esto:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug*',
        destination: '/blog/:slug*',
        permanent: true,
      },
    ]
  },
}

Para crear rutas anidadas, necesitaremos crear algunas subcarpetas dentro de las carpetas de borrador y blog. Digamos que queremos categorizar elementos a través de tecnologías, por lo que llamaremos a ambas carpetas reaccionar. En las dos carpetas recién creadas, agregue el archivo tutorial.js.

En draft/react/tutorial.js, incluye el siguiente código:

export default function Tutorial() {
  return <h1>Nested source route</h1>;
}

En blog/react/tutorial.js, incluye el siguiente código:

export default function Tutorial() {
  return <h1>Nested destination route</h1>;
}

Ahora reinicie el servidor de desarrollo y navegue hasta https://localhost:3000/draft/react/tutorial. Debería ser redirigido inmediatamente a https://localhost:3000/blog/react/tutorial. Tenga en cuenta que se ha redirigido toda la ruta anidada.

Consultas regulares

Regex es una poderosa herramienta que puede usar para acceder a diferentes partes de la ruta URL de manera más eficiente. Tendrá más control sobre el comportamiento de los redireccionamientos y podrá crear reglas personalizadas para los redireccionamientos.

Reemplace next.config.js con el siguiente código:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug(^[a-z]+)',
        destination: '/blog/article',
        permanent: false,
      },
    ]
  },
}

En el fragmento de código anterior, configuramos solo rutas que constan solo de los caracteres de la a a la z redirigidos a la ruta /blog/article, que creamos anteriormente.

Navegue a la carpeta de borrador en la estructura de su proyecto y cree un nuevo archivo, article123.js, que contenga el siguiente código:

export default function Article123() {
  return <h1>Source route</h1>;
}

Para probar la solicitud de expresión regular, reinicie el servidor de desarrollo e intente acceder a https://localhost:3000/draft/article. Será redirigido a https://localhost:3000/blog/article, ya que la ruta consta solo de letras.

Ahora intente acceder a https://localhost:3000/draft/article123. Se mostrará el contenido de la URL que ingresó y no será redirigido porque la ruta incluye números.

Aquí hay algunos sitios útiles para ayudarlo a escribir consultas de expresiones regulares: regex101 y regexr.

Soporte de ruta base

Next.js también admite el prefijo de ruta base en la URL. Esto puede ser útil si necesita configurar varios redireccionamientos y no desea escribir repetidamente la ruta base para todas sus rutas.

Reemplace next.config.js con el siguiente código:

module.exports = {
  basePath: '/content',

  async redirects() {
    return [
      {
        source: '/draft/article',
        destination: '/blog/article',
        permanent: true,
      },
      {
        source: '/draft/react/tutorial',
        destination: '/blog/react/tutorial',
        basePath: false,
        permanent: true,
      },
    ]
  },
}

En el primer objeto de redirección, la fuente se convirtió en /content/draft/article y el destino se convirtió en /content/blog/article, mientras que en el segundo objeto de redirección, la ruta base se ignoró, ya que establecimos basePath en false .

Parámetros de consulta

Con Next.js puede tener aún más control sobre los redireccionamientos, el acceso al host, el encabezado, las cookies y los valores de solicitud. Usando el campo tiene, puede escribir reglas personalizadas para controlar si la redirección debe realizarse en diferentes casos.

Reemplace next.config.js con el siguiente código:

module.exports = {
  async redirects() {
    return [
      {
        source: "https://blog.logrocket.com/",
        has: [
          {
            type: 'header',
            key: 'host',
            value: 'localhost:3000',
          },
        ],
        permanent: false,
        destination: '/welcome',
      },
    ];
  },
}

El tipo debe ser un encabezado, una cookie o una solicitud. La clave debe ser una cadena del tipo seleccionado para comparar. El valor es opcional y, si no se establece, todos los valores de la clave coincidirán.

En el fragmento de código anterior, usamos el encabezado y lo comparamos con la clave de host para obtener localhost:3000. Si se respetan estos valores en la solicitud, se realizará la redirección.

Reinicie el servidor de desarrollo e intente acceder a https://localhost:3000. Será redirigido a https://localhost:3000/welcome porque el valor del host coincide.

Ahora cierre el servidor de desarrollo con CTRL+C y ejecute npm run dev — -p 8000. Esto iniciará su aplicación en un puerto diferente. Ahora acceda a su aplicación en https://localhost:8000. Esta vez no será redirigido porque el valor del host no coincide con su configuración de redirección.

API de redireccionamiento

Next.js viene con una forma integrada de manejar las llamadas a la API. Puede usar el método de redirección para realizar una redirección si una determinada respuesta tiene éxito. Esto puede ser muy útil cuando los usuarios inician sesión, envían formularios y otros casos de uso.

Para crear una nueva ruta API, navegue a la carpeta api en las páginas y cree un nuevo archivo, data.js, con el siguiente código:

export default async function handler(req, res) {
  console.log(`Name: ${req.body.name}`);
  try {
    // some await stuff here
    res.redirect(307, '/welcome');
  } catch (err) {
    res.status(500).send({ error: 'Error while fetching data' });
  }
}

A continuación, navegue hasta el nivel raíz de la carpeta de páginas y cree un nuevo archivo, form.js, para crear el formulario en sí. Incluya el siguiente código en el archivo recién creado:

export default function Form() {
  return (
    <form action='/api/data' method='post'>
      <label htmlFor="name">Your name:</label>
      <input type="text" id='name' name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Ahora abra su navegador y navegue hasta https://localhost:3000/form. Se le presentará el campo de entrada para ingresar su nombre y el botón Enviar para enviar el valor a la API. Ingrese cualquier valor, envíelo y debería ser redirigido a https://localhost:3000/welcome.

Para asegurarse de que la API recibió el valor que ingresó, regrese a la terminal y verifique los registros impresos. El valor debe mostrarse allí.

getStaticProps y getServerSideProps

Si desea establecer redireccionamientos a través de los métodos de representación previa integrados de Next.js, puede incluirlos en getStaticProps o getServerSideProps.

Con getStaticProps, la página se renderizará previamente en el momento de la compilación (generación de sitios estáticos).

Para configurar un ejemplo, navegue hasta el nivel raíz de la carpeta de páginas y edite index.js:

export default function Home() {
  return <h1>Home page</h1>;
}

export async function getStaticProps() {
  const content = null;

  if (!content) {
    return {
      redirect: {
        permanent: false,
        destination: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

De manera similar, para la representación del lado del servidor (SSG), utilizará getServerSideProps, que se asegurará de que Next.js pre-presente la página en cada solicitud.

Para configurar el ejemplo de SSG, modifique index.js como se muestra a continuación:

export default function Home() {
  return <h1>Home page</h1>;
}

export async function getServerSideProps() {
  const content = null;

  if (!content) {
    return {
      redirect: {
        permanent: false,
        destination: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

Para probar cualquiera de los dos casos, intente acceder a https://localhost:3000 y será redirigido automáticamente a https://localhost:3000/welcome ya que se han ejecutado las reglas de redirección en getStaticProps o getServerSideProps.

Conclusión

En este artículo, analizamos varias formas de implementar redireccionamientos en Next.js. Primero, usamos next.config.js y escribimos configuraciones personalizadas para rutas predefinidas, accedimos a rutas anidadas y de un solo nivel, y usamos expresiones regulares para aumentar el control de redirección.

A continuación, también analizamos más de cerca cómo puede crear redireccionamientos en función de los parámetros de solicitud recibidos. Finalmente, analizamos cómo implementar redireccionamientos mediante rutas API y generación de sitios estáticos en comparación con la representación del lado del servidor.

Espero que con este artículo hayas aprendido algo nuevo y que a partir de ahora puedas crear redireccionamientos para todos tus casos de uso en tus futuras aplicaciones Next.js.

LogRocket: visibilidad completa de las aplicaciones Next.js de producción

La depuración de las aplicaciones Next puede ser un desafío, especialmente cuando los usuarios encuentran problemas que son difíciles de reproducir. Si está interesado en monitorear y rastrear el estado, detectar automáticamente errores de JavaScript y rastrear solicitudes de red lentas y tiempos de carga de componentes, pruebe LogRocket.

LogRocket es como un DVR para aplicaciones web y móviles, literalmente graba todo lo que sucede en su aplicación Next. En lugar de adivinar por qué ocurren los problemas, puede agregar e informar el estado en el que se encontraba su aplicación cuando ocurrió un problema. LogRocket también supervisa el rendimiento de su aplicación, creando informes con métricas como la carga de la CPU del cliente, el uso de la memoria del cliente y más.

El paquete de middleware LogRocket Redux agrega una capa adicional de visibilidad a sus sesiones de usuario. LogRocket registra todas las acciones y el estado de sus tiendas Redux.

Modernice la forma en que depura sus aplicaciones Next.js: comience a monitorear de forma gratuita.

Fuente