کامپوننت Button (Next.js 15 و Tailwind CSS)

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

مقدمه‌ای بر Next.js 15 و Tailwind CSS

Next.js یک فریمورک مبتنی بر React است که امکاناتی مانند رندرینگ سمت سرور (SSR)، تولید صفحات استاتیک (SSG) و مسیریابی ساده را فراهم می‌کند. نسخه 15 این فریمورک با بهبودهای متعددی همراه بوده است که توسعه‌دهندگان را قادر می‌سازد تا برنامه‌های وب سریع‌تر و بهینه‌تری بسازند.

Tailwind CSS یک فریمورک CSS utility-first است که به شما امکان می‌دهد بدون نوشتن کد CSS سفارشی، استایل‌های مورد نیاز خود را اعمال کنید. با استفاده از کلاس‌های پیش‌ساخته، می‌توانید به سرعت عناصر را استایل‌دهی کنید و رابط‌های کاربری زیبا و منحصربه‌فرد ایجاد نمایید.

راه‌اندازی پروژه Next.js 15

برای شروع، ابتدا باید یک پروژه جدید Next.js 15 ایجاد کنید. برای این کار، از دستور create-next-app استفاده می‌کنیم:

npx create-next-app@latest my-nextjs-app

پس از اجرای این دستور، یک پوشه با نام my-nextjs-app ایجاد می‌شود که حاوی ساختار اولیه پروژه Next.js است.

نصب و پیکربندی Tailwind CSS

پس از ایجاد پروژه، نوبت به نصب و پیکربندی Tailwind CSS می‌رسد. برای این منظور، مراحل زیر را دنبال کنید:

1. نصب وابستگی‌ها: در دایرکتوری پروژه، دستور زیر را اجرا کنید تا Tailwind CSS و وابستگی‌های مورد نیاز نصب شوند:

   npm install tailwindcss postcss autoprefixer

2. ایجاد فایل‌های پیکربندی: با اجرای دستور زیر، فایل‌های پیکربندی Tailwind و PostCSS را ایجاد کنید:

   npx tailwindcss init -p

   این دستور دو فایل tailwind.config.js و postcss.config.js را در ریشه پروژه ایجاد می‌کند.

3. پیکربندی مسیرها: در فایل tailwind.config.js، بخش content را به‌روزرسانی کنید تا Tailwind فایل‌های مورد نیاز را پردازش کند:

   ** @type {import('tailwindcss').Config} */
    module.exports = {content: ["./pages/**/*.{js,ts,jsx,tsx}","./components/**/*.
    {js,ts,jsx,tsx}",  ], theme: {extend: {},},  plugins: [], };

4. افزودن دستورهای پایه Tailwind: در فایل CSS اصلی پروژه (معمولاً globals.css)، دستورهای پایه Tailwind را اضافه کنید

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

   این کار اطمینان می‌دهد که تمام استایل‌های Tailwind در پروژه اعمال می‌شوند.

ایجاد کامپوننت دکمه با استفاده از Tailwind CSS

پس از پیکربندی Tailwind CSS، می‌توانیم یک کامپوننت دکمه ایجاد کنیم. برای این منظور، یک فایل جدید به نام Button.js در پوشه components ایجاد کرده و کد زیر را در آن قرار دهید:

const Button = ({ children, onClick }) => { 
 return (    
 	<button onClick={onClick}    
  		className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600
  		transition-colors duration-300" >
  		{children}    
  	</button>);
 };
  export default Button;

در این کامپوننت:

• px-4 و py-2: پدینگ افقی و عمودی را تنظیم می‌کنند.
• bg-blue-500: رنگ پس‌زمینه آبی با شدت 500 را اعمال می‌کند.
• text-white: رنگ متن را سفید می‌کند.
• rounded: گوشه‌های دکمه را گرد می‌کند.
• hover:bg-blue-600: در حالت هاور، رنگ پس‌زمینه را به آبی با شدت 600 تغییر می‌دهد.
• transition-colors و duration-300: انتقال رنگ‌ها را با مدت زمان 300 میلی‌ثانیه تنظیم می‌کنند.

استفاده از کامپوننت دکمه در صفحات Next.js

برای استفاده از کامپوننت دکمه در صفحات Next.js، به عنوان مثال در صفحه اصلی (index.js)، می‌توانید کد زیر را بنویسید:

import Button from '../components/Button';
 export default function Home() { 
 const handleClick = () => {    alert('دکمه کلیک شد!');  };
  return (   
 <div className="flex items-center justify-center min-h-screen">    
  <Button onClick={handleClick}>کلیک کنید</Button>   
 </div>  ); }

در این مثال:

• import Button from '../components/Button';: کامپوننت دکمه را وارد می‌کند.
• handleClick: تابعی است که در صورت کلیک روی دکمه، یک پیام هشدار نمایش می‌دهد.