🚀 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 🚀