Repeated Header in a next.js page using iframe and BBPress

[Wm-M-Thompson]

Summary

I am new to the tech stack of this issue. I am new to Next.JS and I am new to BBPress. But this is the tech stack of my "WEC MFG" website, https://excellencematter.net. My page.tsx for the interaction menu option has the <iframe> which contains the bbpress functionality.

Now, here is the bug. After a new user account is registered and the new user logs in, the web page is a mess. It looks as if the iframe nests an entire website so that it produces a look where the whole webpage has two navigation bars. I hope I am describing this accurately. Please view the screen shot.

I have done some work with adding "snippets", custom pages and "Additional CSS". But so far the problem has been resistant to my efforts. I need help. I will provide the code you need to detect this bug and solve this problem. Please help.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0trtbjg6ukyudwntawqv.png

Additional information

UPDATE:

There must be a usable and intelligent solution.  But I have also stumbled upon a temporary hack that will provide the immediate fix I need.

And here it is.  If a refresh is sent to the browser, the double navigation bar disappears.  So I need to find a way to do that programmatically.  Please help.  It goes without saying that I need to do this without falling into the logic of an infinite loop.

https://www.youtube.com/watch?v=tyb7hWZZlbs

Example

No response

[asaddevx]

Hey @Wm-M-Thompson,

Thank you for the clear explanation , the refresh hack is a great clue.

What's Actually Happening

Your page has a page.tsx with an <iframe> that loads BBPress. When a new user registers and logs in, BBPress is running its own full layout inside the iframe, which includes its own navigation bar. That navbar is getting added on top of your Next.js page's existing navbar, causing the double navigation bar.

Because BBPress was never designed to run inside an iframe on a parent app, it's trying to render a complete, standalone page rather than just the forum content block you want. A hard refresh works because the browser reloads everything and BBPress correctly detects it's already in an iframe and adjusts its output (or your refresh somehow resets the nesting state).

How to Fix It Permanently (No Refresh Hack)

Option 1 — Force BBPress to output only the content (recommended)

Add a custom function to your BBPress setup to strip the header/footer when loaded inside an iframe. In your theme's functions.php or via a small plugin:

add_action('template_redirect', function() {
    if (is_bbpress() && !empty($_SERVER['HTTP_SEC_FETCH_DEST']) && $_SERVER['HTTP_SEC_FETCH_DEST'] === 'iframe') {
        add_filter('bbp_use_theme_compat', '__return_false');
        add_action('bbp_template_include', function() { return BBP_PLUGIN_DIR . 'templates/default/bbpress/content-single-forum.php'; });
    }
});

This forces BBPress to serve only the content-single-forum template when it detects the request comes from an iframe. No double headers.

Option 2 — Modify your Next.js iframe

Add a load event listener that checks for duplicate elements after the iframe loads. If it finds a second navbar, it removes it. This is cleaner than a full page refresh:

<iframe
  src="/path/to/bbpress"
  onLoad={(e) => {
    const iframeDoc = e.currentTarget.contentDocument;
    if (iframeDoc && iframeDoc.querySelectorAll('.main-navigation').length > 1) {
      const secondNav = iframeDoc.querySelectorAll('.main-navigation')[1];
      secondNav?.remove();
    }
  }}
/>

Option 3 — The refresh without infinite loop

If you absolutely want to stick with the refresh approach, use a session flag to do it once per session, not every time:

useEffect(() => {
    const hasRefreshed = sessionStorage.getItem('bbpress_refreshed');
    if (!hasRefreshed && window.location.href.includes('bbpress') && document.querySelectorAll('.main-navigation').length > 1) {
        sessionStorage.setItem('bbpress_refreshed', 'true');
        window.location.reload();
    }
}, []);

Bottom Line

Option 1 fixes the root cause. Option 2 is a safe client-side fix if you can't modify PHP. Option 3 works but is a last resort. Pick the one you can implement.

[Himanip04]

It sounds like the iframe is loading a full page that already contains its own header/navigation, while your Next.js layout is also rendering another header around it. That is probably why you are seeing duplicated navigation bars after login.

Since a manual refresh fixes the issue, it may also be related to hydration or session state not updating correctly after authentication.

You could try:

• • checking if the iframe source includes the full site layout/header
• • using a minimal/embed page inside the iframe instead of the complete page
• • verifying whether the app router layout is re-rendering after login

Another thing worth checking is whether the authentication redirect is causing the iframe to mount before the session state is fully synchronized. In some Next.js app router cases, the initial render can briefly show stale layout state until hydration completes, especially when external content inside an iframe depends on authenticated cookies/session data.

As a temporary workaround, you can trigger a one-time refresh after successful login using router.refresh() or window.location.reload(), while making sure it only runs once to avoid loops.

[asaddevx]

Hey @Wm-M-Thompson,

Ignore the second comment. It is generic advice that misses the point. Himanip04 is wrong — this is not a hydration issue. The refresh hack works because it forces BBPress to re-run its template detection, not because of Next.js session state.

The Real Fix (Pick One)

Option 1 — Fix BBPress (best)
Add this to your theme's functions.php:

add_action('template_redirect', function() {
    if (is_bbpress() && !empty($_SERVER['HTTP_SEC_FETCH_DEST']) && $_SERVER['HTTP_SEC_FETCH_DEST'] === 'iframe') {
        add_filter('bbp_use_theme_compat', '__return_false');
    }
});

This tells BBPress: "If you are loaded inside an iframe, output ONLY the forum content, not the full page wrapper."

Option 2 — Client-side cleanup (if you cannot touch PHP)
Add a load event to your iframe that removes the duplicate navbar after it loads:

<iframe
  src="/path/to/bbpress"
  onLoad={(e) => {
    const doc = e.currentTarget.contentDocument;
    const secondNav = doc?.querySelectorAll('.main-navigation')[1];
    secondNav?.remove();
  }}
/>

Option 3 — One-time refresh (your hack, made safe)
Use sessionStorage to refresh exactly once per session:

useEffect(() => {
    if (!sessionStorage.getItem('bbpress_refreshed') && 
        document.querySelectorAll('.main-navigation').length > 1) {
        sessionStorage.setItem('bbpress_refreshed', 'true');
        window.location.reload();
    }
}, []);

Bottom Line

The second comment is wrong. This is not a Next.js hydration problem. BBPress is loading its full layout inside your iframe. Fix BBPress (Option 1) or remove the duplicate elements after load (Option 2). Pick one and mark this as answered.

[GitNimay]

This is a classic iframe + WordPress post-login redirect conflict, and your instinct about the refresh is pointing at the real cause.

What is actually happening

When BBPress completes a login or registration inside the iframe, WordPress redirects the user to the homepage (or the account page) as a full page load. Because this redirect happens inside the iframe, WordPress serves its full page template including the header, navigation, and footer inside the frame. Your Next.js layout then renders its own navigation around the iframe, giving you the double navbar effect.

The refresh fixes it because a clean page load re-establishes the iframe src from scratch rather than landing on the redirected WordPress URL.

The proper fix: control where BBPress redirects after login

Add this to your theme's functions.php or a site-specific plugin:

add_filter('bbp_login_redirect', 'custom_bbpress_login_redirect', 10, 3);
function custom_bbpress_login_redirect($redirect_to, $redirect_from, $user) {
    // Return only the forum path, not the full WordPress homepage
    return home_url('/forum/');
}

This keeps the redirect inside a URL that renders just the forum content without the full WordPress chrome, so the iframe stays clean.

Also suppress the WordPress header/footer inside the iframe

Add a custom page template for your BBPress page that strips the nav and header when loaded inside a frame:

add_action('template_redirect', function() {
    if (isset($_GET['iframe']) || wp_get_referer()) {
        // Or detect via header: if loaded in iframe, use minimal template
    }
});

A simpler CSS-only approach in your WordPress Additional CSS:

/* Hide WordPress nav when page is inside an iframe */
@media all {
    html.iframe-context .site-header,
    html.iframe-context .site-footer,
    html.iframe-context .main-navigation {
        display: none !important;
    }
}

Then in your Next.js iframe tag, append a query param and use JavaScript inside the iframe to detect it and add the class to <html>.

Your temporary refresh fix, done safely without an infinite loop

If you want to ship the refresh workaround immediately while you work on the proper fix, do this in your Next.js component:

useEffect(() => {
    const iframe = document.querySelector('iframe');
    if (!iframe) return;

    const handleLoad = () => {
        try {
            const iframeUrl = iframe.contentWindow?.location.href;
            // Only refresh once, using a flag in sessionStorage
            if (iframeUrl?.includes('loggedin=true') || 
                iframeUrl?.includes('wp-login')) {
                if (!sessionStorage.getItem('bbpress_refreshed')) {
                    sessionStorage.setItem('bbpress_refreshed', 'true');
                    window.location.reload();
                }
            } else {
                sessionStorage.removeItem('bbpress_refreshed');
            }
        } catch (e) {
            // Cross-origin errors are expected in some cases
        }
    };

    iframe.addEventListener('load', handleLoad);
    return () => iframe.removeEventListener('load', handleLoad);
}, []);

The sessionStorage flag is what prevents the infinite loop. It gets cleared when the user navigates away, so it resets naturally for the next session.

The long-term fix is the bbp_login_redirect filter since it solves the root cause rather than papering over the symptom.

[wanhei1]

This is a classic iframe + WordPress/BBPress issue, not a Next.js bug per se.

Root Cause

When a new user registers and logs in, BBPress redirects to a full page (including its own <header>/navigation). If your iframe's src points to that full page, you get two headers — your Next.js page header + BBPress's embedded header.

Solution

Option 1: Point iframe to a BBPress template without the header

In your WordPress theme, create a custom page template that excludes get_header():

<?php
/* Template Name: Iframe Embed */
// Skip get_header() — only render the content
get_template_part('content', 'bbpress');
get_footer();
?>

Then set your iframe src to a page using this template.

Option 2: Use CSS to hide the duplicate header inside the iframe

// page.tsx
<iframe
  src="https://excellencematter.net/forum"
  style={{ border: 'none', width: '100%', height: '100vh' }}
  onLoad={(e) => {
    try {
      const iframeDoc = e.currentTarget.contentDocument;
      iframeDoc?.querySelector('header')?.style.display = 'none';
    } catch (err) {
      // Cross-origin restriction — use Option 1 instead
    }
  }}
/>

Option 3: Use a dedicated BBPress embed route

Create a BBPress shortcode or custom route that only outputs the forum content without the WordPress shell. This is the cleanest approach for production.

Regarding the login redirect

After login, BBPress likely redirects to a full page. Configure the login redirect in WordPress:

// functions.php
add_filter('login_redirect', function($redirect_to, $request, $user) {
    return '/forum-embed'; // your iframe-friendly page
}, 10, 3);

This ensures post-login always lands on the embeddable version.