Next.js

ساخت پروژه#

دستور init را اجرا کنید تا یک پروژه جدید Next.js ساخته شود. در ادامه می‌توانید تنظیمات پروژه مانند base، preset، monorepo و موارد دیگر را انتخاب کنید.

npmpnpmyarnbun
npx farsiui@latest init -t next
Copy

برای پروژه‌های monorepo از فلگ --monorepo استفاده کنید:

npmpnpmyarnbun
npx farsiui@latest init -t next --monorepo
Copy

افزودن کامپوننت‌ها#

کامپوننت Card را به پروژه خود اضافه کنید:

npmpnpmyarnbun
npx farsiui@latest add card
Copy

اگر پروژه را به‌صورت monorepo ساخته‌اید، دستور را از مسیر apps/web اجرا کنید یا workspace را از ریشه پروژه مشخص کنید:

npmpnpmyarnbun
npx farsiui@latest add card -c apps/web
Copy

دستور بالا کامپوننت Card را به پروژه اضافه می‌کند. سپس می‌توانید آن را به شکل زیر import کنید:

Copyimport {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>نمای کلی پروژه</CardTitle>
        <CardDescription>
          پیشرفت و فعالیت‌های اخیر اپلیکیشن Next.js خود را دنبال کنید.
        </CardDescription>
      </CardHeader>
      <CardContent>
        سیستم طراحی شما آماده است. ساخت کامپوننت بعدی را شروع کنید.
      </CardContent>
    </Card>
  )
}

اگر پروژه را به‌صورت monorepo ساخته‌اید، فایل apps/web/app/page.tsx را ویرایش کنید و کامپوننت را از @workspace/ui/components/card import کنید.

ساخت پروژه#

اگر به یک پروژه جدید Next.js نیاز دارید، آن را با create-next-app بسازید. در غیر این صورت، از این مرحله عبور کنید.

npmpnpmyarnbun
npx create-next-app@latest
Copy

تنظیمات پیشنهادی را انتخاب کنید تا Tailwind CSS، App Router و alias پیش‌فرض @/* برای شما پیکربندی شوند.

اگر ترجیح می‌دهید از دایرکتوری src/ استفاده کنید، فلگ --src-dir را اضافه کنید یا هنگام ایجاد پروژه گزینه Yes را انتخاب کنید:

npmpnpmyarnbun
npx create-next-app@latest --src-dir
Copy

با استفاده از --src-dir، Next.js اپلیکیشن شما را در src/app قرار می‌دهد و alias @/* را به ./src/* تنظیم می‌کند.

پیکربندی Tailwind CSS و Import Alias#

اگر پروژه را با تنظیمات پیشنهادی create-next-app ساخته‌اید، می‌توانید از این مرحله عبور کنید.

اگر FarsiUI را به یک پروژه قدیمی یا سفارشی Next.js اضافه می‌کنید، ابتدا مطمئن شوید Tailwind CSS نصب شده است. می‌توانید راهنمای رسمی نصب Next.js را دنبال کنید.

سپس مطمئن شوید فایل tsconfig.json شامل alias مربوط به @/* است:

Copy{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

اگر از --src-dir استفاده کرده‌اید، alias را به ./src/* تغییر دهید.

اجرای CLI#

دستور init مربوط به FarsiUI را اجرا کنید تا FarsiUI در پروژه شما پیکربندی شود.

npmpnpmyarnbun
npx farsiui@latest init
Copy

افزودن کامپوننت‌ها#

حالا می‌توانید کامپوننت‌های موردنیاز خود را به پروژه اضافه کنید.

npmpnpmyarnbun
npx farsiui@latest add button
Copy

دستور بالا کامپوننت Button را به پروژه اضافه می‌کند. سپس می‌توانید آن را به شکل زیر import کنید:

Copyimport { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>کلیک کنید</Button>
    </div>
  )
}

اگر از --src-dir استفاده کرده‌اید، کامپوننت را در فایل src/app/page.tsx اضافه کنید.