개발자
[Vercel] localhost와 vercel 배포 사이트가 다른 이유
Next.js 14버전을 사용중입니다. localhost:3000으로 작업한 것을 vercel로 배포했는데 styeld-components로 스타일링 한 것이 적용이 안 돼요 ㅜㅜ localhost는 적용이 잘 돼서 어느 부분을 고쳐야 할지 감이 안 잡히네요 .. 도와주시면 감사하겠습니다.
답변 2
로컬에서 빌드 후에 production으로 실행해도 잘 적용되나요?
NextJS의 pre-rendering 동작으로 HTML 페이지를 미리 렌더링하게 됩니다. 이때, CSS-in-JS를 통해 스타일링을 할 경우 위와 같은 현상이 발생할 수 있습니다. CSS-in-JS는 자바스크립트로 CSS를 작성하는 방식을 말합니다. 따라서 pre-rendering 후, 자바스크립트를 불러오기 때문에 스타일링 처리가 되지 않아, 적용되지 않은 화면의 문제가 발생할 수 있을 거 같습니다. 로컬 환경에서 npm run build -> npm run start를 하였을 경우에도 발생한다면 위와 같은 원인으로 인해 발생하는 이슈라고 생각듭니다. babel-plugin-styled-components 모듈을 통해 처리를 해보셨을까요? 관련 참고 자료 전달드립니다! https://www.samsungsds.com/kr/insights/web_component.html https://velog.io/@eunnbi/NextJS-styled-components%EC%99%80-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 05월 20일
전형적으로 localhost와 배포 버전 사이에 스타일 차이가 나타나는 이유는 다음과 같을 수 있습니다: 1. **Server-side Rendering(SSR)과 Client-side Rendering(CSR) 차이**: Next.js는 서버사이드 렌더링을 지원하므로, 로컬에서의 CSR과 배포된 SSR간에서 스타일 차이가 있을 수 있습니다. 2. **환경설정의 차이**: 로컬 개발 환경과 프로덕션 환경 간에 차이가 있을 수 있습니다. 이런 경우, 프로덕션에서만 발생하는 문제를 디버깅하기 위해선 프로덕션 환경을 모방하는 방법을 사용해야합니다. 3. **styled-components 설정 오류**: styled-components는 서버사이드 렌더링과 함께 사용될 때 추가 설정이 필요합니다. `.babelrc` 파일에 아래 plugin들을 추가해야합니다. ```json { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true } ] ] } ``` 4. **빌드 에러 혹은 경고 확인**: vercel의 빌드 과정에서 발생한 에러 혹은 경고 메시지를 확인해보세요. 그 중에 해결 단서가 있을 수도 있습니다. 위 항목들 중에서 여러분이 겪고 있는 문제를 해결하는 데 도움이 될만한 점을 찾아보세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!