Next.js 15 mui 프레임워크 적용시 에러 해결 방법

Next.js 15 mui 프레임워크 적용시 에러 해결 방법

---

목차

1. 오류 원인

2. 해결 방법

 

 

---

1. 오류 원인

 

npx create-next-app@latest {projectName} 이와 같이 프로젝트 생성시 아래와 같이 프로젝트가 생성이 됩니다.

package.json을 확인해보면 버전이 다음과 같습니다.
Next.js : 15.0.2

react : 19.0.0-rc-02c0e824-20241028

 

 

2. 해결 방법

1. 프로젝트를 설치하면서, 간과 했던 부분이 node version 이었고 nvm으로 node version을 올렸습니다

peter@juyoung blog-user % npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: blog-user@0.1.0
npm WARN Found: react@19.0.0-rc-02c0e824-20241028
npm WARN node_modules/react
npm WARN   react@"^18" from the root project
npm WARN   3 more (next, react-dom, styled-jsx)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"19.0.0-rc-02c0e824-20241028" from react-dom@19.0.0-rc-02c0e824-20241028
npm WARN node_modules/react-dom
npm WARN   react-dom@"^18" from the root project
npm WARN   1 more (next)
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'next@15.0.2',
npm WARN EBADENGINE   required: { node: '>=18.18.0' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }

 

즉 next.js 버전이 15 이상이 되면서 node version 을 요구하게 되었습니다.

 

2. 버전을 올리고 mui 프레임워크 를 설치 명령어를 입력했지만, 설치가 안되어 react 버전을 18.2.0 으로 변경하였습니다.

 

3. 다음과 같이 명령어를 작성했습니다.

- --legacy-peer-deps를 작성하여 설치는 했지만, 적용이 안되었습니다.

npm install @mui/material-nextjs @emotion/cache --legacy-peer-deps

 

- 위의 것으로 해결이 되지 않아서 다음과 같이 추가 명령어를 작성했습니다.

npm install @mui/material @emotion/react @emotion/styled  --legacy-peer-deps

 

- 결과

 

 

** 함께 보면 좋은글(?)

next.js 15 버젼 react rc 이슈 : https://github.com/mui/material-ui/issues/44203

Cannot install React RC with Material UI · Issue #44203 · mui/material-ui

 

 

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.