[React MUI] - 1분만에 nextjs, material ui, typescript 설치 및 사용하기

요약

1. Material-UI, NextJS, Typescript 적용된 프로젝트 다운로드

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs-with-typescript

 

2. 폴더 이동 후 패키지 설치

cd nextjs-with-typescript && npm install

 

3. 실행 (아래는 실행결과)

npm run dev

NextJS, MUI, Typescript 실행 초기 화면

 

 

주의 사항

package.json에 의존성들이 모두 latest로 되어 있음으로 배포시 문제가 생길 수 있다.

설치시 package.json 기본값이 latest

 

따라서 학습용이 아니라면 패키지들을 모두 개별로 설치 해주자. (혹은 버전을 모두 적어주거나)

npm install @emotion/cache @emotion/react @emotion/server @emotion/styled @mui/icons-material @mui/material next react react-dom @types/node @types/react eslint eslint-config-next typescript

 

 

참고

Material-UI 공식사이트에 NextJS를 포함한 여러 프레임워크 및 라이브러리 연동 예제가 있다.

MUI 공식 홈페이지 example projects

 

또한 MUI 5는 기본 emotion을 사용하므로, styled-components가 좋다면 이를 사용할 수 있는 방법도 소개하고 있으니 필요하다면 참고.