Next.js와 MUI의 병용이 더 쉬워졌다!
Next.js와 MUI의 병용이 더 쉬워졌다! Next.js 및 MUI를 함께 사용하자 (feat. Tailwind CSS) 바로 저번 주까지만 해도 Next.js와 MUI를 함께 사용하려면 캐시 처리 및 인젝션 오더 설정용 프로바이더를 직접 공식 문서에 따라 만들고 커스텀해 삽입하는 노가다가 필요했다. 하지만 이제 그럴 필요가 없어진 것 같다. 포트폴리오용 사이트를 제작하기 위해 MUI 문서 를 들어가보니 새로운 방법이 제시되어 있었기 때문이다. 변경된 사용 방법 우선 각 단계를 진행하기 전에 기본적인 MUI 구성 은 완료되어 있어야 한다. 또한 문서에서는 Next.js 13 이상에서 진행하기를 권장하고 있다. 나는 pnpm 패키지 매니저를 사용하므로 다른 패키지 매니저를 사용한다면 적절히 변환해서 사용하면 된다. App Router에서 사용하기 1. 필요한 패키지 설치 : pnpm add @mui/material-nextjs @emotion/cache 명령어로 필요한 의존성을 추가한다. 2. 설정 : app/layout.tsx 에서 AppRouterCacheProvider 를 사용해 <body> 안의 요소를 감싼다. // app/layout.tsx + import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14 export default function RootLayout(props) { const { children } = props; return ( <html lang="en"> <body> + <AppRouterCacheProvider>{children}</AppRouterCacheProvider>