Render iFrame URL based on browser URL

[mikecfisher]

Summary

I am migrating a legacy php app to Next 13 with the app router. I want to have my new next app be able to render legacy PHP pages inside it via an iFrame so I can slowly migrate to Next in production.

Lets say I have a URL

www.mysite.com/account (this loads a nextjs page)
www.mysite.com/account/basic-info.php (this loads a nextjs page that renders a special iFrame component I wrote).

The way I'm doing this is using Nextjs's catch-all dynamic routes. I have a folder [...slug] inside /account.
It takes params.slug and passes it to an IFrame react component I have that builds up a string. This works ok.

These legacy iFrame pages also have links in them that I want to work and update the URL. I am doing this via the post message API.

    window.addEventListener('message', handleFrameMessage);

  const handleLoadEvent = useCallback(
    (payload: Payload) => {
      if (payload.error) {
        notFound();
        return;
      }
      window.scrollTo({top: 0});

      if (payload.url?.startsWith('/signin.php')) {
        window.location.href = window.location.origin.replace('www', 'admin') + payload.url;
      }

      document.title = payload.title || '';
      setPageSize(payload.width || 0, payload.height || 0);
      push(`/account${payload.url}`);
    },
    [push, replace, update]
  );
  const handleFrameMessage = useCallback(
    (event: MessageEvent) => {
      const frameOrigin = frameRef.current ? new URL(frameRef.current.src).origin : '';
      if (!event.isTrusted || event.origin !== frameOrigin) return;

      try {
        const payload: Payload = JSON.parse(event.data);

        switch (payload.event) {
          case 'load':
            handleLoadEvent(payload);
            break;
          case 'redirect':
            replace(payload.url || '');
            break;
          default:
            console.error(`Unknown event type: ${payload.event}`);
        }
      } catch (e) {
        console.error('Unable to parse JSON payload in message event');
      }
    },
    [replace, handleLoadEvent, frameRef]
  );

This works for the most part, but I'm noticing a weird behavior. When I click on a link inside an iframe it renders the new iframe page quickly, then refreshes pauses for a few seconds then re-renders the iframe page.

I believe this is happening because I'm changing the browser URL inside a page that is controlled by NextJS's router.

Does anyone have any idea how to fix this, or perhaps an alternative way to handle iFrame rendering like this inside a next app.

Thanks!

Additional information

No response

Example

No response

[v0ry]

did you ever come up with a solution?