I have a Next.js application that embeds a Streamlit app within an iframe on a specific subpage. I'm utilizing Next.js's App Router to manage navigation within my application. The Streamlit app is designed to send messages to the Next.js parent window using window.parent.postMessage(), but I'm encountering an issue where the message sent from the iframe is not being captured by the event listener set up in the parent window, specifically within the component that renders the iframe.

### Problem Overview

- Setup: My Next.js app has a subpage that includes an iframe embedding a Streamlit app.
- Expected Behavior: The Streamlit app sends a message to the Next.js parent window using postMessage, and I expect to catch this message in the parent window to trigger specific actions.
- Actual Behavior: The message sent from the iframe does not seem to be caught by the message event listener in the Next.js parent window.

### Code Snippets

Streamlit App (Sending Message):

js = f"""
// Simplified version of the script used in the Streamlit app to send a message
window.parent.postMessage({ type: "TOKENS_USED", data: { totalTokensUsed: 1234 } }, "*");
"""

st.components.v1.html(js, height=0)

Next.js Subpage (Receiving Message):

import React, { useEffect } from 'react';

const StreamlitPage = () => {
  useEffect(() => {
    const handleMessage = (event) => {
      if (event.data.type === "TOKENS_USED") {
        console.log("Message received in Next.js:", event.data);
      }
    };

    window.addEventListener('message', handleMessage);

    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, []);

  return (
    <iframe src="URL_TO_STREAMLIT_APP" style={{ width: '100%', height: '100vh' }} />
  );
};

export default StreamlitPage;

### Attempts to Resolve

- I've verified that the Streamlit app correctly sends the message by listening to the message event on a simple HTML page.
- I ensured that the message listener is added on component mount and removed on component unmount in the Next.js app.
- I've experimented with different message structures and target origins in the postMessage call.
- Researched all stackoverflow
- Reseached this discord channel
- Annoyed myself witht ChatGPT 😄

### Questions

1. Are there any known issues with postMessage communication between an iframe and its parent window in Next.js apps, especially when using the App Router?
2. Could Next.js's page routing or SSR/SSG mechanisms be interfering with how message events are captured or handled?
3. Is there a recommended approach or best practice for setting up inter-window communication in a Next.js application that involves iframes?

Any insights, suggestions, or examples from those who have successfully implemented iframe communication in Next.js would be greatly appreciated.