نوا
فضایی · SPATIAL UI
پنجره‌های شناور در عمق، داک پایین صفحه و سایه‌های نرم؛ حس محصول فناوری.
NEXT.JS · SSG · SEO
تکنولوژی
طراحی سایت با Next.js
طراحی سایت با Next.js یعنی صفحه‌هایی که پیش از درخواست کاربر ساخته شده‌اند: سریع برای بازدیدکننده، شفاف برای گوگل. ما همان تکنولوژی‌ای را به کار می‌بریم که این سایت روی آن ساخته شده است.
- سرعت بارگذاریزیر ۱ ثانیه
- شروع قیمت۳۰ میلیون تومان
- زمان تحویل۲۰ تا ۳۰ روز
مسئلهTHE PROBLEM
سایت کند، گوگل را هم کند می‌کند.
- 01
قالب سنگین
ده‌ها افزونه و اسکریپت که حتی صفحه‌ی خالی را سه ثانیه منتظر نگه می‌دارند.
- 02
سئوی فنی ناقص
متا، Schema و نقشه‌ی سایتی که هر صفحه را نمی‌شناسد؛ گوگل نصف سایت را نمی‌بیند.
- 03
توسعه‌ی پرهزینه
هر امکان تازه یک افزونه‌ی دیگر و یک ریسک امنیتی دیگر.
نیاز شما، کار ماNEEDS → FIXES
کسب‌وکاری که سایت سریع و سئوپذیر می‌خواهد واقعاً به چه نیاز دارد؟
پنج نیازی که در گفت‌وگو با صاحبان این کسب‌وکار بیشتر از همه شنیده‌ایم، و کاری که برای هر کدام انجام می‌دهیم.
- نیاز 01
سایتی که روی اینترنت موبایل ایران هم سریع باز شود
صفحه‌ها از قبل ساخته و از نزدیک‌ترین سرور تحویل داده می‌شوند؛ LCP زیر ۱٫۲ ثانیه را قبل از تحویل اندازه می‌گیریم.
- نیاز 02
دیده شدن در گوگل بدون دست‌کاری‌های فنی مداوم
متا، Schema، Sitemap و Canonical برای هر صفحه‌ی تازه خودکار ساخته می‌شود.
- نیاز 03
افزودن صفحه و مقاله بدون انتظار برای برنامه‌نویس
پنل مدیریت محتوا یا CMS متصل؛ صفحه‌ی تازه با یک کلیک منتشر می‌شود.
- نیاز 04
هزینه‌ی سرور پایین با ترافیک بالا
بیشتر صفحه‌ها استاتیک‌اند؛ روی هاست معمولی یا CDN هم با هزاران بازدید هم‌زمان کار می‌کنند.
- نیاز 05
امنیت بدون دردسر به‌روزرسانی افزونه‌ها
بدون افزونه‌های آسیب‌پذیر؛ کد اختصاصی، هدرهای امنیتی و بکاپ منظم.
امکاناتWHAT YOU GET
چرا Next.js
یک چارچوب، سه حالت ساخت صفحه؛ برای هر صفحه همان را که لازم دارد انتخاب می‌کنیم.
- SSG و ISRصفحه‌های ثابت یک بار ساخته می‌شوند و از CDN تحویل داده می‌شوند؛ تغییرات بدون بیلد کامل به‌روز می‌شوند.
- سئوی فنی از ریشهعنوان، توضیح، Canonical، hreflang، Schema و Sitemap برای هر صفحه، خودکار.
- Core Web Vitals سبزتصاویر بهینه، فونت محلی و جاوااسکریپت کم؛ LCP و CLS در محدوده‌ی خوب گوگل.
- امن و بدون افزونهسطح حمله‌ی کوچک؛ بدون افزونه‌ی ناشناس و بدون پنل در معرض دید.
- پنل مدیریت محتوابلاگ، صفحه‌ها و محصولات از پنل؛ بدون نیاز به برنامه‌نویس برای هر تغییر.
- آماده‌ی رشداز سایت معرفی تا فروشگاه و پلتفرم؛ همان پایه، بدون بازنویسی.
از کد تا صفحه‌ی اول
- طراحی UI
- ساخت با Next.js
- بیلد استاتیک
- CDN
- ایندکس گوگل
- رتبه و فروش
نمونه‌طراحی صفحه‌ی اصلیLIVE DEMOS
سه طراحی، سه زبان بصری برای Next.js
هر دمو صفحه‌ی اصلی کامل یک کسب‌وکار فرضی است، با عکس‌های واقعی و همان قواعد UX همین صفحه. روی هر کدام بزنید تا در اندازه‌ی دسکتاپ، تبلت یا موبایل ببینید.
آمارک
مینیمال · QUIET MINIMAL
حروف نازک، حاشیه‌ی زیاد و فهرست شماره‌دار؛ فقط آنچه لازم است.
داده‌نما
تایپوگرافی جنبشی · KINETIC TYPE
کلمه‌های غول‌آسا، عکس داخل تیتر و نوارهای متحرک؛ برندی که با حرف‌هایش دیده می‌شود.
پنل مدیریتADMIN
پنلی که با تیم شما کار می‌کند
محتوا در یک پنل ساده نوشته می‌شود و سایت خودش به‌روز می‌شود. سرعت سایت Next.js را بدون پیچیدگی‌اش به دست می‌آورید.
- ویرایش صفحه و بلاگ بدون کدنویسی
- پیش‌نمایش قبل از انتشار
- نقش‌های دسترسی برای تیم
- گزارش سرعت و ایندکس
استاندارد فنیBUILT TO RANK
استاندارد فنی هر پروژه
TypeScript
کدی که خطا را پیش از انتشار می‌گیرد و سال بعد هم خوانا می‌ماند.
Tailwind و دیزاین سیستم
رنگ، فاصله و تایپوگرافی یکدست؛ صفحه‌ی تازه در ساعت، نه هفته.
Headless CMS یا API اختصاصی
محتوا از Laravel، Strapi یا هر منبع دیگری؛ هر کدام که با کسب‌وکار جور است.
استقرار ساده
خروجی استاتیک روی هاست معمولی، یا Node روی سرور؛ هزینه‌ی نگهداری پایین.
راهنمای تجربه‌ی کاربریUX GUIDELINES
قواعد تجربه‌ی کاربری برای سایت Next.js.
همین قواعد را در هر سه نمونه‌طراحی بالا هم به کار برده‌ایم.
- 01محتوای اول، اسکریپت بعدمتن و تصویر اصلی در HTML اولیه می‌آیند؛ کاربر و گوگل منتظر جاوااسکریپت نمی‌مانند.
- 02بدون جهش صفحهابعاد تصاویر و فونت‌ها از قبل رزرو می‌شوند؛ دکمه زیر انگشت جابه‌جا نمی‌شود (CLS نزدیک صفر).
- 03ناوبری بی‌رفرشرفتن بین صفحه‌ها مثل اپلیکیشن است؛ صفحه‌ی بعد از قبل آماده شده.
- 04تصویر به اندازه‌ی صفحههر دستگاه تصویر هم‌اندازه‌ی خودش را می‌گیرد؛ نه بیشتر.
- 05دسترس‌پذیری از ساختارتیترهای مرتب، فوکوس کیبورد و متن جایگزین؛ هم برای کاربر هم برای سئو.
بازاریابی و رشدGROWTH PLAN
آنچه کنار سایت لازم دارید.
سئوی تکنیکال کامل
Sitemap، Schema و Canonical خودکار برای هر صفحه‌ی تازه.
لندینگ کمپین در ساعت
قالب‌های آماده‌ی دیزاین سیستم؛ صفحه‌ی کمپین بدون انتظار برای برنامه‌نویس.
رهگیری دقیق
GA4 و رویدادهای تبدیل از روز اول؛ بدون کند کردن صفحه.
بلاگ سریع
مقاله‌ها استاتیک ساخته می‌شوند؛ ترافیک ارگانیک بدون هزینه‌ی سرور.
تست A/B سبک
تیتر و دکمه‌ها قابل آزمایش، بدون ابزار سنگین سمت کاربر.
شاخص‌هایی که اندازه می‌گیریم:LCP زیر ۱٫۲ ثانیهصفحه‌های ایندکس‌شدهترافیک ارگانیکنرخ تبدیل
مقایسهCOMPARE
پیج، قالب آماده یا سایت اختصاصی برای Next.js؟
هر سه راه حضور آنلاین است؛ تفاوتشان در این است که چه چیزی را خودکار می‌کنند و چه چیزی را به شما می‌سپارند.
| ویژگی | پیج اینستاگرام / دایرکتوری | قالب آماده | سایت اختصاصی اودوب |
|---|---|---|---|
| سرعت روی اینترنت موبایل | متوسط | کند با افزونه‌ها | زیر یک ثانیه |
| سئوی فنی (Schema، Sitemap) | ندارد | با افزونه | خودکار در کد |
| امنیت | — | وابسته به افزونه‌ها | بدون افزونه‌ی آسیب‌پذیر |
| هزینه‌ی سرور با ترافیک بالا | — | رو به افزایش | پایین (استاتیک/CDN) |
| توسعه‌ی بعدی | ندارد | محدود به قالب | ماژولار و آزاد |
| مالکیت کد | ندارد | قالب | کامل، مال شما |
سرعت روی اینترنت موبایل
- پیج اینستاگرام / دایرکتوری
- متوسط
- قالب آماده
- کند با افزونه‌ها
- سایت اختصاصی اودوب
- زیر یک ثانیه
سئوی فنی (Schema، Sitemap)
- پیج اینستاگرام / دایرکتوری
- ندارد
- قالب آماده
- با افزونه
- سایت اختصاصی اودوب
- خودکار در کد
امنیت
- پیج اینستاگرام / دایرکتوری
- —
- قالب آماده
- وابسته به افزونه‌ها
- سایت اختصاصی اودوب
- بدون افزونه‌ی آسیب‌پذیر
هزینه‌ی سرور با ترافیک بالا
- پیج اینستاگرام / دایرکتوری
- —
- قالب آماده
- رو به افزایش
- سایت اختصاصی اودوب
- پایین (استاتیک/CDN)
توسعه‌ی بعدی
- پیج اینستاگرام / دایرکتوری
- ندارد
- قالب آماده
- محدود به قالب
- سایت اختصاصی اودوب
- ماژولار و آزاد
مالکیت کد
- پیج اینستاگرام / دایرکتوری
- ندارد
- قالب آماده
- قالب
- سایت اختصاصی اودوب
- کامل، مال شما
زمان‌بندی پروژهTIMELINE
طراحی سایت Next.js، قدم به قدم.
از جلسه‌ی کشف تا انتشار؛ هر مرحله تحویل مشخص دارد و شما در هر قدم نسخه‌ی قابل دیدن می‌گیرید.
- ۱
هفته‌ی ۱
کشف و ساختار
اهداف، نقشه‌ی صفحه‌ها و کلمات کلیدی
- ۲
هفته‌ی ۲
طراحی
دیزاین سیستم و صفحه‌های کلیدی
- ۳
هفته‌ی ۳–۴
توسعه
Next.js، CMS و اتصال‌ها
- ۴
هفته‌ی ۵
سئو و سرعت
Schema، تست Core Web Vitals و ریدایرکت‌ها
- ۵
تحویل
انتشار
آموزش پنل، مستندات و پایش
قیمت
شروع از ۳۰ میلیون تومان
قیمت نهایی به صفحه‌ها، امکانات و اتصال‌ها بستگی دارد؛ بعد از جلسه‌ی کشف رایگان، برآورد دقیق و بدون هزینه‌ی پنهان می‌دهیم.
راهنما
راهنمای طراحی سایت با Next.js
Next.js فریم‌ورکی بر پایه‌ی React است که صفحه‌ها را پیش از رسیدن به مرورگر می‌سازد. نتیجه، سایتی است که هم مثل اپلیکیشن روان است و هم مثل یک صفحه‌ی HTML ساده برای گوگل خوانا.
Next.js برای چه سایت‌هایی مناسب است؟
هر جا سرعت و سئو هم‌زمان مهم است: سایت شرکتی پربازدید، فروشگاه با هزاران محصول، مجله و بلاگ، و لندینگ‌های کمپین. اگر قرار است سایت سال‌ها رشد کند و تیم بازاریابی مدام صفحه‌ی تازه بسازد، Next.js انتخاب امنی است.
برای یک سایت کوچک چندصفحه‌ای که قرار نیست تغییر کند، گاهی قالب آماده به‌صرفه‌تر است؛ در جلسه‌ی کشف صادقانه می‌گوییم.
تفاوت Next.js با وردپرس
وردپرس با افزونه‌ها کار می‌کند و هر افزونه کمی کندی و یک ریسک امنیتی اضافه می‌کند. در Next.js همه‌چیز کد اختصاصی است؛ سریع‌تر و امن‌تر، ولی تغییرات بزرگ به برنامه‌نویس نیاز دارد. برای پر کردن این فاصله، پنل محتوا را طوری می‌سازیم که کارهای روزمره بدون برنامه‌نویس انجام شود.
- سرعت: معمولاً ۲ تا ۴ برابر سریع‌تر
- امنیت: بدون افزونه‌ی شخص ثالث
- سئو: رندر سمت سرور و Schema خودکار
- هزینه‌ی اولیه: کمی بیشتر از قالب وردپرسی
هزینه‌ی طراحی سایت با Next.js
قیمت به تعداد صفحه‌ها، اتصال‌ها (درگاه، CRM، API) و پنل مدیریت بستگی دارد. سایت شرکتی اختصاصی از ۳۰ میلیون تومان و فروشگاه از ۴۰ میلیون تومان شروع می‌شود.
- تعداد قالب صفحه، نه تعداد کل صفحه‌ها
- نیاز به CMS یا پنل اختصاصی
- اتصال به سیستم‌های موجود
- چندزبانه بودن
سئو در سایت‌های Next.js
HTML کامل از سرور می‌آید؛ گوگل منتظر جاوااسکریپت نمی‌ماند. Core Web Vitals سبز، ساختار تیترها و داده‌ی ساخت‌یافته از روز اول در کد است. برای رشد پایدار، سئو و محتوا را کنار طراحی برنامه‌ریزی کنید.
واژه‌نامه
اصطلاح‌هایی که در طراحی سایت Next.js زیاد می‌شنوید.
- SSR و SSG
- رندر صفحه روی سرور یا هنگام ساخت؛ HTML کامل پیش از رسیدن به مرورگر، که برای گوگل و سرعت حیاتی است.
- Core Web Vitals
- سه معیار گوگل برای تجربه‌ی کاربر: سرعت نمایش (LCP)، پایداری چیدمان (CLS) و پاسخ به تعامل (INP).
- ISR
- به‌روزرسانی تدریجی صفحه‌های ساخته‌شده بدون بازسازی کل سایت؛ مناسب فروشگاه و مجله.
- Headless CMS
- پنل محتوایی که از ظاهر سایت جداست و محتوا را از راه API به Next.js می‌دهد.
برای Next.js شما چه لازم است؟ جلسه‌ی کشف رایگان است.
شروع گفتوگوچکلیستLAUNCH CHECKLIST
چک‌لیست سایت Next.js پیش از انتشار
هشت چیزی که پیش از روشن کردن سایت باید سر جایش باشد. سایت فعلی‌تان را با آن بسنجید.
۰ از ۸
مورد را بزنید تا تیک بخورد؛ پیشرفت در همین مرورگر می‌ماند.
سؤال‌های پرتکرارFAQ
درباره‌ی طراحی سایت با Next.js
Next.js با وردپرس چه فرقی دارد؟
وردپرس هر صفحه را با هر بازدید از نو می‌سازد و به افزونه‌ها تکیه دارد؛ Next.js صفحه را از قبل می‌سازد و کد اختصاصی است. نتیجه: سرعت بیشتر، امنیت بیشتر و سئوی فنی دقیق‌تر.
خودم می‌توانم محتوا را تغییر بدهم؟
بله. پنل مدیریت محتوا تحویل می‌شود و آموزش آن جزو پروژه است؛ برای متن، تصویر و مقاله به برنامه‌نویس نیاز ندارید.
روی هاست معمولی ایران اجرا می‌شود؟
بله. خروجی استاتیک Next.js روی هر هاست اشتراکی اجرا می‌شود؛ برای امکانات سمت سرور، سرور مجازی Node پیشنهاد می‌دهیم.
قیمت طراحی سایت با Next.js چقدر است؟
طراحی اختصاصی از ۳۰ میلیون تومان شروع می‌شود و فروشگاه از ۴۰ میلیون. قیمت نهایی به تعداد صفحه‌ها، اتصال‌ها و پنل بستگی دارد.
سایت فعلی‌ام را به Next.js منتقل می‌کنید؟
بله، با حفظ آدرس‌ها و ریدایرکت ۳۰۱ تا رتبه‌های گوگل از دست نرود؛ محتوا هم منتقل می‌شود.
سایت Next.js روی هاست اشتراکی ایرانی اجرا می‌شود؟
بله؛ خروجی استاتیک روی هر هاست معمولی اجرا می‌شود. برای امکانات سمت سرور، سرور مجازی یا هاست Node لازم است.
بعد از تحویل، خودم می‌توانم محتوا را تغییر دهم؟
بله؛ با پنل محتوا متن، تصویر، مقاله و صفحه‌های تازه را خودتان منتشر می‌کنید.
سایت وردپرسی فعلی را می‌شود به Next.js منتقل کرد؟
بله؛ محتوا منتقل و ریدایرکت‌ها تنظیم می‌شوند تا رتبه‌های فعلی حفظ شوند.
قدم بعد
سایت بعدی شما، روی Next.js.
بگویید چه می‌خواهید بسازید؛ می‌گوییم کدام بخش باید استاتیک باشد و کدام پویا.
تماسTELEGRAM
درباره‌ی سایت Next.js پیام بدهید
چند خط از کسب‌وکار و نیازتان بنویسید؛ برآورد اولیه و پیشنهاد مسیر را رایگان می‌گیرید.
- تماس تلفنی · شنبه تا پنجشنبه، ۱۰ تا ۱۹+98 919 235 3960
- تلگرام مستقیم@mbdigital_ir
- زمان پاسخکمتر از یک روز کاری
با پر کردن فرم، پیام شما اینجا ساخته می‌شود.
همین متن در تلگرام آماده‌ی ارسال است؛ فقط دکمه‌ی ارسال را می‌زنید.