Next.js 에서 Mui사용하기

간단한 Grid시스템은 Bootstrap을 사용하는데 전체적인 내브바부터 여러 필요한 디자인 컴포넌트들을

 

Mui로 구성하기로 했다.

 

React와 사용방법은 거의비슷하다.

https://mui.com/getting-started/installation/

Installation - MUI

npm

To install and save in your package.json dependencies, run:

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

// with npm
npm install @mui/material @mui/styled-engine-sc styled-components

// with yarn
yarn add @mui/material @mui/styled-engine-sc styled-components

npm이나 yarn중 하나를골라서 하나씩만 설치해주면된다.

 

Roboto font

MUI was designed with the Roboto font in mind. So be sure to follow these instructions. For instance, via Google Web Fonts:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Font icons

To use the font Icon component, you must first add the Material icons font. Here are some instructions on how to do so. For instance, via Google Web Fonts:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

위기능들은 필요하면 추가로 사용해주면 된다.

둘다 상세 정보를보면

Install with npm

You can install it by typing the below command in your terminal:

npm install @fontsource/roboto

Then, you can import it in your entry-point.

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

이와같이 import해서 사용할 수 있다.