I am stuck in this problem. I have two Next Js applications.

1. Parent App - served from parent.com domain.
2. Child App - served from child.parent.com sub-domain.

The parent app has two pages:

1. dashboard - /dashboard
2. About - /about

Both of the pages share a common left sidebar via Layout Component.

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

The sidebar component has following stucture:

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

Requirement: When the Load Child App link is cliked, the Parent app shall Load/Mount the Child app inside a placeholder which is on the right side of sidebar. Once the Child app is loaded/mounted, the user will interact with it normall.

Pls refer to the Layout image: layout image

Is it possible to acheive this with NextJs and if yes what is the approach i can take and what is the concept behind it ?