🚀 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