๊ฐ์ธ์ ์ธ ํ์๋ก ์ธํด์ ๋ง๋ค๊ธฐ ์์ํ๋ ํ์ ํธ๋ํน ์น.
๋ ์ํ๋ ์๊ฐ์ ๋ง๋ค์ด๋ณด๊ณ ์ธก์ ํด๋ณด๊ฒ ๋ค๊ณ ์์ํ ๊ฒ์ด์๋๋ฐ ์ง๋ ๋ฌ ๊ธฐ๋ก๊ณผ ํ์ฌ์ ๊ธฐ๋ก ๋น๊ต / ๋๋ ๋ชฉํ ์๊ฐ์ ์ ํด๋๊ณ ํ์ฌ ์ผ๋ง๋ ์ด๋ค๋์ง ์ฒดํฌํ๋ ๋ถ๋ถ๊น์ง ๋ ํด๋ณด๊ณ ์ถ์ด์ก๋ค.
๊ทธ ํํ์ progressbar๋ก ํ๋ฉด ์ง๊ด์ ์ผ ๊ฒ ๊ฐ๋ค๊ณ ์๊ฐํ๊ณ , nextui๋ฅผ ์ฌ์ฉํด์ ๊ฐ๋จํ๊ฒ ์ ์ฉํด๋ณด๊ธฐ๋ก ํ๋ค.
๐๐ป NextUI ๊ณต์๋ฌธ์
NextUI - Beautiful, fast and modern React UI Library
Beautiful, fast and modern React UI Library
nextui.org
nextui๋ฅผ ์ ์ฉํ๊ธฐ ์ํด์๋ ๊ณต์๋ฌธ์๋ฅผ ๋ณด๋ฉด ๊ต์ฅํ ๋น ๋ฅด๊ฒ ํด๊ฒฐํ ์ ์๋ค. ๊ต์ฅํ ์์ธํ ์ค๋ช ๋์ด์๋ค.
ํนํ nextjs14๋ฅผ ์ฌ์ฉํ๋ ํ๋ก์ ํธ๋ผ๋ฉด app dirctory ๋ฒ์ ผ setup์ ๋ฐ๋ผ๊ฐ๋ฉด ๋๋ค.
https://nextui.org/docs/guide/upgrade-to-v2#app-directory-setup
Upgrade to v2
Upgrade from NextUI v1 to v2
nextui.org
๊ณต์๋ฌธ์์ ๋์์๋ ๋ด์ฉ์ ์๋ ๊ฐ๋จํ๊ฒ ํ๊ตญ์ด๋ก ์ค๋ช ์ ๋ ํด๋ณด๊ฒ ๋ค.
NextUI + Nextjs 14 ์ ์ฉ๊ธฐ
1. ์ค์นํ๊ธฐ
npm i @nextui-org/react framer-motion
or
yarn add @nextui-org/react framer-motion
or
pnpm add @nextui-org/react framer-motion
// 3๊ฐ ์ค์ ์์ ์ด ์ฐ๋ ํ๋ก์ ํธ์ ๋ง๊ฒ ์ค์นํ๋ฉด ๋๋ค
2. Tailwind CSS Setup
nextui ๋ tailwind css ์์ ๋ง๋ค์ด์ง๋๋ค. ๊ทธ๋์ tailwind css ๋ฅผ ๋จผ์ ์ค์นํด์ฃผ์ ์ผํฉ๋๋ค. ์ค์นํ๊ณ ๋๋ฉด์
tailwind.config.js ๋ผ๋ ํ์ผ์ด ์์ฑ๋ฉ๋๋ค. ์๋์ ๋ด์ฉ์ ๋ณต๋ถ!
// tailwind.config.js
const { nextui } = require("@nextui-org/react");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
// ์ฌ๊ธฐ์ ./app/ ์ด๋ฐ์์ผ๋ก app ๋๋ ํ ๋ฆฌ ์๋์ ๊ฒฝ๋ก๊น์ง ๋ฃ์ด์ฃผ์ธ์ฅ
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()]
}
๊ทธ๋ฆฌ๊ณ app ๋๋ ํ ๋ฆฌ ๋ด์ ์์นํ global css ํ์ผ์ tailwind๋ฅผ ์ค์ ํด์ค๋๋ค.
@tailwind base;
@tailwind components;
@tailwind utilities;
3. Setup Provider
provider ๋ฅผ ๋ฃ์ด์ผํ๋๋ฐ. app ๋๋ ํ ๋ฆฌ ์๋์ providers๋ผ๋ ํ์ผ์ ์์ฑํฉ๋๋ค.
// app/providers.tsx
'use client'
import {NextUIProvider} from '@nextui-org/react'
export function Providers({children}: { children: React.ReactNode }) {
return (
<NextUIProvider>
{children}
</NextUIProvider>
)
}
4. ์์ฑ๋ provider์ root ํ์ผ์ ๋ฃ์ด์ค๋๋ค.
// app/layout.tsx
import {Providers} from "./providers";
export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html lang="en" className='dark'>
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
Progress
์ด๋ ๊ฒ ์ ํ ์ ๋๋ฌ๋ค. routing ํ๋ฉด์ ์ฐ๋ progressbar ๊ฐ ์๋๋ผ ์ํ๋ฅผ ํํํด์ฃผ๋ bar๋ฅผ ๋ฃ์ด์ฃผ๋ ๊ฒ!
https://nextui.org/docs/components/progress
Progress
The Progress component allows you to view the progress of any activity.
nextui.org
์์ ์๋ ๊ณต์๋ฌธ์์ฒ๋ผ ์ธ๋๋น์ฃผ์ผ๋ก ์ค์น๊ฐ ๊ฐ๋ฅํ์ง๋ง ์ ์ฒด๋ฅผ ์ค์นํด์คฌ๋ค๋ฉด ๊ตณ์ด ์ค์น ํ์์์ด
์๋์ ๊ฐ์ด global๋ก ๊ทธ๋ฅ import ํ ์๋ ์๋ค
import {Progress} from "@nextui-org/react";
์ด์ฒ๋ผ ์งํ์ ํ๋๋ฐ, nextui์ css๊ฐ ์ ์ฉ์ด ์๋๋ฉด?!
button์ ๋ฃ์ผ๋ฉด ๊ทธ๋ฅ ๊ธฐ๋ณธ button์ด ๋์ค๊ณ ์์๊ฐ์๊ฒ ํ๋๋ ์ ๋์๋ค!!!! ์ ๊ทธ๋ฐ์ง ๋ชฐ๋ผ์ ์์ฒญ ํค๋งธ๋๋ฐ, ๊ฑฐ์ ๋ฐ๋์ ? stackoverflow๋ก ์์ฒญ ๋ค์ ์ด๊ณ ์ด๋ฐ ๋ฌธ์ ๊ฐ ์ด์ ์ ์ฌ๋ฌ์ฐจ๋ก ์์๋๊ฒ์ธ์ง ๋น์ทํ ๋ฅ์ ์ง๋ฌธ๋ ์ฌ๋ผ์์์๋ค. ๋จ์ง ๊ทธ ํด๊ฒฐ์ฑ ๋ค์ ๋์๊ฒ ์์ฉ์๋ ๊ฒ ๋ฟ!
PostCSS ์ autoprefixer ๋ฅผ ์ค์นํด์ค๋ค. ๊ทธ์ ์์ผ css ๊ฐ ์ ๋๋ก ์ ํ์ ธ์ ๋์๋ค.
tailwindcss๋ฅผ ์ค์นํ ๋ ๊ฐ์ด ์ค์นํด์ผํ๋๊ฑด๋ฐ ๋ด๊ฐ ๋์น ๊ฒ์ด๋ค!!!
...๊ณต์๋ฌธ์๋ง ์ ๋๋ก ์ฝ์ด๋ณด์๋ฉด ๋ค ํด๊ฒฐ ๊ฐ๋ฅํ ์ผ๋ค์ด์๋ค! .... ์์ด์ ์์ฉ๋์ด์ ํฉ์ธ๋ ค์ ๋์น์ง ๋ง์!!
'๊ฐ๋ฐ > Next.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| nextjs shadcn/ui Drawer ๋ฐฉํฅ ์ ํํ๊ธฐ (1) | 2024.06.13 |
|---|---|
| nextjs shadcn/ui ์์ ๋ฏธ๋์ด์ฟผ๋ฆฌ ์์ ํ๊ธฐ (0) | 2024.06.10 |
| [Nextjs] Route segment 'force-dynamic' ๊ฐ ํ์ํ ๋ (0) | 2024.03.29 |
| vercel๋ก Nextjs ๋ฐฐํฌํ๊ธฐ (0) | 2024.01.05 |
| Next.js14์์ useRouter ์ฌ์ฉํ๊ธฐ (1) | 2024.01.03 |
