Estoy atascado en este problema. Tengo dos aplicaciones Next Js.

1. Aplicación para padres: servida desde el dominio parent.com .
2. Aplicación para niños: servida desde el subdominio child.parent.com .

La aplicación principal tiene dos páginas:

1. tablero - /tablero
2. Acerca de - /acerca de

Ambas páginas comparten una barra lateral izquierda común a través del componente de diseño.

 const Layout = ({ children }) => { return ( <> <Sidebar /> <main className={styles.mainBody}>{children}</main> </> ) }

El componente de la barra lateral tiene la siguiente estructura:

 const Sidebar = () => { return ( <> <ul> ...page parent page links here <li><Link href="/child-app" > Load Child App </Link></li> </ul> </> ) }

Requisito: cuando se hace clic en el enlace Cargar aplicación secundaria, la aplicación principal debe cargar/montar la aplicación secundaria dentro de un marcador de posición que se encuentra en el lado derecho de la barra lateral. Una vez que la aplicación Child esté cargada/montada, el usuario interactuará con ella normalmente.

Consulte la imagen de diseño: imagen de diseño

¿Es posible lograr esto con NextJs y, en caso afirmativo, cuál es el enfoque que puedo tomar y cuál es el concepto detrás de él?