توی این پیام پست های مهم چنل، جاهایی که فعالیت میکنیم و همچنین ویدیوهای مهم و کاربردی یوتیوبمون رو براتون قرار میدم و به مرور آپدیت میشه:

سایت ما که دوبله های دوره های مختلف به صورت فصل به فصل داخلش به صورت متمرکز قرار میگیره:
DubDev.ir

گروه اصلی متصل به چنل برای رفع اشکال و بحث های مربوط به فرانت اند:
@DeepDevsGp

هشتگ های مهم چنل:
#javascript | #nodejs | #reactjs | #nextjs

دوبله دوره ریکت و جاوااسکریپت جوناس (رایگان)

—————————————————————
ویدیوهای مهم و کاربردی یوتیوب:

آموزش گیت هاب

آموزش گیت

آموزش گیت هاب پیجز (برای هاست کردن پروژه هاتون به صورت رایگان)

چالش های سطح بندی شده فرانت اند و الگوریتمی از کجا بیارم؟

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

آموزش های ساخت Component های کاربردی وب سایت ها

پروژه های بک اندی کاربردی با Node js

آموزش پروژه های فرانت اند منتور با جاوااسکریپت خام و ریکت

—————————————————————
متفرقه:

چطور داخل تلگرام کد بنویسیم طوری که انگار داخل VSCode نوشتیم و تم داشته باشه؟

داخل گروه چطور سوالمون رو بپرسیم که سریعتر مشکلمون برطرف بشه؟

اگر تکنولوژی ای که دارم یادش میگیرم آپدیت شد، مثلا ریکت ورژنش از ۱۸ شد ۱۹ الان من دیگه باید این آموزش رو فراموش کنم برسم سراغ به آموزش دیگه و یه دوره دیگه؟ و همچنین در مورد تکنولوژی های دیگه؟

آقا از اونجایی که دوره ریکت هم داره دوبله میشه، ما تصمیم گرفتیم از این به بعد توی چنل تولید محتوا برای ریکت هم داشته باشیم 🔥

پست ها با این هشتگ ها دسته بندی میشن:
#javascript
#nodejs
#nestjs
#typescript
#reactjs
#nextjs

هر محتوایی هم نیاز داشتید تو این زمینه ها گذاشته بشه حتما توی گروهمون (@js_masters_gp) بهمون بگید ❤️

چطوری یه پروژه Next.js رو Dockerize کنیم؟
اگه میخواید پروژه رو روی سرور دپلوی کنید Docker میتونه یه راه حل سریع و حرفه‌ای باشه. برای اینکه اول از همه شما باید یه فایل با نام Dockerfile در پوشه اصلی پروژه بسازید (بدون پیشوند و با حرف D بزرگ) و نمونه خیلی ساده ای براتون قرار میدم که کد رو داخلش بذارید و استفاده کنید البته این یه چیز ثابتی نیس و ممکنه بسته به پروژه نیاز به تغییر باشه ولی میتونه نمونه خوبی برای شروع باشه.

FROM node:20-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

COPY . .

# Build the Next.js app
RUN npm run build

# Expose the port Next.js app is running on
EXPOSE 3000

# Command to run the Next.js app
CMD ["npm", "start"]

💢 با اجرای دستور زیر میتونید پروژه رو بیلد کنید

docker build -t nextjs-app .

💢 و با دستور run میتونید کانتینر رو اجرا کنید

docker run -p 3000:3000 nextjs-app

#docker #reactjs #nextjs

Channel | Group | YouTube

💢 نکست جی‌اس (Next js) چیست؟
محبوب ترین فریمورک React js هستش که میتوانید سمت سرور و سمت کلاینت را در اون توسعه بدید. این فریمورک قابلیت‌های بسیار بیشتری نسبت به React js در اختیار شما قرار میده و در واقع توسعه یافته React هستش و بسیاری از نواقص React رو نداره. اما توجه داشته باشید که ما در Next.js هنوز هم کد React مینویسیم.
شرکت‌هایی مثل Netflix, Uber, Starbucks یا Twitch از نکست جی‌اس استفاده میکنند چرا که یک فریمورک سریع و کارآمد است.
نکست جامعه برنامه‌نویسی عالی داره و برای یادگیری یا دیباگ کردن به مشکل خاصی برنخواهیم خورد و با آپدیت‌های منظمی که داره روز به روز در حال تکامل هستش

🌐 http://nextjs.org/

🔆 اگر سوالی در مورد نکست جی‌اس دارید میتونید توی گروه بپرسید...
#nextjs #react

Channel | Group | YouTube

♨️ قابلیت CSR (Client Side Rendering) چیست؟
ما در React داده ها را از سرور گرفته و در سمت کلاینت (مرورگر کاربر) از آن داده ها برای ساخت و نمایش صفحه (Render) استفاده میکنیم.
شما میتوانید برای درک این موضوع به وبسایتی بروید که با React نوشته شده است. اگر سورس کد این وب سایت را از مرورگر خود باز کنید (view page source) میبینید که صفحه هیچ خاصی ندارد. چرا؟ به دلیل اینکه در این گونه وبسایت ها ما صفحات واقعی نداریم بلکه آنها با جاوااسکریپت و به صورت پویا ایجاد میشوند.

قابلیت CSR مزایا و معایبی دارد که باید بسته به نیاز استفاده از آن انتخاب شود.

💠 مزایا:
- عدم ریفرش شدن صفحه و سریع بودن در جابه‌جایی بین صفحات

💠 معایب:
- لودینگ نسبتا طولاتی در هنگام اولین مراجعه کاربر به صفحه
- مشکلات سئو و بهینه نبودن برای موتورهای جستجو

🔆 در صورتی که سوالات یا تجربه‌ای در این زمینه دارید لطفا در گروه با ما به اشتراک بگذارید...

#reactjs #nextjs

Channel | Group | YouTube

♨️ قابلیت SSG چیست و چه کاربردی دارد؟
قابلیت SSG یا همون Static Site Generation برای صفحاتی که استاتیک هستند و قرار نیست اطلاعاتشون بعدا تغییر کنه مورد استفاده قرار میگیرند. در این صورت در زمان build پروژه اطلاعات رو دریافت و اون صفحه رو به صورت استاتیک برامون ساخته میشه و دیگه لازم نیست هر بار که کاربر صفحه رو باز میکنه اون صفحه ساخته بشه و هم زمان لود و هم فشار به سرور کمتر میشه.
💠 پس باید برای صفحات و پروژه هایی ازش استفاده بشه که محتواش قرار نیس عوض بشه مثل صفحات تماس با ما یا درباره ما. در حالت SSG چون صفحه ما قبلا بیلد شده موتورهای جستجو به راحتی قادر به بررسی صفحات ما خواهند بود.

#nextjs #reactjs

Channel | Group | YouTube

♨️ یه کتابخونه UI همه کاره
یکی از کارهایی که وقت فرانت‌کار ها رو میگیره طراحی کامپوننت هایی مثل Modal ها یا نوتیفیکیشن و امثالهم هستش. حالا راه حل این مشکل استفاده از یه کتابخونه UI هستش تا بتونیم از کامپوننت‌های آماده اون توی پروژه‌مون استفاده کنیم.
همونطور که میدونید کتابخونه های زیادی برای اینکار هست ولی میشه گفت معروف‌ترینش Ant Design هست که شاید بشناسیدش
این کتابخونه تقریبا همه کامپوننت‌های لازم برای طراحی وب رو در اختیار شما قرار میده از button بگیر تا message و input پس میتونید توی پنل‌های ادمین یا هر پروژه دیگه‌ای ازش استفاده کنید.
💠 میتونید تو آدرس زیر مثال‌هایی از کامپوننت‌های زیباش ببینید...👌
🔅 اگر شما هم کتابخونه UI خوبی میشناسید و ازش استفاده میکنید توی کامنت یا گروه بهمون بگید

🌐 https://ant.design/components/overview

#reactjs #nextjs #packages #Tools

Channel | Group | YouTube

♨️ کتابخونه SWR چیست و چه کاربردی دارد؟
این کتابخونه یکی از بهترین و قدرتمندترین کتابخونه‌ها در زمینه Data Fetching هستش که هر روز داره محبوب تر میشه.
خود SWE یه هوک کاربردی داره به اسم useSWR که کار رو ساده و راحت میکنه. قابلیت های زیادی مثل کش کردن داده ها اعتبار سنجی مجدد، pagination، Preloading و ... داره که واقعا برای پروژه های بزرگ و متوسط بسیار کاربردیه

💠 چطوری ازش استفاده کنیم؟

 const { data, error } = useSWR(key, fetcher); 

در کد بالا آرگما اول key هستش که معمولا خود API Endpoint رو میدیم یا هر اسمی که دوست داریم. (با این کلید کش میکنه)

آرگمان دوم fetcher هست که یه فانکشن async میگیره و عملیات دریافت داده رو انجام میده که دو تا مقدار بر میگردونه که اولی data هستش که اطلاعات دریافت شده از سرور رو شما میشه میشه و دومی هم error هستش که اگه اروری باشه مقدار دهی میشه

🔅 شما از چه کتابخونه ای برای Data fetching استفاده میکنید؟ تجربیاتتون رو با ما در کامنت ها یا در گروه به اشتراک بذارید...

🌐 https://swr.vercel.app

#reactjs #nextjs

Channel | Group | YouTube

♨️ پکیج احراز هویت در Next js
یکی از مهمترین مسائل یک سایت بحث امنیت کاربران است اما گاها پیاده سازی روشی مطمئن و امن برای احراز هویت در Next js چالش برانگیز میشود. راه‌های زیادی برای طراحی این بخش وجود دارد که میتوان به صورتی دستی نیز اینکار را انجام داد ولی مستعد خطا و زمانبر خواهد بود.
ما در Next js میتوانیم از پکیج Next Auth استفاده کنیم که بسیاری از پیچیدگی‌های این مسیر مثل سشن ها یا ورود و خروج را سادتر کرده و با راه حل‌های مناسب و یکپارچه‌ای را در دسترس ما قرار میدهد.

🌐 https://next-auth.js.org

#reactjs #Tools #nextjs

Channel | Group | YouTube

♨️ چرا در ریکت از مقدار index در متد map برای key استفاده نمیکنیم؟
شاید خیلی جاها دیدید یا خودتون از index به عنوان یک شناسه منحصر به فرد برای key در متد map استفاده کردید ولی اینکار اصلا از هیچ لحاظی درست نیس و ممکنه باگ‌هایی رو به وجود بیاره.
چون اگر ترتیب آیتم ها تغییر کنه (مثلا sort انجام بشه) ری‌اکت توی رندر به مشکل میخوره. بهترین مقدار برای key میتونه مقادیری باشه که بک‌اند میان و یونیک هستند مثل id یا امثالهم.
مثلا میخواین لیست محصولاتی که از بک اند میاد رو توی لیستی نشون بدید میتونید از id محصول برای key استفاده کنید چون یونیک هستش.

🔆 شما چه مقادیری برای key استفاده میکنید؟ اگر توصیه در این زمینه دارید با ما در گروه یا کامنت به اشتراک بذارید...
#reactjs #nextjs

Channel | Group | YouTube

♨️ آشنایی با Routing در Next js و چگونگی استفاده از آن
مثل هر فریمورک دیگه‌ای نکست هم سیستم روتینگ مختص به خودش رو داره که قابلیت‌های زیادی رو در اختیارمون قرار میده. سیستم روتینگ نکست فولدربیس هست یعنی روتینگ ما بر اساس شاخه ها و نامگذاری فولدرها انجام میشه.👌

💠 در حالت app router که پیشفرض خود نکست هستش ما یه فولدر به نام app داریم که هر فولدر ساخته شده داخل اون شامل روتینگ ما میشه مثل تصویری که میبینید. داخل هر پوشه اما باید یک فایل با نام page.jsx یا page.tsx داشته باشیم تا هنگام ارسال درخواست به روتینگ مورد نظرمون اون صفحه لود بشه که اینکار خود نکست انجام میده.

💠 داخل این فولدرهای سیستم روتینگ ما میتونیم از فایل‌های از پیش تعریف شده خاصی استفاده کنیم مثل layout.tsx که همونطور که از اسمش پیداست یک دربرگیرنده یا wrapper برای صفحه ما هستش که میتونیم یک لایه تعریف کنیم تا هم در همون صفحه و هم در صفحات داخلی وجود داشته باشه و ما رو از تکرار کد معاف میکنه.

🔅 نظر شما در مورد این سیتسم چیه؟ مزایا و معایبش رو میدونید؟

#nextjs #reactjs

Channel | Group | YouTube

♨️ سیستم Link و Navigating در نکست چگونه کار میکند؟
توی پست آشنایی با Routing رو در Nextjs این سیستم رو بررسی کردیم. حالا باید ببینیم چطوری باید بین صفحاتمون مختلف جا به جا بشیم و چه کارایی میشه در این سیستم انجام داد.

ما سه تا راه برای navigating یا ناوبری یا همون جابه‌جایی داریم:
💠 استفاده از کامپوننت <Link>
💠 استفاده از هوک useRouter (برای کلاینت کامپوننت‌ها)
💠 استفاده از تابع redirect (برای سرور کامپوننت‌ها)

🔆 استفاده از کامپوننت <Link>
در این روش از Link که یک built-in component یا کامپوننت داخلی خود نکست هستش، استفاده میشه. که در واقع در پس‌زمینه از همون تگ a خود html استفاده میکنه که یه سری ویژگی‌های جذابی بهش اضافه کرده مثل قابلیت prefetching که میاد اون route که وارد کردید رو پیش‌بارگذاری یا preload میکنه با اینکار وقتی کاربر اون لینک رو باز میکنه صفحه سریع‌تر بارگذاری خواهد شد (میتونید غیرفعالش کنید)

💢 در تصویر بالا میتونید نمونه کدش رو ببینید.

برای دیدن پست‌های بیشتر در این زمینه و ادامه دار بودنش پست رو 👍 کنید...

#nextjs #reactjs

Channel | Group | YouTube

♨️ هوک useRouter در Nextjs چه کاربردی دارد؟
در پست قبلی با کامپوننت Link در Nextjs آشنا شدیم. امروز میخوایم در مورد هوک useRouter در نکست بدونیم و یادش بگیریم.
این هوک یکی از روش های ناوبری یا navigation در نکست هستش که میتونیم توی کلاینت کامپوننت ها ازش استفاده کنیم.
استفاده ازش هم خیلی آسونه ما میتونیم با متد push که داره کاربر رو به مسیر دلخواه هدایت کنیم یا میتونیم مسیری که الان داخلش هستیم رو بگیریم و هر چیزی که برای سیستم navigating لازمه رو داخل خودش داره.

#reactjs #nextjs

Channel | Group | YouTube

♨️ آموزش ایجاد Loading برای کامپوننت‌ها در Next js

در پست آشنایی با Routing در Nextjs گفتیم که میتونید در سیستم App Router از فایل های از پیش تعریف شده‌ای مثل layout.jsx استفاده کنیم یکی دیگر از این نوع فایل ها loading.jsx می‌باشد. ما این فایل را در کنار فایل page.jsx داشته باشیم. با ایجاد این فایل نکست از قابلیت React Suspense استفاده میکند. با اینکار تا زمانی که اطلاعات ما به صورت کامل از سمت سرور دریافت نشده باشد، محتوای فایل loading.jsx نمایش داده خواهد شد که باعث بهبود سیستم UX و حتی SEO سایت خواهد شد.

🔅 همچین میتونید از این قابلیت روی edge runtimes و Node.js هم استفاده بکنید. اگه در این مورد نیاز به اطلاعت بیشتر داشتید میتونید در کامنت ها یا گروه مطرح کنید.

🌐 منبع (nextjs.org)
#nextjs #reactjs

Channel | Group | YouTube

🔥 فرانت‌اندکارا آماده اید! 🔥

اگه با ریکت،نکست یا تیلویند کار می‌کنید، shadcn/ui یه جعبه ابزار جادوییه!

🔰مجموعه‌ای از کامپوننت‌های آماده و از پیش ساخته که می‌تونید مستقیماً توی پروژه‌تون کپی کنید:

✅سبک، سریع و انعطاف‌پذیر - بدون نیاز به وابستگی زیاد
✅کاملاً رایگانه! بدون هیچ هزینه‌ای ازش استفاده کنید
✅با Tailwind CSS سازگاره - ۱۰۰٪ قابل تغییر با Tailwind CSS (رنگ،انیمیشن، هرچی دلتون می‌خواد!).
✅وابسته به یه کتابخونه خاص نیست، مثل MUI یا Ant Design که مجبور باشی تو قالب‌های خودشون کار کنی.
✅سازگار با React و Next.js و حتی Radix UI.
✅کامپوننت‌های آماده (دکمه، فرم، مدال، منو و ...) که می‌تونید مستقیم کپی کنید.

🔰چطور استفاده کنیم؟

برو به shadcn/ui و کامپوننت مورد نظرتو انتخاب کن.
توی ترمینال اینو بزن تا راه‌اندازی بشه:
bashCopy codenpx shadcn-ui@latest init

بعد، هر کامپوننتی می‌خوای، با یه دستور اضافه کن:

bashCopy codenpx shadcn-ui@latest add card

حالا کدا مال خودته! می‌تونی هرجور خواستی تغییرش بدی

پیش به سوی پروژه های خفن تر! 😎

#فرانت‌اند #React #NextJS #TailwindCSS #UI
Channel | Group | YouTube