intro
Next.js 13의 새로운 기능인 'app Directory' 환경에서 Material UI (이하 MUI)를 적용하는 방법을 정리 합니다.
특별히 어려운 부분은 없고, 기록 차원에서 정리 하고자 합니다.
Project 생성
$ npx create-next-app@latest --experimental-appMUI Package 설치
$ yarn add @mui/material @emotion/react @emotion/styledMUI 설정
// app/globals.css
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...구글 Roboto폰트와 Meterial Icon을 설정 합니다.
MUI 테마 파일 생성
//
// app/theme.js
//
import { createTheme } from '@mui/material/styles';
// Create a theme instance.
const theme = createTheme({
palette: {
mode: "light",
},
});
export default theme;테마를 설정 합니다.
정의되어있지 않은 custom variables을 추가하여 사용할 경우, 타입스크립트(.ts)는 인터페이스를 다시 정의 해 주어야 해서 복잡합니다. 테마 만큼은 자바스크립트(.js)를 추천 합니다.
layout.tsx 수정
//
// app/layout.tsx
//
'use client';
import './globals.css';
import theme from './theme';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head />
<ThemeProvider theme={theme}>
<CssBaseline />
<body>{children}</body>
</ThemeProvider>
</html>
);
}
- 'use client'를 추가하여 client component로 정의 하였습니다.
- 브라우저의 스타일 노멀라이즈 하기 위해 <CssBaseline .../>을 추가 하였습니다.
- MUI의 <ThemeProvider ...> 를 적용하였습니다.
'app/theme.ts'를 수정하여 전체 MUI콤포넌트가 사용할 theme를 지정 및 변경할 수 있습니다.
하위 Page에서 createTheme를 사용하여 오버라이딩 할 수도 있습니다.
Conculution
MUI의 공식 Github(Next.js 샘플)에는 emotion cache server와 client 설정 부분이 있는데, (SSR 지원 등) 이부분은 맞지 않는것 같아 모두 삭제 하였습니다. 이 부분은, 앞으로 app Directory를 위한 새로운 가이드가 나오지 않을까 생각 됩니다.
MUI의 UI 콤포넌트는 대부분 client component로 코딩 되어있는것 같습니다. 아직까지는 MUI사용을 위해 "use client" 를 소스코드 최상단에 추가하여야 합니다.
조금씩 사용하면서 내용을 수정 보완 하도록 하겠습니다.
아직도 개발하고 있는 개발자 입니다
혹시 SEO 부분에서 손해가 생기진 않을까요?