コンテンツへスキップ
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バリアントを同じ方法で追加できます。