ایجاد یک کتابخانه مؤلفه قابل استفاده مجدد با Next.js & tailwind CSS

مقدمه

ایجاد یک کتابخانه مؤلفه قابل استفاده مجدد می تواند به طور قابل توجهی کارایی ، قابلیت حفظ و سازگاری در پروژه ها را بهبود بخشد. در این راهنما ، ما با استفاده از یک کتابخانه مؤلفه قابل استفاده مجدد استفاده خواهیم کرد بعد. js وت Tailwind CSS، اطمینان از ادغام ماژولار ، قابل تنظیم و آسان برای ادغام در پروژه های مختلف.

1. تنظیم پروژه

یک پروژه بعدی جدید را آغاز کنید.

ابتدا یک پروژه جدید Next.JS ایجاد کنید و وابستگی ها را نصب کنید:

npx create-next-app@latest next-component-library --typescript
cd next-component-library

CSS Tailwind را نصب کنید

با نصب وابستگی های آن ، Tailwind CSS را تنظیم کنید:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

پیکربندی کردن tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind را به globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

2. ساختار کتابخانه مؤلفه

یک فهرست اجزای سازنده ایجاد کنید

در داخل src/ پوشه ، ایجاد یک components/ دایرکتوری برای سازماندهی اجزای UI قابل استفاده مجدد.

مثال: مؤلفه دکمه

ایجاد a Button.tsx پرونده در داخل components/:

import React from "react";
import clsx from "clsx";

type ButtonProps = {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "danger";
  onClick?: () => void;
};

const Button: React.FC<ButtonProps> = ({ children, variant = "primary", onClick }) => {
  const buttonClasses = clsx(
    "px-4 py-2 rounded-md font-semibold transition",
    {
      "bg-blue-500 text-white hover:bg-blue-600": variant === "primary",
      "bg-gray-500 text-white hover:bg-gray-600": variant === "secondary",
      "bg-red-500 text-white hover:bg-red-600": variant === "danger",
    }
  );
  return (
    <button className={buttonClasses} onClick={onClick}>
      {children}
    button>
  );
};

export default Button;

3. ساخت مؤلفه ها قابل استفاده مجدد و قابل تنظیم

استفاده از غرفه ها برای سفارشی سازی

غرفه ها به ما این امکان را می دهند که اجزای آن را انعطاف پذیر کنیم. در Button مؤلفه فوق از انواع و اقدامات مختلف پشتیبانی می کند.

حمایت از Tailwind غلبه می کند

برای اجازه دادن به سبک های اضافی ، مؤلفه را برای پذیرش نام کلاس تغییر دهید:

const Button: React.FC<ButtonProps & { className?: string }> = ({ children, variant = "primary", onClick, className }) => {
  return (
    <button className={clsx(buttonClasses, className)} onClick={onClick}>
      {children}
    button>
  );
};

4. ایجاد مؤلفه های بیشتر

مثال: مؤلفه کارت

const Card: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => {
  return (
    <div className="border rounded-lg p-4 shadow-md">
      <h3 className="font-semibold text-lg mb-2">{title}h3>
      {children}
    div>
  );
};
export default Card;

مثال: مؤلفه ورودی

const Input: React.FC<{ placeholder: string; type?: string; className?: string }> = ({ placeholder, type = "text", className }) => {
  return (
    <input
      type={type}
      placeholder={placeholder}
      className={clsx("px-3 py-2 border rounded-md w-full", className)}
    />
  );
};
export default Input;

5. صادر کردن قطعات برای واردات آسان

برای آسانتر کردن کتابخانه ، ایجاد index.ts در داخل components/ پوشه:

export { default as Button } from "./Button";
export { default as Card } from "./Card";
export { default as Input } from "./Input";

اکنون ، واردات اجزای ساده است:

import { Button, Card, Input } from "@/components";

6. انتشار به عنوان یک بسته NPM (اختیاری)

برای به اشتراک گذاشتن کتابخانه مؤلفه خود ، می توانید آن را به عنوان یک بسته NPM منتشر کنید.

بسته را آماده کنید

• ایجاد a package.json در فهرست ریشه
• اضافه کردن exports برای فعال کردن واردات مدولار.
• اطمینان حاصل کنید که اجزای شما در داخل است src/ پوشه

بسته را بسازید

1. اضافه کردن a build فیلمنامه در package.json:

"scripts": {
  "build": "tsc && tailwindcss -o styles.css"
}

1. دستور ساخت را اجرا کنید:

npm run build

انتشار به NPM

npm login
npm publish

پس از انتشار ، می توان آن را در پروژه های دیگر نصب کرد:

npm install my-nextjs-ui-library

پایان

با دنبال کردن این راهنما ، شما یک کتابخانه مؤلفه قابل استفاده مجدد را با استفاده از Next.JS و Tailwind CSS ساخته اید. این رویکرد مدولار به حفظ سازگاری طراحی در پروژه ها کمک می کند در حالی که اجزای قابل تنظیم را بسیار قابل تنظیم نگه می دارد.

مراحل بعدی:

• کتابخانه را با مؤلفه های بیشتری مانند مدالها ، کشویی و هشدارها گسترش دهید.
• کتاب داستان را برای مستندات مؤلفه اضافه کنید.
• پیاده روی tailwind @apply برای سبک های قابل استفاده مجدد.
• بسته بندی برای لرزش درخت را بهینه کنید.

با استفاده مجدد از اجزای خود قابل استفاده و اشتراکی ، شما در حالی که یک UI زیبا و سازگار را حفظ می کنید ، کارآیی را در پروژه های بعدی افزایش می دهید. 🚀

مرا دنبال کن

با تشکر از شما برای خواندن وبلاگ من 🚀 می توانید مرا در GitHub دنبال کنید و در توییتر وصل شوید