Next.js - App Router

Next.js 13의 app/ 디렉토리는 기본적으로 서버 컴포넌트를 사용합니다. Vapor UI 컴포넌트는 빌드 시점에 use client를 추가하므로 서버 컴포넌트에서 사용할 수 있습니다.

프로젝트 생성

먼저, Next.js 프로젝트를 생성합니다. 설치 과정에서 App Router 사용을 선택해 주세요.

npx create-next-app@latest

라이브러리 설치

프로젝트 디렉토리로 이동하여 VaporUI를 설치합니다.

cd your-project-name

npm install @vapor-ui/core @vapor-ui/icons

`next.config.ts` 설정

프로젝트의 루트 디렉토리에 있는 next.config.ts 파일을 열고, optimizePackageImports 옵션을 추가합니다. 이 설정은 @vapor-ui/core 라이브러리에서 사용하는 부분만 빌드에 포함시켜 최종 번들 사이즈를 줄여줍니다.

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
    // Vapor UI 번들 최적화 설정
    experimental: {
        optimizePackageImports: ['@vapor-ui/core', '@vapor-ui/icons'],
    },
};

export default nextConfig;

컴포넌트 사용 예시

이제 페이지에서 Vapor UI 컴포넌트와 테마 전환 기능을 사용할 수 있습니다.

src/app/page.tsx

import { Card, Text } from '@vapor-ui/core';

export default function HomePage() {
    return (
        <main className="flex min-h-screen flex-col items-center justify-center p-24">
            <Card.Root className="max-w-md">
                <Card.Body>
                    <div className="flex flex-col gap-4">
                        <Text asChild typography="heading1" foreground="normal-200">
                            <h1>Welcome to Vapor UI!</h1>
                        </Text>
                        <Text>
                            이것은 Next.js App Router와 함께 Vapor UI 컴포넌트를 사용하는
                            예시입니다.
                        </Text>
                    </div>
                </Card.Body>
            </Card.Root>
        </main>
    );
}

Next.js - App Router

Next.js - App Router

프로젝트 생성

라이브러리 설치

next.config.ts 설정

컴포넌트 사용 예시

On this page

`next.config.ts` 설정