Next.js

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

기본 설정

1. 패키지 설치

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

2. Next.js 설정

next.config.ts에 transpilePackages 설정을 추가합니다.

next.config.ts

import type { NextConfig } from 'next';

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

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 { IconRocketOutline } 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><IconRocketOutline /></Button.Icon>
        <Button.Text>Launch</Button.Text>
      </Button.Root>
    </VStack>
  );
}

Vanilla Extract와 함께 사용

프로젝트에서 Vanilla Extract를 직접 사용하려면 추가 설정이 필요합니다.

1. 추가 패키지 설치

npm install -D @vanilla-extract/css @vanilla-extract/next-plugin

2. Next.js 설정 업데이트

next.config.ts

import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
import type { NextConfig } from 'next';

const withVanillaExtract = createVanillaExtractPlugin();

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

export default withVanillaExtract(nextConfig);

3. Theme Contract 설정

src/styles/theme.css.ts

import { getGlobalColors, getVarName, global, semantic } from '@featuring-corp/design-tokens';
import { createGlobalTheme, createGlobalThemeContract } from '@vanilla-extract/css';

export const vars = createGlobalThemeContract(
  {
    global: {
      colors: getGlobalColors('featuring'),
      elevation: global.elevation,
      spacing: global.spacing,
      radius: global.radius,
      typography: global.typography,
    },
    semantic,
  },
  getVarName,
);

createGlobalTheme(':root', vars, {
  global: {
    colors: getGlobalColors('featuring'),
    elevation: global.elevation,
    spacing: global.spacing,
    radius: global.radius,
    typography: global.typography,
  },
  semantic,
});

4. 스타일 파일에서 사용

src/styles/card.css.ts

import { style } from '@vanilla-extract/css';
import { vars } from './theme.css';

export const card = style({
  backgroundColor: vars.semantic.color.background[1],
  border: `1px solid ${vars.semantic.color.border.default}`,
  borderRadius: vars.global.radius[200],
  padding: vars.global.spacing[400],
  boxShadow: vars.global.elevation[4],
});

참고: Vanilla Extract 설정은 선택 사항입니다. $css prop과 CSS 변수만으로도 대부분의 스타일링이 가능합니다.

On this page