🚀 Chat/Community: @NextPro_Chat

💻 هوش مصنوعی Vercel v0 یه ابزار باحاله که با استفاده از هوش مصنوعی، کدنویسی رابط کاربری رو برات خیلی راحت می‌کنه. فقط کافیه یه توضیح ساده از چیزی که می‌خوای بنویسی, مثال: 👇

Generate a Next Generation UI/UX Pricing Page

⌨️ قابلیت‌های v0:
تولید کد از توضیحات متنی: فقط بگو چی می‌خوای، کد آماده تحویلت می‌ده.
سازگاری با ابزارهای محبوب: با React، Vue، و حتی Svelte کار می‌کنه.
سریع و کاربردی: برای طراحی و توسعه دیگه وقت زیادی ازت نمی‌گیره.

🔗 لینک: https://v0.dev/

@NextPro_Ch is a community to help you become a better developer.

نووِل novel یک ویرایشگر متن WYSIWYG پیشرفته با الهام از Notion است که با استفاده از Tiptap و Vercel AI SDK طراحی شده است. این ابزار قابلیت‌های متنوعی را برای توسعه‌دهندگان و تیم‌های طراحی فراهم می‌کند:

منوی اسلش و حبابی: امکان دسترسی سریع به ابزارها و امکانات ویرایشی.

تکمیل خودکار مبتنی بر هوش مصنوعی: با تایپ "++" یا انتخاب از منوی اسلش فعال می‌شود.

آپلود تصاویر: از طریق کشیدن و رها کردن، کپی-پیست یا منوی اسلش.

افزودن توییت: قابلیت درج مستقیم توییت‌ها از منوی اسلش.

پشتیبانی از فرمول‌های ریاضی با LaTeX: مناسب برای پروژه‌هایی که نیاز به نمایش محتوای علمی دارند.


این ابزار به طور ویژه برای پروژه‌های React و Next.js طراحی شده و تجربه طراحی بصری پیشرفته‌ای را ارائه می‌دهد.

@NextPro_Ch 🚀

برنامه نویس قبلی ۵۰ درصد کار رو برده جلو برده و الان رسیده دست من
نمی‌دونم با مفهوم کامپوننت، هوک، سرویس یا اصلا با ریکتی آشنایی داشته یا نه
ولی می‌دونم این وضع کار کردن درست نیست!

نمی‌دونم باید توهین کنم یا نفرین، هرچی که باشه در شأن من نیست.
ولی ای کاش یکم تعهد یا عشق به کار داشته باشه یه برنامه نویس
خیلی دور از انصاف هست که سرمایه، وقت و آینده ی یک شرکت رو اینطوری خراب کنیم.
کمی شرافت آرزوست.

نکته آخر: هرچی که کار کنه درست نیست.

#tweet

@NextPro_Ch 🚀

یک پکیج کاربردی برای شهر و استان های ایران !

اگه شما هم روی پروژه‌های React و Next کار می‌کنید و دنبال یه راه‌حل ساده و کاربردی برای نمایش نقشه‌های SVG ایران هستید، این پکیج‌ها دقیقا همون چیزیه که نیاز دارید:

🔗 Package Link

@NextPro_Ch 🚀

آشنایی با تابع groupBy در جاوااسکریپت 🚀

فرض کنید یه لیست از کاربران دارید و می‌خواید اون‌ها رو بر اساس نوعشون (مثلاً ادمین، نویسنده و...) دسته‌بندی کنید. اینجا تابع groupBy به کمک شما میاد! 🛠

با استفاده از groupBy، می‌تونید به راحتی کاربران رو بر اساس یک ویژگی خاص (مثل type) گروه‌بندی کنید. نتیجه یه آبجکت خواهد بود که کلیدهایش انواع کاربران هستند و مقدار هر کلید هم لیستی از کاربران اون نوعه.


@NextPro_Ch 🚀

یکی از بهترین راه های ممکن برای دپلوی پروژه های react، بی شک gh-pages هست، 😎 در ادامه به شما راهنمایی می‌کنم که چطور پروژه‌های React رو روی GitHub Pages (gh-pages) دپلوی کنید. البته باید چند نکته مهم رو رعایت کنید تا به مشکل نخورید. 👇


۱. تنظیمات vite.config.js ⚙️🛠️
قبل از هر چیزی، داخل فایل vite.config.js باید خط زیر رو اضافه کنید:

base: "./"

این تنظیم باعث میشه که Vite پروژه شما رو به درستی برای دپلوی روی GitHub Pages آماده کنه. 🌍✨

۲. تغییر روتینگ به HashRouter 🔄🛣️
اگر از React Router استفاده می‌کنید، به جای استفاده از BrowserRouter، باید از HashRouter استفاده کنید. 🚀

چرا؟
در GitHub Pages، صفحه شما به صورت Static دپلوی میشه، پس باید از HashRouter استفاده کنید تا مسیرها به درستی نمایش داده بشن. 💡📡

پس اینطوری باید تغییر بدید:

javascript 
import { HashRouter } from 'react-router-dom'; 
 
<HashRouter> 
  {/* Your routes here */} 
</HashRouter>

۳. ایمپورت عکس‌ها به صورت دستی 📸🖼️
باید عکس‌ها و تصاویر رو دونه دونه ایمپورت کنید و به src بفرستید تا Vite بتونه اون‌ها رو به درستی داخل پوشه dist قرار بده و در زمان Build مشکلی پیش نیاد. ⚡

مثال:

javascript 
import myImage from './assets/myImage.png'; 
 
// استفاده از تصویر در JSX 
<img src={myImage} alt="My Image" /> 
 

برای مطالعه بیشتر در مورد چگونگی دپلوی پروژه React روی GitHub Pages، میتونید از این لینک استفاده کنید

#ریکت #دپلوی


@NextPro_Ch

📢 آشنایی با Zod – تایپ اسکریپت + ولیدیشن عالی 🚀

Zod یه کتابخونه‌ی فوق‌العاده برای اعتبارسنجی و تایپ‌سیف بودن در TypeScript هست! 😍

✅ ولیدیشن سریع و قوی
✅ تولید تایپ خودکار 🎯
✅ خطایابی بهتر و دیباگ راحت‌تر 🛠
✅ سازگار با TypeScript و Next.js 🔥

---

### 🛠 نمونه کد:

import { z } from "zod";

const UserSchema = z.object({
  name: z.string(),
  age: z.number().min(15).optional(), // 🎂 این فیلد اختیاریه  
  gender: z.enum(["male", "female"]).optional(), // 🎭 اینم اختیاریه  
});

type User = z.infer<typeof UserSchema>; // 🎯 تایپ خودکار  

const user1 = UserSchema.parse({ name: "Ali" }); // ✅ مشکلی نداره!  
const user2 = UserSchema.parse({ name: "Sara", age: 20, gender: "female" }); // ✅ اوکیه!  
const user3 = UserSchema.parse({ name: "Reza", gender: "male" }); // ✅ بدون age هم درسته  

⚡ با Zod دیگه نیازی به تعریف جداگانه تایپ و اسکیما نداری! یه تیر، دو نشون 🎯🔥

#TypeScript #Zod #Validation


@NextPro_Ch

🚀 Custom Elements در JavaScript

Custom Elements بهت اجازه می‌ده المان‌های HTML سفارشی بسازی و رفتارشون رو کنترل کنی! 😍

### 🛠 نمونه ساده:

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot!.innerHTML = `<button>Click Me!</button>`;
  }
}

customElements.define("my-button", MyButton);

حالا توی HTML می‌تونی اینو استفاده کنی:

<my-button></my-button>

✅ سبک، سریع و قابل استفاده در همه فریمورک‌ها!

🔗 منبع: MDN – Custom Elements

@NextPro_Ch

خسته شدی از نوشتن تایپ‌های دستی توی Next.js؟ 😩

همه ما تو getServerSideProps و getStaticProps بارها تایپ‌ها رو دستی نوشتیم، ولی دیگه وقتشه که Next.js خودش برامون تایپ بسازه! 🎯

با TypeScript و InferGetServerSidePropsType یا InferGetStaticPropsType می‌تونی تایپ خروجی رو اتوماتیک بسازی! 😍

---

✨ دیگه لازم نیست اینجوری بنویسی:

export const getServerSideProps = async () => {
  return { props: { name: "Ali", age: 25 } };
};

type Props = { name: string; age: number }; // 😵‍💫 دستی نوشتن تایپ؟ نه دیگه!

---

🚀 فقط اینو بنویس و راحت باش:

import { InferGetServerSidePropsType } from "next";

export const getServerSideProps = async () => {
  return { props: { name: "Ali", age: 25 } };
};

type Props = InferGetServerSidePropsType<typeof getServerSideProps>; // 🎯 تایپ خودکار!

یا برای getStaticProps:

import { InferGetStaticPropsType } from "next";

export const getStaticProps = async () => {
  return { props: { posts: ["Post 1", "Post 2"] } };
};

type Props = InferGetStaticPropsType<typeof getStaticProps>; // 🎉 تایپ آماده!

---

💡 نتیجه؟
✅ بدون دردسر، تایپ دقیق داری!
✅ خطایابی بهتر و دیباگ راحت‌تر 🛠
✅ همیشه تایپ‌ها به‌روز می‌مونن 🔥

دیگه وقتشه که از این روش استفاده کنی و Next.js رو تایپ‌سیف‌تر کنی! 😎

#NextJS #TypeScript #InferType

@NextPro_Ch

معرفی ag-grid-react برای توسعه‌دهندگان React 😍

کتابخانه ag-grid-react یک کتابخانه قدرتمند و حرفه‌ای برای نمایش و مدیریت داده‌ها در قالب جدول (Grid) در برنامه‌های React است. این کتابخانه با امکانات پیشرفته‌ای مانند مرتب‌سازی، فیلتر کردن، صفحه‌بندی، ویرایش سلول‌ها و پشتیبانی از داده‌های بزرگ، یکی از بهترین گزینه‌ها برای ساخت جداول تعاملی و پویا است.

🟢 ویژگی‌های کلیدی:

🔹 سازگاری با اکثر کتابخانه و فریم‌ورک ها: #Reactjs, #VueJS, #AngularJS
🔹انعطاف‌پذیری: امکان شخصی‌سازی ظاهر و رفتار جدول.
🔹 کارایی بالا: حتی با داده‌های حجیم به‌صورت بهینه عمل می‌کند.

🚀 امکانات پیشرفته: مانند گروه‌بندی داده‌ها، درخت داده‌ها، و قابلیت‌های کشیدن و رها کردن (Drag & Drop).

نصب:

npm i ag-grid-react

📚 لینک داکیومنت این کتابخانه

@NextPro_Ch 🚀

🚀 کتابخونه Zustand: مدیریت State ساده و بهینه در React

کتابخونه Zustand یه کتابخونه سبک، سریع و ساده برای مدیریت state در React.js هست که جایگزین خیلی خوبی برای Redux و Context API محسوب می‌شه.

🎯 چرا Zustand؟

✅ کدنویسی ساده: بدون boilerplate اضافی
⚡ عملکرد سریع: فقط کامپوننت‌های لازم رندر می‌شن
🔗 بدون Provider: نیازی به wrapper اضافی نداره

🔥 نصب و استفاده سریع

// Installation ✅👇
npm install zustand

// Use 
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increase } = useStore();
  return <button onClick={increase}>Count: {count}</button>;
}

✅ کتابخونه Zustand یه انتخاب عالی برای مدیریت state سریع و ساده تو React هست!

@NextPro_Ch

کتابخانه ECharts: کتابخانه ای ساده و قدرتمند برای ساخت نمودارهای تعاملی

اگر به دنبال یک ابزار ساده و در عین حال حرفه ای برای نمایش دادهها در جاوااسکریپت هستید، ECharts انتخاب عالی است! این کتابخانه اوپن سورس، با امکانات گسترده و رابط کاربری آسان، به شما کمک میکند تا بدون دردسر، نمودارهای زیبا و تعاملی بسازید.

چرا ECharts؟
- سادگی و انعطافپذیری: با تنظیمات ساده، میتوانید انواع نمودارها (میله ای، خطی، دایره ای، نقشه و ...) را ایجاد کنید.
- تعاملی بودن: کاربران میتوانند روی نمودارها زوم کنند، دادهها را بررسی کنند و حتی انیمیشنهای جذاب ببینند.
- سازگاری: با فریمورکهایی مثل React، Vue و Angular به راحتی کار میکند.
- داکیومنت کامل: مستندات شفاف و مثالهای متعدد، یادگیری و استفاده را آسان کرده است.

کاربردهای ECharts
- ساخت دشبوردهای مدیریتی
- نمایش دادههای تحلیلی در وبسایتها
- ایجاد گزارشهای تعاملی و گرافیکی

برای شروع، کافیست به وبسایت رسمی Echarts مراجعه کنید و با چند خط کد، اولین نمودار خود را بسازید! 🚀

#JavaScript

@NextPro_Ch 🚀

کتابخانه dnd-kit: یک کتابخانه مدرن برای Drag & Drop در رابط کاربری ⚡️

اگر به دنبال پیادهسازی قابلیت Drag & Drop در پروژههای React خود هستید، @dnd-kit/core یک انتخاب ایده آل است! این کتابخانه سبک، مدرن و قابل تنظیم، به شما امکان میدهد المانهای رابط کاربری را به راحتی جابه جا کنید و تجربه کاربری تعاملی ایجاد کنید.

چرا dnd-kit؟ 🤔

✅ سادگی و انعطافپذیری: با API ساده و قابل درک، قابلیت Drag & Drop را به راحتی پیادهسازی کنید.

✅ پرفورمنس بالا: بهینه شده برای عملکرد سریع و روان.

✅ سازگاری: با تمامی کامپوننتهای React کار میکند.

✅ قابلیت سفارش سازی: تنظیم رفتارها و استایلهای دلخواه.


💻 لینک وبسایت رسمی و مشاهده Demo ها


@NextPro_Ch 🚀

کتابخونه Ant Design: سیستم طراحی جامع برای توسعه رابط کاربری حرفه‌ای

کتابخانه Ant Design یک کتابخانه UI کامپوننت‌محور و سیستم طراحی (Design System) است که برای ساخت رابط‌های کاربری زیبا، حرفه‌ای و یکپارچه در پروژه‌های وب و اپلیکیشن‌ها استفاده می‌شود. این کتابخانه توسط شرکت چینی Ant Financial (بخشی از گروه Alibaba) توسعه یافته و به یکی از محبوب‌ترین ابزارهای طراحی UI در جهان تبدیل شده است.

چرا Ant Design؟ 🚀
کامپوننت‌های آماده و حرفه‌ای:
بیش از ۵۰ کامپوننت از پیش ساخته‌شده (مثل Table، Form، Modal، DatePicker و ...).

یکپارچگی و سازگاری:
طراحی یکپارچه و استاندارد برای رابط‌های کاربری حرفه‌ای.

سفارشی‌سازی آسان:
امکان تغییر تم (Theming) و تنظیم استایل‌ها با استفاده از Less یا CSS Variables.

اکوسیستم گسترده:
ابزارهای جانبی مثل Ant Design Pro و Ant Motion.

ویژگی‌های کلیدی 🔑
🔹 واکنش‌گرا (Responsive): سازگاری با دستگاه‌های مختلف.
🔹 دسترسی‌پذیری (A11Y): رعایت استانداردهای WCAG.
🔹 داکیومنت جامع: مستندات کامل با مثال‌های گام‌به‌گام.

💻 مشاهده کامپوننت ها و مستندات

@NextPro_Ch 🚀

🎯 پکیج clsx چیست و چه کاربردی دارد؟

کتابخانه clsx یک ابزار سبک و کارآمد در اکوسیستم جاوااسکریپت است که برای مدیریت حرفه‌ای کلاس‌های CSS در پروژه‌های مدرن، به‌ویژه با فریم‌ورک‌هایی مانند React، طراحی شده است. این پکیج امکان ترکیب پویا و شرطی کلاس‌ها را فراهم می‌کند و به توسعه‌دهندگان کمک می‌کند تا کدهایی تمیزتر و بهینه‌تر بنویسند.

✨ ویژگی‌ها و کاربردها:

مدیریت کلاس‌ها بر اساس شرایط منطقی
سازگاری با ساختارهای متنوع (رشته، آرایه، آبجکت)
افزایش سرعت و کارایی در رندرینگ
📋 نمونه کد:

import clsx from 'clsx';
const className = clsx('btn', { active: isActive, disabled: !isEnabled });

در این مثال، کلاس‌ها تنها در صورت برقراری شروط اعمال می‌شوند.

💡کتابخانه clsx انتخابی ایده‌آل برای توسعه‌دهندگانی است که به دنبال ساده‌سازی و حرفه‌ای‌تر کردن پروژه‌های خود هستند. 🧑🏻‍💻


@NextPro_Ch 🚀

🧑‍💻 شورت‌هند ایجاد فرم‌دیتا.

اگر شماهم از نوشتن و ایجاد مکرر FormData خسته شده‌اید, می‌توانید با روش داخل تصویر, در عرض چند ثانیه یک فورم‌دیتا ایجاد کنید و به سمت سرور ارسال کنید :)

#Tip #FormData #JavaScript #Reactjs #Nextjs

@NextPro_Ch 🚀

📢 ابزار جدید و قدرتمند برای توسعه‌دهندگان!

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

🔗 قابلیت‌ها: ساخت انیمیشن‌های سبک، سازگار با انواع فریم‌ورک‌ها

💡 کتابخونه animate-ui.com انتخابی هوشمندانه برای توسعه‌دهندگانی است که به دنبال ارتقای کیفیت UI با انیمیشن‌های حرفه‌ای هستند. 🧑🏻‍💻

#shadcn #UI #UX #reactjs #Nextjs #Javascript

@NextPro_Ch 🚀

🌟 معرفی رسمی Supabase UI - تازه‌وارد قدرتمند دنیای توسعه! 🚀

ابزار جدید Supabase UI به‌تازگی عرضه شده و برای توسعه‌دهنده‌ها و طراح‌هایی که دنبال یه راه‌حل مدرن هستن، گزینه جالبیه.

✨ ویژگی‌ها در یک نگاه:

رابط کاربری آماده و قابل تنظیم 🖌
طراحی ساده و کاربردی برای پروژه‌های مختلف ⚙️
💻 تازه اومده و اگه دنبال یه ابزار جدید برای تست کردن هستید، بد نیست نگاهی بهش بندازید.

👈🏻 اطلاعات بیشتر: supabase.com/ui

#SupabaseUI #توسعه_وب #ابزار_جدید

@NextPro_Ch 🚀