
ملور — وبسایت خدمات و نمونهکارهای توسعهدهنده
وبسایتی چندزبانه برای معرفی خدمات و پروفایل حرفهای توسعهدهنده، ساختهشده با Next.js، React و TypeScript.
- Next.js
- React
- TypeScript
- CSS
- Google Apps Script
- Cloudflare Workers
- نقش من
- توسعهدهنده — فرانتاند و API تماس
- سهم من
- توسعهٔ کامپوننتهای قابل استفادهٔ مجدد، ناوبری واکنشگرا و نقطهٔ پایانی سمت سرور برای فرم تماس، همراه با افزودن محتوای چندزبانه.
- چالش فنی
- یک وبسایت باید چیدمان راستبهچپ فارسی و چپبهراست انگلیسی و هلندی را با ناوبری هماهنگ پشتیبانی کند و اطلاعات محرمانهٔ سرویس ایمیل را در سرور نگه دارد.
- راهکار
- کامپوننتهای مشترک React با استفاده از مسیرهای زبانی و فایلهای ترجمهٔ JSON، محتوا را به هر زبان نمایش میدهند. یک Route Handler در Next.js دادههای فرم تماس را اعتبارسنجی و برای سرویس ایمیل ارسال میکند.
- نتیجه
- صفحات خدمات و پروفایل توسعهدهنده به سه زبان، همراه با API تماس و فرادادههای اختصاصی پروفایل پیادهسازی شدهاند.
مطالعهٔ موردی پروژه
زمینهٔ پروژه
ملور خدمات وب و پروفایل شخصی توسعهدهنده را در یک برنامه ارائه میکند. پروفایل، هویت و ناوبری مشخص خود را دارد و در عین حال از چیدمانها و کامپوننتهای مشترک استفاده میکند.
پیادهسازی
- ساخت کامپوننتهای اختصاصی React برای صفحهٔ اصلی، جزئیات خدمات، مراحل کار، سوابق توسعهدهنده و فرم تماس با CSS واکنشگرا.
- پیادهسازی فایلهای ترجمهٔ فارسی، انگلیسی و هلندی، مسیرهای زبانی، تغییر زبان با حفظ مسیر جاری و ویژگیهای lang و dir در سطح سند.
- پیادهسازی POST /api/contact با اعتبارسنجی سمت سرور، محدودیت اندازه و زمان درخواست، بررسی مبدأ و محدودیت نرخ ارسال. لایهٔ ارسال از درخواستهای امضاشده با HMAC به Google Apps Script و سرویس جایگزین Resend پشتیبانی میکند.
- افزودن نشانیهای canonical، نسخههای زبانی، فرادادههای Open Graph، دادههای ساختاریافته، robots.txt و نقشهٔ سایت چندزبانه.
- استفاده از اندازهبندی تصاویر Next.js، فونتهای محلی، تولید صفحات ایستا، بخشبندی معنایی، برچسب فیلدهای فرم، کنترل با صفحهکلید و پشتیبانی از کاهش حرکت.
تصمیمهای معماری
- نگهداری متن ترجمهها در فایلهای JSON و مدیریت جهت نوشتار در کامپوننتهای مشترک، برای استفاده از یک پیادهسازی مشترک در هر سه زبان.
- استفاده از Server Component برای محتوای صفحات و Client Component برای ناوبری تعاملی، تغییر زبان و وضعیت فرم تماس.
- نگهداری اطلاعات محرمانهٔ سرویس ایمیل در تنظیمات سرور و ارائهٔ وضعیتهای کنترلشدهٔ ارسال به مرورگر، بدون نمایش پاسخ داخلی سرویس.
- نگهداری تنظیمات ساخت OpenNext و Cloudflare Workers و بررسی خودکار ترجمهها، مسیرها، فرادادهها و پردازش فرم تماس.
تصاویر وبسایت عمومی

