پرش به محتوای اصلی
خدمات
React / Next.js

توسعه وب

وب‌سایت و اپلیکیشن با React و Next.js. SSR، راست‌چین فارسی، سئو و Core Web Vitals برای رتبه و تبدیل بهتر؛ نه فقط ظاهر مدرن.

این خدمت برای چه پروژه‌ای است؟

توسعه وب در DevOff یعنی ساخت وب‌سایت یا اپلیکیشن تحت‌وب که از اول برای فارسی، راست‌چین و ایندکس گوگل طراحی شود، نه پوسته‌ای که بعداً به زور RTL شود. مخاطب رایج: محصول SaaS، پنل مدیریت، سایت بازاریابی با فرم تماس، و فرانت محصولی که API جدا دارد.

اگر هدف فقط یک لندینگ استاتیک بدون حساب کاربری است، همین استک جواب می‌دهد؛ اگر محصول باید نوبت، فرم یا قرارداد را در پنل فارسی نگه دارد، مسیر همان App Router و رندر سمت سرور است. نمونه‌ی محصول خودمان: نوبیتا و فرمیتا.

توسعه وب با Next.js چیست؟

صفحه با React و Next.js ساخته می‌شود. عنوان، توضیح متا و متن اصلی در HTML خام می‌آیند تا خزنده برای دیدن محتوا به اجرای کلاینت وابسته نباشد. دامنهٔ canonical سایت www.devoff.ir است؛ در پروژهٔ شما هم یک مبدأ مشخص می‌شود تا نسخهٔ www و بدون www قاطی نشود.

راست‌چین ساختاری است: dir="rtl"، فونت عربی، و فاصلهٔ منطقی CSS. ترجمهٔ برچسب کافی نیست. فرم‌ها، جدول و منو باید در موبایل خوانا بمانند.

از کشف نیاز تا استقرار چه می‌گذرد؟

کار با جلسهٔ کشف نیاز شروع می‌شود: صفحهٔ پول کدام است، ورود و نقش‌ها چیست، و آیا محتوا از فایل استاتیک می‌آید یا از API. بعد معماری: App Router، احراز هویت، و اینکه تصویر و فونت چطور کش می‌شوند.

توسعه اسپرینت دو هفته‌ای است با دمو روی محیط تست. قبل از انتشار، مسیرهای عمومی برای عنوان، H1 و لینک داخلی چک می‌شوند. استقرار معمولاً کانتینر و پروکسی است؛ جزئیات را در خدمات DevOps نوشته‌ایم.

مالکیت کد پس از تسویه به کارفرما می‌رسد. مخزن در اختیار شماست، نه قفل روی ابزار داخلی ما.

استک و تصمیم فنی

Next.js، React، TypeScript و Tailwind همان پایه‌ای است که خود سایت DevOff هم با آن ساخته شده. اگر پنل به Django وصل می‌شود، فرانت از API نسخه‌بندی‌شده می‌خواند؛ قرارداد فیلدها در OpenAPI می‌ماند. برای اتصال سیستم‌ها ببینید توسعه API.

PWA وقتی معنا دارد که کاربر باید صفحه را روی موبایل مثل اپ باز کند. Service Worker را برای هر پروژه جدا تصمیم می‌گیریم؛ روی سایت بازاریابی ساده اغلب لازم نیست.

Core Web Vitals را با عدد آزمایشگاه یا سرچ کنسول می‌سنجیم، نه با شعار. ادعای نمرهٔ ثابت Lighthouse روی این صفحه نمی‌آید چون به میزبان و محتوا بستگی دارد.

خروجی قرارداد و قدم بعدی

خروجی معمول: وب‌سایت یا اپ production، مستندات فنی، و آموزش کوتاه برای تیمی که محتوا یا محصول را نگه می‌دارد. گزارش عملکرد را وقتی در محدودهٔ قرارداد باشد، بعد از استقرار روی محیط واقعی می‌دهیم.

قیمت از روی محدوده است، نه از روی یک عدد ثابت روی سایت. پکیج‌ها در قیمت‌گذاری است؛ استعلام دقیق بعد از کشف نیاز.

چه پروژه‌ای را نباید با این خدمت شروع کرد؟

اگر نیاز اصلی اپ فروشگاهی نیتیو با قابلیت آفلاین سنگین است، مسیر توسعه اپلیکیشن موبایل است. اگر فقط API بدون UI می‌خواهید، توسعه API کافی است.

پرسش‌های پرتکرار

آیا وردپرس هم تحویل می‌دهید؟

مسیر پیش‌فرض Next.js است. اگر محتوا باید در CMS جدا بماند، اتصال را در معماری می‌بینیم؛ قول قالب آمادهٔ وردپرس روی این خدمت نیست.

سئو را جدا فاکتور می‌کنید؟

عنوان، canonical، نقشهٔ سایت و دادهٔ ساختاری در تحویل وب هست. تولید مقالهٔ بلاگ یا کمپین لینک جداست و در قرارداد نوشته می‌شود.

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

در جلسه کشف نیاز وب چه می‌پرسیم؟

صفحهٔ ورود و صفحهٔ پول کدام‌اند. محتوا را تیم شما می‌نویسد یا از محصول می‌آید. آیا چند دامنه یا نسخهٔ انگلیسی لازم است؛ اگر نیست، hreflang اضافه نمی‌کنیم. فرم تماس به همان API جنگو می‌رود یا جدا می‌ماند.

تصویر شاخص و ویدیو اگر باشد، فرمت و حجم را همان جلسه می‌بندیم تا LCP حدس نباشد. اگر بلاگ می‌خواهید، مدل انتشار (فایل در مخزن یا سامانهٔ جدا) را می‌نویسیم. تولید هفتگی مقاله داخل این خدمت نیست مگر در قرارداد محتوا آمده باشد.

نگهداری بعد از انتشار

به‌روزرسانی Next.js و وابستگی‌ها، تمدید گواهی، و شکستن فرم بعد از تغییر API را در پکیج نگهداری می‌بینیم. خودتان می‌توانید محتوا را عوض کنید اگر مسیرش را در آموزش تحویل داده باشیم. دسترسی ادمین جنگو جدا از ویرایش متن استاتیک است.

اگر محصول آماده است نه سایت سفارشی، صفحهٔ محصولات را ببینید نه این خدمت.

هفتهٔ اول معمولاً مخزن، محیط تست، و یک صفحهٔ واقعی با عنوان و H1 درست است. هفتهٔ دوم فرم یا ورود. اگر این دو جلو نرود، استک را عوض نمی‌کنیم؛ محدوده را کوچک می‌کنیم. متن انگلیسی را روی رابط فارسی پیش‌فرض نمی‌گذاریم مگر محصول دو زبانه در قرارداد باشد.

ویژگی‌ها

  • Next.js App Router و SSR
  • طراحی واکنش‌گرا و RTL
  • metadata سمت سرور و اندازه‌گیری Core Web Vitals
  • PWA و Service Worker
  • یکپارچه‌سازی CMS

تکنولوژی‌ها

Next.js
React
TypeScript
Tailwind CSS

تحویل‌ها

  • • وب‌سایت production
  • • گزارش Lighthouse
  • • مستندات فنی
  • • آموزش تیم

آماده ساخت محصول بعدی هستید؟

جلسه مشاوره رایگان ۳۰ دقیقه‌ای — بدون تعهد، فقط گفتگوی صادقانه درباره اهداف شما.