Next.js生产环境TopBar组件重复渲染问题求助

核心问题 #

1. 重复嵌套根布局：Next.js App Router 中，app/layout.tsx 是全局根布局，会自动包裹所有页面组件。你在 app/page.tsx 里手动导入并使用 <RootLayout> 包裹页面内容，导致页面被两层根布局嵌套，因此出现两个 TopBar。
2. 组件导入路径错误：layout.tsx 中导入 TopBar 的路径是 ./components/topbar/page，但实际组件文件是 ./components/topbar/component.tsx，路径不匹配可能引发额外渲染问题。

修复步骤 #

步骤1：修正 app/page.tsx，移除手动嵌套的根布局 #

页面组件不需要手动引用根布局，直接返回页面内容即可：

// app/page.tsx
import Head from 'next/head';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import '@fortawesome/fontawesome-free/css/all.min.css';
import { faBitcoin, faEthereum, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
import { faEnvelopeOpen } from '@fortawesome/free-solid-svg-icons'

const MyPage = () => (
  <>
    <Head>
      <meta charSet="UTF-8" />
      <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"
      />
      <title>lunar</title>
      <meta property="og:title" content="example.com" />
      <meta property="og:description" content="sup" />
      <link
        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&amp;family=IBM+Plex+Sans&amp;display=swap"
        rel="stylesheet"
      />
    </Head>

    <div className='main'>
      <article>
        <header className='profile-header'>
          <div className="profile-title"><img src="/images/1.png" />
            <h1 className="rainbow">lunar</h1>
          </div>
          <div className="social-list">
          </div>
        </header>
      </article>
    </div>

    <div className="post-content">
      <h2>Post Content</h2>
      <p>Example</p>
      <p>Welcome to my Website!</p>
    </div>
  </>
);

export default MyPage;

步骤2：修正 layout.tsx 中的 TopBar 导入路径 #

把错误的导入路径改为实际组件文件路径：

// layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import React from 'react';
import Head from "next/head";
// 修正导入路径
import TopBar from "./components/topbar/component";

export const metadata: Metadata = {
  title: "Website",
  description: "My Description",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body style={{ fontFamily: 'IBM Plex Sans, sans-serif' }}>
        <div className="container">
          <TopBar/>
          {children}
        </div>
      </body>
    </html>
  );
}

验证说明 #

修改后，根布局会自动包裹页面内容，只会渲染一次 TopBar。同域跳转显示正常是因为客户端导航时的渲染逻辑避免了重复嵌套，但刷新页面时服务端渲染会触发双重嵌套，导致出现两个TopBar，修正后即可解决该问题。

内容的提问来源于stack exchange，提问作者lunar