Next.JS 에서 styled components의 사용 Next.js 에서 React 에서 한것 처럼 styled component를 사용해서 작업을 하게되면 처음에는 잘 적용되는 것 처럼 보이지만, 새로고침을 하게되면 이내 css가 적용되지않고 브라우저가 에러를 발생시킨다 이는 styled-component는 hash 값으로 스타일 관리를 하는데 Next.js에서 클라이언트 사이드와 서버사이드에서 생성된 해시값이 달라서 Classname이 매칭되지 않는데에서 오는 오류이다 이 때문에 따로 몇가지 설정을 해주어야한다 해결방법😀 모듈 설치 styled components를 위한 babel 모듈을 설치하고, 적용해주어야한다 설치 하는 방법은 아래와 같다 //dev dependancies로 babel-pl..

Next.JS Next.js 는 React로 서버사이드랜더링 (SSR)을 구현할 수 있는 라이브러리이다. 프론트엔드 생태계에서 아주 큰 지분을 차지하고 있는 Vercel이라는 회사에서 만들었고, 리액트에서 권고하는 툴체인 중 하나로 언급되는 툴이다. Next.JS 는 Node.js 환경에서 서버사이드 렌더링이 되는 웹사이트를 빌드할 때의 해결책으로 권고된다. SSR 의 장점 서버사이드 랜더링의 장점으로는 SEO최적화와, 초기 랜더링 속도의 상승을 꼽을 수 있다. React로 만들어진 SPA 웹사이트의 특성상 자바스크립트(React 코드) 가 화면에 랜더링 되기 전까지는 아무것도 보이지 않는 흰 화면만 보이게된다. 서버로부터 완전한 자바스크립트 파일을 다 받아오기 전까지 화면이 표시되지 않기때문인데, 이는..