We are encountering a problem where a Next.js application, when embedded into another web application, unintentionally takes control of the entire webpage. Instead of running within its assigned section, it removes all content from the parent application and retains only the content inside the Next.js project.

Attempts to resolve this issue, including the use of Shadow DOM, have not been successful. Our goal is to hydrate a specific component within the Next.js app without affecting the overall page.

We are seeking a solution to ensure the embedded Next.js app behaves as expected, remaining confined to its designated section.

Note: I dont want to use Iframe cause it's not seo friendly