next.js에 Chakra ui 적용하기

odada·2024년 11월 27일
Chakranext.js
0

next.js

목록 보기
1/12

Chakra 설치

npx create-next-app@latest ./
npm install @chakra-ui/react@2.8.2 @chakra-ui/next-js@2.1.5 @emotion/react@11.11.1 @emotion/styled@11.11.0 framer-motion@10.16.4

yarn add @chakra-ui/react@2.8.2 @chakra-ui/next-js@2.1.5 @emotion/react@11.11.1 @emotion/styled@11.11.0 framer-motion@10.16.4

Chakra Provider 적용하기

package.json

// package.json
{
  "dependencies": {
    "@chakra-ui/next-js": "^2.1.5",
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^10.16.4",
    "next": "15.0.3",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
  }
}

providers 제작

// src/components/providers/index.js
'use client'

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider, extendTheme } from '@chakra-ui/react'

// 선택사항: 테마 커스터마이징
const theme = extendTheme({
  // 여기에 테마 설정을 추가할 수 있습니다
})

export function Providers({ children }) {
  return (
    <CacheProvider>
      <ChakraProvider theme={theme}>
        {children}
      </ChakraProvider>
    </CacheProvider>
  )
}

app/layout 감싸기

// src/app/layout.js
import localFont from "next/font/local";
import "./globals.css";
import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Chakra Theme 적용

1. 구조

src/
└── theme/
    ├── components/
    │   ├── button.js
    │   ├── input.js
    │   └── card.js
    ├── foundations/
    │   ├── colors.js
    │   ├── typography.js
    │   └── spacing.js
    └── index.js

2. 각 컴포넌트 테마 설정

theme/components/container.js

export const Container = {
  baseStyle: {
    maxW: '1340px',
    mx: 'auto',
    px: { base: '5', md: '6', lg: '8' },
    py: { base: '5', md: '6', lg: '8' },
  },
  sizes: {
    sm: {
      maxW: '640px',
    },
    md: {
      maxW: '768px',
    },
    lg: {
      maxW: '1024px',
    },
    xl: {
      maxW: '1200px',
    },
    '2xl': {
      maxW: '1400px',
    },
    full: {
      maxW: 'none',
    }
  },
  variants: {
    primary: {
      bg: 'white',
      shadow: 'md',
      rounded: 'lg',
    },
    secondary: {
      bg: 'gray.50',
      rounded: 'md',
    },
    responsive: {
      px: { base: '4', md: '8', lg: '12' },
      py: { base: '4', md: '6', lg: '8' },
    }
  },
  defaultProps: {
    size: 'xl',
  }
}

theme/components/button.js

export const Button = {
  baseStyle: {
    fontWeight: 'bold',
    borderRadius: 'md',
  },
  sizes: {
    sm: {
      fontSize: 'sm',
      px: 4,
      py: 2,
    },
    md: {
      fontSize: 'md',
      px: 6,
      py: 3,
    },
  },
  variants: {
    outline: {
      bg: 'blue.500',
      color: 'white',
      _hover: {
        bg: 'blue.600',
      },
    },
    ghost: {
      bg: 'gray.200',
      color: 'gray.800',
      _hover: {
        bg: 'gray.300',
      },
    },
  },
  defaultProps: {
    size: 'md',
    variant: 'primary',
  },
}

theme/components/input.js

export const Input = {
  baseStyle: {
    field: {
      borderRadius: 'md',
    },
  },
  variants: {
    outline: {
      field: {
        borderColor: 'gray.200',
        _focus: {
          borderColor: 'blue.500',
          boxShadow: '0 0 0 1px blue.500',
        },
      },
    },
  },
  defaultProps: {
    variant: 'outline',
  },
}

3. 기본 스타일 설정:

theme/foundations/colors.js

export const colors = {
  brand: {
    50: '#f7fafc',
    100: '#edf2f7',
    // ... 더 많은 색상 값들
    900: '#1a202c',
  },
}

theme/foundations/typography.js

export const typography = {
  fonts: {
    body: 'var(--font-geist-sans)',
    heading: 'var(--font-geist-sans)',
    mono: 'var(--font-geist-mono)',
  },
  fontSizes: {
    xs: '0.75rem',
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    // ... 더 많은 사이즈
  },
}

4. 모든 테마를 하나로 통합하는 theme/index.js

import { extendTheme } from '@chakra-ui/react'
import { Button } from './components/button'
import { Input } from './components/input'
import { colors } from './foundations/colors'
import { typography } from './foundations/typography'

const theme = extendTheme({
  colors,
  ...typography,
  components: {
    Container,
    Button,
    Input,
  },
})

export default theme

5. providers.js에서 테마 적용:

'use client'

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'
import theme from '@/theme'  // @ is an alias to src directory

export function Providers({ children }) {
  return (
    <CacheProvider>
      <ChakraProvider theme={theme}>
        {children}
      </ChakraProvider>
    </CacheProvider>
  )
}

6. 사용

'use client'
import { Button, Input } from '@chakra-ui/react'

export default function MyComponent() {
  return (
    <div>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Input placeholder="Custom styled input" />
    </div>
  )
}
profile
odada
웹
다음 포스트

Next.js에서 스타일 분리하는 방법 총정리

0개의 댓글