构建的Next.js应用在加载片刻后突然消失，但在开发环境中正常运行

Question

我的next.js项目使用typescript在开发环境中运行得很好，但是当构建npm run build时，页面加载后就消失了。我认为这与布局页面有关，但我不确定。我在控制台中得到了以下信息。

未捕获的错误：缩小的React错误＃418；访问https://reactjs.org/docs/error-decoder.html?invariant=418获取完整的消息，或者在完整错误和其他有用的警告的非缩小开发环境中使用。 未捕获的错误：缩小的React错误＃423；访问https://reactjs.org/docs/error-decoder.html?invariant=423获取完整的消息，或者在完整错误和其他有用的警告的非缩小开发环境中使用。 DOMException：在“Node”上执行“appendChild”失败：文档上只允许一个元素。 DOMException：在“Node”上执行“removeChild”失败：“要删除的节点不是此节点的子节点。”

layout.tsx

import './globals.css'
import type { Metadata } from 'next'
// import { Inter } from 'next/font/google'
import Navbar from '../components/Navbar'
import Image from 'next/image'
// const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'redacted',
  description: '个人网站',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="relative">
      <div className="-z-1 bg-night absolute inset-0">
        <div className="fixed w-screen h-screen pointer-events-none bg-scroll">
          <Image src="/bg-circle.png" alt={''} layout="fill" objectFit="cover" />
        </div>
      </div>
      <div className='flex justify-center'>
        <div className="fixed z-10 w-2/5">
          <Navbar />
        </div>
      </div>

      
      <div className="relative z-0">{children}</div>
    </div>
  )
}

我尝试编辑{children}组件的部分，但似乎没有任何作用。

Answer 1

你尝试过使用 React.ReactNode[] 类型来输入 children 吗？