-
Material-Tailwind 사용한 Next.js 프로젝트 만들기Next.js 2025. 3. 14. 08:58
* 개요
- 현재 Material-Tailwind가 V3 까지 베타가 나와있으나, 필자는 Next.js 15 버전에서 프로젝트를 만들면서 무수한 에러와 부딫치게 되었다. 그래서 아래는 속편히 잘 돌아가는 버전을 고정해서 사용하는것으로 정리한다.
* 프로젝트 생성
// 노드 18.19.1 버전이 잘 맞더라 nvm install 18.19.1 nvm use 18.19.1 // 15버전이 있지만 14버전에서 안정적이다. npx create-next-app@14 myProject // mt 패키지 설치 npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --save npm install @tailwindcss/typography autoprefixer --save-dev* package.json 버전 조정
- 아래 버전 조정해준 다음 node_module 삭제 후 npm install 다시 해준다.
"typescript": "5.2.2" "@types/react": "18.2.19",* configuration 수정
// tsconfig.json "baseUrl": ".", "allowJs": true,* tailwind.config.ts 설정
import type { Config } from "tailwindcss"; import withMT from "@material-tailwind/react/utils/withMT"; const config: Config = { content: [ "./utils/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: {}, plugins: [require("@tailwindcss/typography")], }; export default withMT(config);* mt provider 생성
// config/material-tailwind-theme-provider.tsx "use client"; export { ThemeProvider } from "@material-tailwind/react";* layout.ts 프로바이더 감싸주기
import { ThemeProvider } from "config/material-tailwind-theme-provider"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <ThemeProvider>{children}</ThemeProvider> </body> </html> ); }* font-awesome 사용 설정
// app/layout.ts <html lang="en"> //---- 이 부분 삽입 ---- <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossOrigin="anonymous" referrerPolicy="no-referrer" /> </head> // ------------------ <body className={inter.className}> <ReactQueryClientProvider> <ThemeProvider>{children}</ThemeProvider> </ReactQueryClientProvider> </body> </html>* 결과
- 아래와 같이 잘됨!!
- 늘 최신버전을 사용하는 주의인데 이젠 그러지 말아야 겠다 싶었다.
