NextJS部署Vercel后Header中模态框渲染异常求助

我的NextJS应用在localhost本地运行正常，但部署到Vercel后，基于状态管理本应隐藏的模态框（Modal）出现错误渲染，且模态框显示在Header区域而非预期的屏幕中央，本地环境无此问题。

效果对比 #

• 本地Header显示效果：
• 模态框正常显示效果：
• Vercel部署后异常效果：

Header组件代码 #

import { ConnectButton } from "web3uikit"
import Link from "next/link"
import ProceedsModal from "./ProceedsModal"
import SellModal from "./SellModal"
import { useState } from "react"

export default function Header() {
    const [showProceedsModal, setShowProceedsModal] = useState(false)
    const hideProceedsModal = () => {
        setShowProceedsModal(false)
    }
    const [showSellModal, setShowSellModal] = useState(false)
    const hideSellModal = () => {
        setShowSellModal(false)
    }

    function handleClick() {
        setShowProceedsModal(true)
    }

    function handleClick2() {
        setShowSellModal(true)
    }

    return (
        <nav className="p-2 border-b-2 border-neutral-300 flex flex-col md:flex-row justify-between items-center">
            <h1 className="flex flex-row py-2 px-4 items-center text-5xl text-gray-600 font-audiowide">
                <a href="/">
                    <img
                        className="min-w-[100px] min-h-[100px] hover:scale-125"
                        src="./kennel-club.svg"
                    />
                </a>
                Kennel Club NFTs
            </h1>
            <div className="flex flex-col md:flex-row items-center font-sourceCodePro">
                <Link href="/" className="mr-2 p-4 hover:scale-125 hover:text-blue-600">
                    Home
                </Link>
                <Link href="/browseNfts" className="mr-2 p-4 hover:scale-125 hover:text-blue-600">
                    Browse NFTs
                </Link>
                <div
                    className="cursor-pointer mr-2 p-4 hover:scale-125 hover:text-blue-600"
                    onClick={handleClick2}
                >
                    Sell NFTs
                </div>
                <div
                    className="cursor-pointer mr-2 p-4 hover:scale-125 hover:text-blue-600"
                    onClick={handleClick}
                >
                    Proceeds
                </div>
                <div>
                    <ProceedsModal onClose={hideProceedsModal} isVisible={showProceedsModal} />
                </div>

                <div>
                    <SellModal onClose={hideSellModal} isVisible={showSellModal} />
                </div>
                <ConnectButton moralisAuth={false} />
            </div>
        </nav>
    )
}

_app.js中Header的引入代码 #

import "../styles/globals.css"
import { MoralisProvider } from "react-moralis"
import Head from "next/head"
import { NotificationProvider } from "web3uikit"
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client"
import Header from "../components/Header"

const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: process.env.NEXT_PUBLIC_SUBGRAPH_URL,
})

function MyApp({ Component, pageProps }) {
    return (
        <div>
            <Head>
                <title>{"Kennel Club NFTs"}</title>
                <meta name="description" content="Kennel Club NFTs" />
                <link rel="icon" href="/kennel-club.svg" />
            </Head>
            <MoralisProvider initializeOnMount={false}>
                <ApolloProvider client={client}>
                    <NotificationProvider>
                        <Header />
                        <Component {...pageProps} />
                    </NotificationProvider>
                </ApolloProvider>
            </MoralisProvider>
        </div>
    )
}

export default MyApp

已尝试方案：将相关useState钩子移至_app.js，在单独页面渲染Header组件，均未解决问题。

1. 修正模态框定位上下文
   检查ProceedsModal和SellModal组件的样式，确保模态框容器使用position: fixed，且父元素（Header的<nav>或内部<div>）未设置position: relative——后者会导致模态框相对于父元素定位，而非屏幕中央。

2. 解决服务端渲染与客户端 hydration 不一致问题
   Vercel的生产构建会启用SSG/SSR，可能导致初始状态在服务端和客户端不匹配。尝试：

   • 用useEffect确保状态仅在客户端初始化：

     useEffect(() => {
       setShowProceedsModal(false);
       setShowSellModal(false);
     }, []);
     

   • 动态导入模态框并禁用SSR：

     import dynamic from 'next/dynamic';
     const ProceedsModal = dynamic(() => import('./ProceedsModal'), { ssr: false });
     const SellModal = dynamic(() => import('./SellModal'), { ssr: false });
     

3. 排查生产环境样式丢失问题
   Vercel的CSS tree shaking可能误删模态框样式。可以将模态框的关键样式（如定位、遮罩层）内联到组件中，或在globals.css中标记为不可移除。

4. 升级或排查web3uikit兼容性
   检查当前web3uikit版本是否存在NextJS生产环境的已知问题，尝试升级到最新版本，或查阅其官方文档的部署注意事项。

5. 将模态框挂载到全局根节点
   使用React.createPortal将模态框渲染到document.body下，脱离Header的布局层级：

   import { createPortal } from 'react-dom';
   
   // 在Modal组件内部
   return createPortal(
     <div className="fixed inset-0 flex items-center justify-center z-50">
       {/* 模态框内容 */}
     </div>,
     document.body
   );
   

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