next.js 전용 ui framework이 있나? 궁금해서 검색해보니 ㅋㅋ 있네? 물론 회사 다니면서 실무 진행하는 개발자들은 디자인 팀이나 담당이 별도로 있으니까 큰 의미 없겠지만 난 혼자니깐 ㅋ 사실은 혼자 프론트 앤드, 벡엔드, 디자인까지 몽땅 다 해버리고 싶어 욕심을 부리고 있는데 ㅋㅋㅋ 대중이 좋아할만한 디자인 감각은 없으니까 ㅋㅋ 이런 건 framework!
링크는 아래에 https://nextui.org/ 👇
NextUI - Beautiful, fast and modern React UI Library
Make beautiful websites regardless of your design experience.
nextui.org
사실 nextui.org 말고도 mui라던지 react-bootstrap 이라던지 유명한 애들이 있어서 그거 쓰면 돼. 그런데 난 왠지 신상이 좋아서 ㅋㅋ
nextui 프로젝트는 Junior Garcia 라는 양반이 만들었는데 vercel이 스폰을 해주고 있네? 그럼 어느정도 퀄리티는 보장이 됐다고 볼래 ㅋ
npm 가서 보니 최근에 다운로드 수가 늘어나고 있는 추세고 주당 다운로드는 6800회 정도네. ㅎㅎ 물론 베타 버전이야 그러니까 실무에 사용하는 건 힘들겠지 ㅎㅎ 이런 프로젝트들은 계속 지켜보는게 인지상정!
간단하게 맛 좀 봐볼까? 설치야 뭐 말해 뭐해 간단하지. next.js 프로젝트에다가 yarn 이나 npm으로 설치해주면 돼.👇
yarn add @nextui-org/react
그리고 _document.tsx(.js) 파일 생성해주고 이미 있다면 추가해줘야 하고 👇
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
import { CssBaseline } from "@nextui-org/react";
import React from "react";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: React.Children.toArray([initialProps.styles]),
};
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;CssBaseline.flush() 이거 header에 넣어주는거 말고는 특별한 건 없는 듯. 그 다음에는 _app.tsx(js) 파일 수정 👇
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { NextUIProvider } from "@nextui-org/react";
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
return (
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;<NextUIProvider> 태그로 app component 감싸주면 끝. 초간단!
그리고 index.tsx(js)에다가 Button 하나 만들어보자고 ㅎ
import styles from "../styles/Home.module.css";
import { Button } from "@nextui-org/react";
export default function Home() {
return (
<div className={styles.container}>
<Button>Click Me!</Button>
</div>
);
}이렇게 하고 localhost 돌려보면 버튼 하나 보일거야.
음 . 끝. ㅋㅋㅋㅋ 사실 나도 이게 뭐가 좋은지 잘 몰라 ㅎㅎㅎ 이제부터 써보는 거지 ㅋㅋ 사실 nextui 메인 페이지에 버튼 펑펑 터지는 예제가 너무 정겨워서 해보기로 맘 먹은 거임 ㅋㅋ
그럼 우리도 똑같이 넣어 보자규 ㅋㅋ 먼저 canvas-confetti 페키지 다운받고 코드에 삽입.
yarn add canvas-confetti @types/canvas-confetti그리고 next.js에서 pages/index.tsx(js) 수정! 아래처럼 똭! 👇
import styles from "../styles/Home.module.css";
import { Button } from "@nextui-org/react";
import confetti from "canvas-confetti";
export default function Home() {
const handleConfetti = () => {
confetti({});
};
return (
<div className={styles.container}>
<Button
auto
rounded
ripple={false}
size="xl"
onClick={handleConfetti}
css={{
background: "$white",
fontWeight: "$semibold",
boxShadow: "$md",
position: "relative",
overflow: "visible",
color: "#0F9549",
px: "$18",
"&:after": {
content: '""',
position: "absolute",
width: "100%",
height: "100%",
background: "$white",
opacity: 1,
borderRadius: "$pill",
transition: "all 0.4s ease",
},
"&:hover": {
transform: "translateY(-5px)",
"&:after": {
transform: "scaleX(1.5) scaleY(1.6)",
opacity: 0,
},
},
"&:active": {
transform: "translateY(-2px)",
},
}}
>
Click Me!
</Button>
</div>
);
}
그러면 펑펑터지는 버튼을 볼 수 있지!!ㅋㅋㅋㅋㅋㅋㅋㅋ 그런데 이건 nextui의 기능이 아니라는 거 ㅋㅋ
사실 Nextui가 특징으로 내세우는 건 쉬운 theming이랑 dark/light theme 전환, 그리고 stitche라는 styling library를 내장했다 정도야. 특별한 건 없지. ㅎㅎ 그래도 Vercel에서 스폰도 해주고 있고 그래서 함 써볼라고 홈페이지에 있는 슬로건도 좋고! ㅋㅋㅋ
👇👇👇👇
음 그러니까 이 다음에 해볼건! next.js에 nextui 써서 light/ dark mode 해보며 되겠다. 그런데... 음.. stitche가 좋아? 아니면 styled-components가 좋아? ㅎㅎ npm 다운로드 수는 styled-components 압승! ㅋㅋㅋ 아 이거 보니까 또 하기 싫으네 ㅋㅋ styled-components + tailwindcss 익숙해져서 디자인 카피하는 능력을 키우는 게 차라리 속편할지도 ㅋㅋ
'Next.js' 카테고리의 다른 글
| Next.JS 프로젝트 기본 템플릿 만들기#2 (0) | 2022.06.15 |
|---|---|
| Next.JS 프로젝트 기본 템플릿 만들기#1 (0) | 2022.06.14 |
| Next.js + styled-components + tailwindcss + SSR (6) | 2022.05.28 |
| Next.JS App engine 비용 (0) | 2022.05.26 |
| Next.JS Font optimization(웹 폰트 삽입 위치) (0) | 2022.05.25 |