next.js13 app dir mui tailwindcss starter kit 보일러 플레이트

😎next.js13 app router tailwind ts mui를 한번에 하는 starter kit이 있다?

https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts

 

그것은 공식 레포의 examples이었구요

마침 app 라우터에서도 mui를 쓰고싶었는데 앱라우터도 스테이블이 된지 꽤..시간이 되었단 생각이 들어서

혹시 공식 레포에 보일러플레이트가 올라와있지 않을까? 하는 기대로 봤더니

있더라구요... 초기 환경 세팅은 고통스럽기만 하고 어... 해보면 쓸모가 있긴한데.. 고통스럽죠..

 

https://github.com/XionWCFM/vite-mui

GitHub - XionWCFM/vite-mui: vite-mui

특히 이 vite-mui 보일러플레이트를 제작할 때 많이 힘들었었던 기억이 나는데

이번에는 다른 사람이 열심히 만든걸 받아와서 제 취향에 맞게 조금 커스터마이징 하는 정도로 쓰려고합니다.

 

원래 생각으로는 저 보일러플레이트만 받아오고싶었지만

윈도우에서는 제한사항이 조금 있는 것 같네요

mui 레포를 통째로 clone 받은 뒤 필요한 부분만 빼오겠습니다.

---

제가 원하던 보일러플레이트네요

app 라우터에서 mui를 바로 사용할 수 있습니다.

그런데 조금 문제가 있습니다.

기묘한 워닝이 뜨네요

해당 워닝으로 접근해보겠습니다.

https://tailwindcss.com/docs/using-with-preprocessors#nesting

Using with Preprocessors - Tailwind CSS

css 전처리기와 함께 사용하는 경우에는 위 매뉴얼을 따라달라고하네요

아무래도 이부분은 보완해두지 않았나봅니다.

npm install -D postcss-import

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  }
}

공식문서에서 안내해주는대로 이와 같은 설정을 추가해주면 해결됩니다.

{
  "name": "base-next-app-router-tailwind-ts",
  "version": "5.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
  },
  "dependencies": {
    "@mui/base": "latest",
    "clsx": "latest",
    "next": "13.x",
    "react": "18.x",
    "react-dom": "18.x"
  },
  "devDependencies": {
    "@types/node": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "autoprefixer": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "postcss": "latest",
    "postcss-nesting": "^12.0.0",
    "tailwindcss": "latest",
    "typescript": "latest"
  }
}

종속성은 이러한 형태가 됩니다.

특이한 부분은 @mui/base 라이브러리를 이용하고 있다는 것입니다.

처음 보는 형태라서 조금 찾아보니 아직 베타버전인 라이브러리네요

https://mui.com/base-ui/getting-started/

Overview - Base UI

 

Emotion을 기본 스타일 엔진으로 사용하는 것에서 벗어났다는게 가장 특징적인 부분인 것 같습니다.

향후 v6 부터는 이 baseui 구조를 채택할 것이라고 하니 미래가 창창하네요

아무래도 app 라우터는 서버컴포넌트가 기본이다보니 emotion에 의존하는 mui는

앱 라우터에서 사용하기 어려운 지점들이 분명히 존재했었는데

이 문제가 향후에는 해소될 수 있...을지도 모르겠네요

 

다만 아쉬운건 원래 mui의 유려한 디자인보다는 내가 직접 짜놓은 tailwind 느낌이 되기 쉬운것같아요

https://mui.com/base-ui/react-button/

React Button component and hook - Base UI

위 링크에서 baseui가 제공하는 버튼을 체험해볼 수 있습니다.

2023/07/27 기준에서는 아직 제공하는 컴포넌트도 많이 나와있지않고

조금 아쉬운 지점들이 많네요

 

개인적인 생각으로는 mui팀도 최근 대세가 된 next.js 등의 프레임워크들의 지원을 고려하여

css 프레임워크들에게서 자유로운 형태로 발전하려고 한다는 느낌을 받았습니다.

하지만... 아직은 바로 써보기엔 문제가 좀 있어보이네요

사실 이정도 기능밖에 제공해주지 않는다면 제 개인적인 감상으로는 굳이 mui를 쓸 필요가 있을까? 싶습니다.

 

그런 느낌을 받을 저같은 사람들을 위한 plan도 존재하니 저는 이쪽으로 틀어봐야겠네요

---

baseui말고 emotion을 사용하는 mui starter kit

어느정도 만들어진 예제를 보여주기도하네요

import * as React from 'react';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function TasksPage() {
  return (
    <Container>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Typography variant="body1" gutterBottom>
          Tasks Page
        </Typography>
      </Box>
    </Container>
  );
}

내부코드는 이런형태로 작성되어있습니다.

굳이 막 다른걸 건드려줄 필요는 없어보이지만 

{
  "name": "material-next-app-router-ts",
  "version": "5.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
  },
  "dependencies": {
    "@emotion/cache": "latest",
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/icons-material": "latest",
    "@mui/material": "latest",
    "next": "13.x",
    "react": "18.x",
    "react-dom": "18.x"
  },
  "devDependencies": {
    "@types/node": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "typescript": "latest"
  }
}

종속성이 조금 횡하긴합니다.

이것저것 깔아줘야할게 많아보이네요

그래도 mui 설정을 쉽게 가져올 수 있으니 아주 좋은 것 같습니다.

 

제 취향이 조금 더 많이 반영된

next.js app mui ts 보일러플레이트는 아래 깃허브 링크에서 확인하실 수 있습니다.

https://github.com/XionWCFM/nextjs-app-mui-ts-starter

GitHub - XionWCFM/nextjs-app-mui-ts-starter