Estoy trabajando en un POC para migrar nuestra aplicación AEM SPA de create-react-app a Next para aprovechar la plataforma rica en funciones, incluidas las capacidades SSR y SSG. Tengo escritas mis rutas de página index y catch-all y las he transferido sobre el componente y la biblioteca de componentes existentes de la aplicación AEM. La aplicación se carga al presionar todas las URL correctamente y puedo ver que las llamadas de red al servidor AEM devuelven los modelos correctamente. Sin embargo, me encuentro con la representación de componentes de la manera recomendada por AEM (la aplicación amplía la clase de página de AEM y devuelve páginas secundarias y componentes que la biblioteca de AEM genera bajo el capó en función del modelo). Puedo forzar componentes para que se rendericen cuando los importo directamente y los renderizo con los accesorios que se encuentran en el JSON, pero esto no es práctico, ya que la biblioteca debe manejarlo).

Una cosa que creo que puede ser el problema es que los componentes de importación que se importan dinámicamente en el índice de la página parecen no funcionar según lo previsto.

 const importComponents = dynamic(() => import('../src/components/import-components.js'))

Esto importa un script que importa otros componentes.

Nuevamente, usando el trabajo que mencioné anteriormente, puedo importar y renderizar componentes, pero no debería tener que escribir mi propio marco para eso, la biblioteca AEM debería manejarlo. ¿Alguien más ha intentado traer un AEM SPA a Next? Si es así, ¿qué hiciste que funcionó? Se agradecería cualquier ejemplo de código, ya que no parece que mucha gente esté usando AEM de esta manera.

¡Gracias!

Editar: Aquí hay un enlace a un repositorio básico aem-next-example . Intenté poner esto en funcionamiento en codesandbox, pero hubo algunos problemas con las bibliotecas de AEM. No hay un archivo Léame en el repositorio, pero los pasos son simples:

1. clonar el repositorio y el cd en el directorio raíz
2. ejecutar la instalación de npm
3. ejecutar npm ejecutar dev
4. abra el navegador en http://localhost:300 (cualquier ruta funciona, he implementado una página dinámica ya que las páginas AEM son dinámicas, sin embargo, estamos codificando la ruta/modelo del lado del servidor para los fines de este ejemplo, por lo que es funcionará independientemente de la ruta de URL)

Advertencias: hay muchas soluciones alternativas aquí, siento que AEM no fue diseñado para usarse con Next, por lo que hay un tutorial para otros 20 CMS en nextjs.org, pero NO AEM. También recibo un error de forma intermitente al cargar la página debido a que "no está definido por mí mismo" (de alguna manera relacionado con las importaciones de módulos, no estoy seguro de cómo resolver esto aparte de volver a cargar la página cuando lo veo, al menos no está sucediendo con una producción construir)