By Shyam Verma — 19 Jan 2025

Dynamically Embedding HTML in Next.js Using iframes

When working with dynamic HTML in Next.js, you might need to handle content that includes external scripts, stylesheets, and inline JavaScript. Instead of using dangerouslySetInnerHTML, which doesn’t execute scripts, a more effective solution is embedding the HTML inside an iframe.

In this guide, we’ll explore how to embed and dynamically resize an iframe in Next.js while loading HTML content from a CMS.

Why Use an `<iframe>` Instead of `dangerouslySetInnerHTML`?

Advantages of Using an `<iframe>`

Complete Isolation – The HTML runs separately from your Next.js app, preventing style and script conflicts.
Automatic Script Execution – Unlike dangerouslySetInnerHTML, JavaScript inside the iframe executes normally.
CSS Encapsulation – External styles won't affect the main application.
Better Security – Reduces the risk of breaking your app with conflicting HTML or styles.

When an `<iframe>` Might Not Be Ideal

No SEO Benefits – Search engines may not index iframe content effectively.
Limited Interaction – If you need direct communication between the iframe and the parent page, additional logic using postMessage is required.

Since we don’t need SEO benefits or interaction in this case, an iframe is the best approach.

Embedding HTML in an `<iframe>` with Automatic Resizing

Step 1: Create the `DynamicIframe` Component

This component will:

Load the provided HTML inside an iframe.
Automatically adjust its height based on content size.
Inject a script dynamically to notify the parent page of height changes.

"use client";
import { useEffect, useRef, useState } from "react";

const DynamicIframe = ({ htmlContent }: { htmlContent: string }) => {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [height, setHeight] = useState("100px"); // Default height

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.data.height) {
        setHeight(`${event.data.height}px`);
      }
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  useEffect(() => {
    if (iframeRef.current) {
      const doc = iframeRef.current.contentWindow?.document;
      if (doc) {
        doc.open();
        doc.write(`
          <html>
            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <style> body { margin: 0; } </style>
            </head>
            <body>
              ${htmlContent}
              <script>
                function sendHeight() {
                  window.parent.postMessage({ height: document.body.scrollHeight }, "*");
                }
                window.onload = sendHeight;
                window.onresize = sendHeight;
              </script>
            </body>
          </html>
        `);
        doc.close();
      }
    }
  }, [htmlContent]);

  return (
    <iframe
      ref={iframeRef}
      style={{
        width: "100%",
        height: height,
        border: "none",
        overflow: "hidden",
      }}
    />
  );
};

export default DynamicIframe;

Step 2: Use the Component in Your Page

Now, integrate the component into your Next.js page:

const Page = () => {
  const htmlContent = `
    <h1>Hello from Iframe</h1>
    <p>This is dynamic content.</p>
  `;

  return <DynamicIframe htmlContent={htmlContent} />;
};

export default Page;

This setup ensures that the iframe height dynamically adjusts based on the content inside it.

Optimizing with Dynamic Imports in Next.js

If your parent page is a Server Component, you must dynamically import DynamicIframe to ensure it loads only on the client.

Step 3: Dynamically Import the Component

Modify your page to load DynamicIframe only when needed:

import dynamic from "next/dynamic";

const DynamicIframe = dynamic(() => import("@/components/DynamicIframe"), {
  ssr: false, // Ensures it runs only on the client
});

const Page = () => {
  const htmlContent = `
    <h1>Hello from Iframe</h1>
    <p>This is dynamic content.</p>
  `;

  return <DynamicIframe htmlContent={htmlContent} />;
};

export default Page;

Final Thoughts

Why This Approach Works Well in Next.js

No manual script insertion required – The resizing script is automatically injected.
Encapsulation – HTML, scripts, and styles remain isolated.
Optimized for performance – Dynamically imported to avoid unnecessary rendering.
Self-adjusting height – No need to set a fixed height manually.

With this setup, you can efficiently embed HTML from your CMS inside Next.js without worrying about layout issues or script execution.

Let me know if you have any questions or if there are additional tweaks you'd like to see!

Why Use an <iframe> Instead of dangerouslySetInnerHTML?

Advantages of Using an <iframe>

When an <iframe> Might Not Be Ideal

Embedding HTML in an <iframe> with Automatic Resizing

Step 1: Create the DynamicIframe Component