Frameworks
Next.js - Pages Router
Vapor UI 컴포넌트를 Nextjs Pages Router와 사용하는 방법Next.js - Pages Router
Next.js Pages Router는 전통적인 파일 시스템 기반 라우팅을 사용합니다. Vapor UI 컴포넌트는 Pages Router 환경에서도 완벽하게 작동합니다.
라이브러리 설치
프로젝트 디렉토리로 이동하여 Vapor UI를 설치합니다.
cd your-project-namenpm install @vapor-ui/core @vapor-ui/iconsnext.config.ts 설정
Pages Router에서는 transpilePackages 옵션을 사용하여 라이브러리를 트랜스파일합니다.
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
reactStrictMode: true,
transpilePackages: ['@vapor-ui/core', '@vapor-ui/icons'],
};
export default nextConfig;컴포넌트 사용 예시
이제 페이지에서 Vapor UI 컴포넌트와 테마 전환 기능을 사용할 수 있습니다.
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 Pages Router와 함께 Vapor UI 컴포넌트를 사용하는
예시입니다.
</Text>
</div>
</Card.Body>
</Card.Root>
</main>
);
}