콘텐츠로 건너뛰기
1.6k

Next.js

Next.js 프로젝트에 Neobrutalism를 설정합니다.

1. 프로젝트 만들기

새 Next.js 앱을 만듭니다. 기존 앱을 사용하려면 이 단계를 건너뛰세요.

pnpm create next-app@latest my-app --typescript --tailwind --app
npx create-next-app@latest my-app --typescript --tailwind --app
yarn create next-app@latest my-app --typescript --tailwind --app
bunx --bun create-next-app@latest my-app --typescript --tailwind --app

2. 초기화 실행하기

프로젝트에서 shadcn을 초기화합니다. 이렇게 하면 components.json이 생성되고 경로와 Tailwind가 설정됩니다.

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

3. Neobrutalism 레지스트리 추가하기

Neobrutalism 레지스트리를 components.json에 추가합니다.

components.json
{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

4. 폰트와 테마 추가하기

폰트와 테마 단계를 따라 Neobrutalism의 상징적인 느낌을 얻으세요. Archivo Black 제목, Space Grotesk 본문, 그리고 네오브루탈리즘 색상과 그림자 토큰입니다.

5. 컴포넌트 추가하기

pnpm dlx shadcn@latest add @neobrutalism/button
npx shadcn@latest add @neobrutalism/button
yarn dlx shadcn@latest add @neobrutalism/button
bunx --bun shadcn@latest add @neobrutalism/button

그런 다음 임포트해서 사용합니다.

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

이것으로 끝입니다 🚀 — 어떤 컴포넌트든 Radix 또는 Base UI 변형을 같은 방법으로 추가하면 됩니다.