Después de implementar proyectos configurados con Vercel o Next.js, la reescritura no puede encontrar la ruta de los activos.

Answer

1. 

   davy.ai

   July 11, 2023 at 6:23 pm

   Solución de problemas de dominio de varios proyectos con Vercel y Next.js

   Si tienes múltiples proyectos Next.js y deseas utilizar un único dominio para acceder a ellos, puedes configurar reescrituras de ruta en Vercel. Sin embargo, si encuentras problemas con la falta de activos o estilos incorrectos, puede haber un problema con la configuración.

   En este caso, la configuración incluye un único archivo vercel.json con reescrituras de ruta para dos aplicaciones: un ejemplo de aplicación de inicio y un ejemplo de aplicación de pago. Las reescrituras apuntan a dos dominios diferentes para cada aplicación.

   El problema es que al acceder a nizen.com.br, el ejemplo de la aplicación de inicio se carga sin estilos y aparecen errores en la consola. Lo mismo ocurre con la aplicación de pago.

   Para solucionar este problema, puedes intentar las siguientes soluciones:

   1. Verificar las rutas de URL de los activos

   Los mensajes de error en la consola sugieren que la aplicación de inicio intenta cargar los activos desde la ruta incorrecta. Por ejemplo, busca el archivo CSS en https://nizen.com.br/_next/static/css/styles.chunk.css en lugar de https://home.nizen.com.br/_next/static/css/styles.chunk.css.

   Para solucionar esto, puedes verificar las URL de los activos en el código fuente HTML y asegurarte de que apunten al dominio correcto.

   1. Agregar una ruta base a la aplicación de pago

   El ejemplo de la aplicación de pago tiene un archivo next.config.js con una propiedad basePath establecida en “/checkout”. Esto le indica a Next.js que la aplicación debe ser servida desde el subdirectorio /checkout en lugar de la raíz.

   Sin embargo, esto puede causar problemas si la aplicación no está configurada para cargar los activos desde la ruta base correcta. Para solucionar esto, puedes agregar un archivo next.config.js a la aplicación de pago con el siguiente contenido:

   module.exports = {
     basePath: "/checkout",
     assetPrefix: "/checkout/",
   };
   

   Esto establece la ruta base para la aplicación en “/checkout” e indica a Next.js que cargue los activos desde “/checkout/_next/…”.

   1. Utilizar reescrituras de Next.js

   Next.js tiene su propio mecanismo de reescritura que puedes utilizar para manejar las rutas de URL en el lado del servidor. Para utilizar esto, puedes crear un archivo next.config.js en la aplicación de inicio y agregar una regla de reescritura para la ruta raíz:

   module.exports = {
     async rewrites() {
       return [
         {
           source: "/",
           destination: "https://home.nizen.com.br",
         },
       ];
     },
   };
   

   Esto le indica a Next.js que reescriba la ruta raíz a “https://home.nizen.com.br” en el lado del servidor.

   Sin embargo, esto puede no funcionar si el problema está relacionado con las rutas incorrectas de los activos, por lo que es posible que necesites combinar esta solución con la primera o la segunda.

   En general, para solucionar el problema con la configuración de dominio de varios proyectos, debes verificar las URL de los activos, agregar una ruta base a la aplicación de pago y utilizar reescrituras de Next.js si es necesario.

Comments are closed.