Back button with iframe on page

Bug report

When having a page with an <iframe> with a dynamic src (ie based on a slug, eg /post/react, and /post/angular ) the back button navigates the iframe itself, and not the main application, even when the iframe is not in focus. The behavior does not occur when the iframe does not have a src, or has a static src. The issue occurs both when the src points to the same application or to an external site.

To Reproduce

I have created a somewhat minimal repo: https://github.com/ReinoutStevens/nextjs-backbutton

The iframe and the main page should always show the same slug, but this is not the case. Press one of the links, press the back button and notice how the iframe navigates back, but not the main application.

Initial visit:

Click link:

Go back:

System information

• OS: Ubuntu
• Browser: Chrome Version 75.0.3770.80 (Official Build) (64-bit). Also occurs in Firefox
• Version of Next.js: 9.0.2 and latest

[ReinoutStevens]

This issue has been solved by placing key={url} on the iframe. Not 100% sure why or how this solves it, but the behavior is now the way we would expect it.

This issue can be closed for me.

[bertrand-riviere]

Would there be a way to warn about iframes with variable src and no key configured when transpiling? I’d like to save others from spending a lot of time on this problem…

i agree with @nitzel, if not possible, this should, at least, be mentioned in Next.js doc (i guess in next/link doc) because fixing the issue with this “trick” is far from obvious