[Vercel] localhost와 vercel 배포 사이트가 다른 이유

Question

Next.js 14버전을 사용중입니다.

localhost:3000으로 작업한 것을 vercel로 배포했는데
styeld-components로 스타일링 한 것이 적용이 안 돼요 ㅜㅜ

localhost는 적용이 잘 돼서 어느 부분을 고쳐야 할지 감이 안 잡히네요 ..

도와주시면 감사하겠습니다.

김인후 · Answer

로컬에서 빌드 후에 production으로 실행해도 잘 적용되나요?

소지우 · Answer

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