建置的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 } 從 '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 嗎？