빌드된 Next.js 앱이 잠시 로드된 후 갑자기 사라지지만 개발 환경에서는 정상적으로 실행됩니다.

Question

typescript를 사용하는 next.js 프로젝트는 개발 환경에서 잘 실행되지만 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: '노드'의 'removeChild' 실패: '제거할 노드가 이 노드의 하위 노드가 아닙니다.'

layout.tsx

가져오기 './globals.css'
'next'에서 가져오기 유형 { 메타데이터 }
// 'next/font/google'에서 { Inter }를 가져옵니다.
'../comComponents/Navbar'에서 Navbar 가져오기
'다음/이미지'에서 이미지 가져오기
// const inter = Inter({ 하위 집합: ['latin'] })

const 메타데이터 내보내기: 메타데이터 = {
  제목: '수정됨',
  설명: '개인 웹사이트',
}

기본 함수 RootLayout 내보내기({
  어린이들,
}: {
  어린이: React.ReactNode
}) {
  반품 (
    <div className="상대적">
      <div className="-z-1 bg-night 절대 삽입-0">
        <div className="고정 w-화면 h-화면 포인터-이벤트-없음 bg-스크롤">
          <Image src="/bg-circle.png" alt={''} 레이아웃="채우기" objectFit="표지"
        </div>
      </div>
      <div className='flex justify-center'>
        <div className="고정 z-10 w-2/5">
          <나브바 />
        </div>
      </div>

      
      <div className="relative z-0">{어린이}</div>
    </div>
  )
}

{children} 구성요소를 편집해 보았지만 아무것도 작동하지 않는 것 같습니다.

Answer 1

어린이용 React.ReactNode[]타입을 사용해 보셨나요?