Vercel에 배포된 Next.js 앱은 특정 콘텐츠를 로컬로 렌더링하지만 프로덕션 빌드에서는 렌더링하지 못합니다.
Next.JS와 Firebase를 사용하여 구축하고 Vercel에 배포한 웹 앱이 있습니다. 최근 위치가 static, Bottom:0으로 설정된 하단 탐색 모음을 추가하기 전까지는 모든 것이 잘 작동했습니다.
하단 네비게이션 바에는 아이콘과 텍스트를 렌더링하고 있습니다. localhost(npm run dev 사용)에서는 제대로 로드되었지만 Vercel에 배포된 프로덕션 빌드에서는 하단 탐색 내용이 렌더링되지 않는다는 것을 깨달았습니다. 프로덕션 빌드에서는 하단 탐색 컨테이너(또는 div)만 렌더링됩니다. 내부 콘텐츠(아이콘 및 텍스트)는 렌더링되지 않습니다.
Chrome DevTools를 사용하여 확인한 결과 배포된 버전에서는 누락된 내부 콘텐츠가 Elements 아래에 표시되지 않았지만 localhost의 Elements 아래에는 표시되었습니다. 또한 동일한 결과로 React Components 플러그인을 사용해 보았습니다.
이런 일이 흔한가요? 해결 방법이 있나요?
아래는 아이콘과 텍스트(37~40행)를 보여주는 스크린샷입니다.
아래는 localhost의 내부 콘텐츠를 보여주는 하단 탐색 모음의 이미지입니다.
아래는 하단 네비게이션 바 이미지입니다, 표시되지 않음Vercel에 배포된 프로덕션 버전의 내부 내용
