Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی | برنامه نویسی وب
9.17K subscribers
658 photos
355 videos
90 files
814 links
اگر با جاوااسکریپت مشکل داری، این چنل مخصوص خودته 🤝

دوبله بهترین دوره های جاوااسکریپت و ریکت دنیا رایگان:
https://t.iss.one/DeepDevs/2166

تبلیغات و تبادل نداریم

گروه اصلی برای پرسش و پاسخ:
@DeepDevsGpOriginal

گروه چت:
@InstaDevsGp
Download Telegram
#React #Form #Survey #WebDevelopment #JavaScript #ReactHookForm #SurveyJS


💡 کتابخانه‌های React برای ساخت فرم و نظرسنجی ها:
📌اگر تو هم از ساخت فرم‌ها و نظرسنجی‌ها توی React خسته شدی، باید بدونی که تنها نیستی! 😅

🔰اما خبر خوب اینه که کتابخانه‌هایی مثل SurveyJS وReact Hook Form به راحتی می‌تونن این کار رو برات ساده کنن. 🚀

🔗از مدیریت استیت گرفته تا ولیدیشن و حتی طراحی پویا این کتابخانه‌ها تمام مشکلاتت رو با فرم‌ها حل می‌کنن. 💪

🔍 روی این لینک بزن تا مقاله اش رو بخونی😉

Channel | Group | YouTube
9👍1
Forwarded from Hossein Rezaei Channel
🚀 رزومه ساز حرفه ای با Next.js

سلام دوستان! 👋

امروز میخوام پروژه جدیدم رو باهاتون به اشتراک بذارم. یک رزومه ساز کاملاً رایگان و حرفه ای که با Next.js و TypeScript ساخته شده!

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

🎨 7 تم زیبا و متنوع:
📄 ساختار A4 استاندارد: با صفحه بندی مناسب برای چاپ PDF
🌍 پشتیبانی کامل از فارسی: RTL و فونتهای زیبا
ویرایشگر پیشرفته: با پیش نمایش زنده
📱طراحی واکنشگرا: روی همه دیوایس ها عالی کار میکنه


🛠️ تکنولوژی های استفاده شده:
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- Radix UI
- Lucide Icons


🎯 دو لایوت مختلف:
استاندارد: چند صفحه ای برای رزومه های کامل
مینیمال: تک صفحه ای برای درخواسته ای سریع


🌐 دمو آنلاین:
https://cv-builder-gilt-three.vercel.app

🔗 لینک پروژه:
https://github.com/h3nrzi/cv-builder-nextjs

اگه این پروژه براتون مفید بود، یه بهش بدید و نظراتتون رو بگید!

#NextJS #TypeScript #OpenSource #Resume #CV #Persian #Farsi #WebDevelopment
1🔥204👌4❤‍🔥1
⭐️ ساختار پروژه (Project Structure) در Next.js

🗂️ 1. پوشه‌های سطح بالا (Top-level folders)

- دایرکتوری app: قلب اپلیکیشن؛ جایی‌که مسیرها، صفحات، layout ها و کامپوننت‌ها قرار دارند.
- دایرکتوری pages: روتینگ قدیمی (Pages Router).
- دایرکتوری public: فایل‌های استاتیک (تصاویر، آیکون‌ها، و …).
- دایرکتوری src: اختیاری؛ برای جداسازی کد اپلیکیشن از فایل‌های پیکربندی.



📄 2. فایل‌های مهم سطح بالا (Top-level files)

- فایل next.config.js: تنظیمات Next.js
- فایل package.json: وابستگی‌ها و اسکریپت‌ها
- فایل env. : متغیرهای محیطی
- فایل eslint.config.mjs: پیکربندی ESLint
- فایل tsconfig.json / jsconfig.json: تنظیمات مسیرها و TypeScript/JS


🧭 3. فایل‌های روتینگ

در Next.js از فایل‌های خاصی برای کنترل UI، رندر و رفتار مسیر استفاده میشه:

- فایل page.js: صفحه قابل دسترسی
- فایل layout.js: لایوت مشترک
- فایل loading.js: اسکلت لودینگ
- فایل error.js: مرتبط به خطاهای اپلیکشن
- فایل not-found.js: برای 404
- فایل route.js: برای API endpoint


🧩 4. مسیرهای تو در تو (Nested Routes)

هر پوشه یک بخش از URL را نشان می‌دهد.
مثال: app/blog/authors/page.tsx: مسیر blog/authors/



🔢 5. مسیرهای داینامیک (Dynamic Routes)

- مسیر [slug]: پارامتر تک
- مسیر [slug...]: همه مسیرها (catch-all)
- مسیر [[slug...]]: catch-all اختیاری


🗃️ 6. گروه‌بندی مسیرها (Route Groups)

برای سازماندهی بدون تغییر URL:

app/(marketing)/page.js → URL = /


🔒 7. پوشه‌های خصوصی (folder_)

پوشه‌هایی که با علامت _ شروع می‌شوند، وارد روتینگ نمی‌شوند و برای نگه‌داری:
- تابع‌ها
- یوآی داخلی
- فایل‌های کمکی



#Nextjs #NextjsAppRouter #ProjectStructure #WebDevelopment #Frontend #ReactJS #JavaScript #WebDev #Coding #Programmer #DevCommunity
#LearnNextJS

Channel | Group | YouTube
🔥22👍54❤‍🔥3👌1