🤍 은지log 🤍

🍓 프로젝트 세팅 필요한 디펜던시를 설치합니다. npm i -D babel-plugin-styled-component 🍓 .babelrc 먼저 바벨 파일을 수정합니다. 아래 파일은 next.js의 ssr과 연관이 있는데, ssr에 의해 styled-components 스타일이 적용 전에 화면 렌더링이 되는 문제를 방지하기 위함입니다. { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true, "ssr": true } ] ] } NextJS에서 Styled-components 사용하기 npm i styled-components n..

🍓 프로젝트 세팅 next 프로젝트를 설치하고 이후 필요한 디펜던시를 설치합니다. npx create-next-app my-app cd my-app npm i @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles nextjs는 서버사이드랜더링을 하기 때문에 react에서 mui를 사용하는 것 처럼 손쉽게 반영 되지 않습니다. 그래서 몇가지 사전작업을 해야합니다. 🍓 _document.tsx _document는 서버사이드에 관여하는 로직 또는 static한 로직을 추가하는데 사용합니다. (_document가 하는 일을 잘 모르겠다면 nextjs 기본 (opens new window)이 포스팅을 참조해주세요.) ssr 지원을..