Next.js App Overwriting Entire Page When Embedded in Another Application

[candid dawn]

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.

[valid cave]

Hi @candid dawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources provided, I can offer some insights into your issue with embedding a Next.js application within another web application. This problem seems to be related to how Next.js handles routing and hydration, especially in cross-domain iframe scenarios.

The issue you're experiencing is similar to what's described in the Github issue about cross-domain iframe not hydrating after SSR on devServer. In this issue, it was noted that Next.js (dev server) does not hydrate SSR pages/components unless they are visible on the screen when loaded in a cross-domain iframe.

To address your specific problem, here are a few potential approaches:

1. Multi-Zones: Next.js offers a feature called Multi-Zones, which allows you to split a large application into smaller Next.js applications that each serve a set of paths. This might be helpful in your case. You can learn more about this in the Next.js Multi-Zones documentation.

2. Routing and Navigation: Next.js App Router enables "soft navigation" between pages, ensuring only the route segments that have changed are re-rendered (partial rendering). This might be interfering with your embedding scenario. You can find more information about this in the Next.js Linking and Navigating documentation.

3. Content Security Policy: If you're embedding the Next.js app in an iframe, you might need to adjust your Content Security Policy. The Next.js documentation on Content Security Policy provides guidance on how to implement this.

4. Client-side Rendering: For components that need to be embedded, you might consider using client-side rendering instead of server-side rendering. This can be achieved by using the 'use client' directive at the top of your component file.

However, it's important to note that the knowledge sources don't provide a direct solution to your specific problem of hydrating a single component within a Next.js app embedded in another application. The issue seems to be more complex and might require a combination of approaches or a custom solution.

If these suggestions don't resolve your issue, you might want to consider opening an issue on the Next.js GitHub repository to get more specific guidance from the Next.js team or community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@candid dawn Kapa.ai is still learning and improving, please let me know how I did by reacting below.