Next.js

Next.js 프로젝트에서 Featuring Design System을 사용하는 방법을 안내합니다.

기본 설정

1. 패키지 설치

npm install @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons

차트가 필요하다면 @featuring-corp/charts 와 peer dependency recharts 도 설치합니다.

npm install @featuring-corp/charts recharts

2. Next.js 설정

next.config.ts에 transpilePackages 설정을 추가합니다. 차트를 쓴다면 @featuring-corp/charts도 포함하세요.

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  transpilePackages: ['@featuring-corp/components', '@featuring-corp/charts'],
};

export default nextConfig;

3. CSS Preset Import

App Router (app/)

app/layout.tsx

import '@featuring-corp/components/preset/featuring';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

Pages Router (pages/)

pages/_app.tsx

import '@featuring-corp/components/preset/featuring';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

4. 사용 시작

app/page.tsx

import { VStack, Typo, Button } from '@featuring-corp/components';
import { IconLaunchOutline } from '@featuring-corp/icons';

export default function Page() {
  return (
    <VStack $css={{ padding: '$spacing-600', gap: '$spacing-400' }}>
      <Typo variant="$heading-2" render={<h1 />}>
        Hello, Featuring!
      </Typo>
      <Button.Root variant="primary" size="md">
        <Button.Icon><IconLaunchOutline /></Button.Icon>
        <Button.Text>Launch</Button.Text>
      </Button.Root>
    </VStack>
  );
}

Vanilla Extract를 직접 사용하려면

대부분의 경우 필요하지 않습니다. $css prop과 <Typo> 컴포넌트로 스타일링을 끝낼 수 있습니다.

Core* 컴포넌트를 확장하거나 빌드 타임 CSS 파일을 프로젝트에서 직접 관리해야 할 때만 Vanilla Extract 플러그인 + Theme Contract 설정이 필요합니다. 구체적인 설정은 Legacy Patterns 페이지를 참고하세요.

On this page