Enrutamiento dinámico de NextJS en Amazon CloudFront

02 Jun, 2023 Programación 0

Tengo una aplicación que utiliza NextJS como envoltorio y hago uso de la característica de enrutamiento dinámico de NextJS. Tuve un problema al implementarlo en CloudFront debido a que dns.com/path/page no se representaba, en su lugar, CloudFront esperaba dns.com/path/page.html. Lo solucioné aplicando esta solución de lambda-edge-nice-url. Ahora funciona correctamente. Sin embargo, aún queda un problema: las rutas dinámicas de NextJS. dsn.com/path/subpath/123 debería funcionar, ya que 123 es un parámetro dinámico. Sin embargo, eso no funciona. Sólo devuelve la página cuando accedo a dns.com/path/subpath/[id], lo cual, por supuesto, no es correcto, ya que [id] no es un parámetro que deseo cargar.

Lo más extraño es que si intento acceder directamente a la URL como se indica anteriormente, falla. Sin embargo, dentro de la aplicación, tengo botones y enlaces que redirigen al usuario, y eso funciona correctamente.

Navegando desde dentro de la aplicación (botón con router.push en su devolución de llamada):

TsYLO.png

Intentando acceder a la URL directamente:

qsxAd.png

¿Alguien puede ayudarme a dirigir correctamente las solicitudes?

davy.ai

June 2, 2023 at 7:46 pm

Solución de problemas de rutas dinámicas de NextJS con CloudFront

Problema

Al implementar una aplicación que utiliza NextJS como envoltorio para AWS CloudFront, el acceso directo a rutas dinámicas falla, aunque funcionan correctamente cuando se enrutan a través de la aplicación.

Solución

El problema se debe a que CloudFront espera que las rutas tengan el formato dns.com/path/page.html, mientras que las rutas dinámicas de NextJS se generan sin una extensión de archivo. Para solucionar esto, debemos agregar una regla de reescritura en el comportamiento de CloudFront que maneja el contenido de NextJS.

Podemos lograr esto creando una nueva función Lambda@Edge siguiendo el mismo enfoque que lambda-edge-nice-url. Una vez que hemos creado la función y le hemos dado permisos IAM adecuados, debemos adjuntarla al comportamiento de CloudFront que sirve el contenido de NextJS.

La función Lambda debe tomar la ruta solicitada y agregar la extensión .html antes de pasarla al origen. De esta manera, CloudFront representará correctamente las rutas dinámicas.

exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request;
  const oldUri = request.uri;
  const extension = '.html';

  // Verificar si la solicitud es para una ruta dinámica y agregar la extensión .html
  if (oldUri.match(/\/\d+$/) || oldUri === '/') {
    const newUri = oldUri + extension;
    request.uri = newUri;

    callback(null, request);
  } else {
    callback(null, request);
  }
};

Una vez que la función Lambda está adjunta al comportamiento de CloudFront, borra la caché de la distribución y prueba el acceso directo a tus rutas dinámicas. Ahora deberían funcionar correctamente.

Conclusión

Agregar una función Lambda@Edge a CloudFront para reescribir rutas dinámicas es un paso necesario cuando se implementan aplicaciones NextJS en AWS. Es esencial verificar el formato de las URL y asegurarse de que tengan la extensión de archivo adecuada para que CloudFront las represente correctamente.

Answer

davy.ai

June 2, 2023 at 7:46 pm
Solución de problemas de rutas dinámicas de NextJS con CloudFront

Problema

Al implementar una aplicación que utiliza NextJS como envoltorio para AWS CloudFront, el acceso directo a rutas dinámicas falla, aunque funcionan correctamente cuando se enrutan a través de la aplicación.

Solución

El problema se debe a que CloudFront espera que las rutas tengan el formato dns.com/path/page.html, mientras que las rutas dinámicas de NextJS se generan sin una extensión de archivo. Para solucionar esto, debemos agregar una regla de reescritura en el comportamiento de CloudFront que maneja el contenido de NextJS.

Podemos lograr esto creando una nueva función Lambda@Edge siguiendo el mismo enfoque que lambda-edge-nice-url. Una vez que hemos creado la función y le hemos dado permisos IAM adecuados, debemos adjuntarla al comportamiento de CloudFront que sirve el contenido de NextJS.

La función Lambda debe tomar la ruta solicitada y agregar la extensión .html antes de pasarla al origen. De esta manera, CloudFront representará correctamente las rutas dinámicas.
```
exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request;
  const oldUri = request.uri;
  const extension = '.html';

  // Verificar si la solicitud es para una ruta dinámica y agregar la extensión .html
  if (oldUri.match(/\/\d+$/) || oldUri === '/') {
    const newUri = oldUri + extension;
    request.uri = newUri;

    callback(null, request);
  } else {
    callback(null, request);
  }
};
```
Una vez que la función Lambda está adjunta al comportamiento de CloudFront, borra la caché de la distribución y prueba el acceso directo a tus rutas dinámicas. Ahora deberían funcionar correctamente.

Conclusión

Agregar una función Lambda@Edge a CloudFront para reescribir rutas dinámicas es un paso necesario cuando se implementan aplicaciones NextJS en AWS. Es esencial verificar el formato de las URL y asegurarse de que tengan la extensión de archivo adecuada para que CloudFront las represente correctamente.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?