آریا ایمن — لندینگ (Next.js)

لندینگ شرکت آریا ایمن، مهاجرت‌یافته از Vite/React به Next.js (App Router) با خروجی کاملاً استاتیک، بهینه برای سئو و سرعت.

نصب

npm install

اجرا در حالت توسعه

npm run dev

سپس آدرس http://localhost:3000 را باز کنید.

Build (تولید نسخه نهایی استاتیک)

npm run build

خروجی در پوشه out/ ساخته می‌شود — مجموعه‌ای از فایل‌های HTML/CSS/JS کاملاً استاتیک که نیازی به سرور Node ندارند.

برای پیش‌نمایش محلی خروجی build:

npx serve out

آپلود روی هاست (Static Hosting)

این پروژه با output: 'export' پیکربندی شده، یعنی:

1. npm run build را اجرا کنید.
2. کل محتوای پوشه out/ را (نه خود پوشه، بلکه فایل‌های داخلش) در ریشه هاست (public_html، یا مشابه آن در cPanel/Nginx) آپلود کنید.
3. سایت بدون نیاز به Node.js یا هیچ سرور اختصاصی کار می‌کند.

نکات مهم هاست استاتیک (cPanel / Nginx / هاست ایرانی)

• ریدایرکت‌ها و هدرها در next.config.ts روی static export اجرا نمی‌شوند. اگر بعداً نیاز به ریدایرکت ۳۰۱ داشتید (مثلاً از /index.html)، باید در سطح هاست تنظیم شود:

  Apache (.htaccess):

  Redirect 301 /index.html /
  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
  </IfModule>
  ErrorDocument 404 /404.html
  

  Nginx:

  location = /index.html { return 301 /; }
  location /_next/static/ { expires 1y; add_header Cache-Control "public, immutable"; }
  error_page 404 /404.html;
  gzip on; gzip_types text/css application/javascript image/svg+xml;
  

پیش از دیپلوی واقعی — کارهایی که باید انجام دهید

این پروژه فعلاً با داده‌های تستی/placeholder برای موارد زیر ساخته شده و باید قبل از انتشار واقعی بررسی و اصلاح شوند:

1. دامنه واقعی: در فایل src/config/site.ts مقدار url: "https://ariaiman.ir" باید با دامنه نهایی واقعی جایگزین شود (این مقدار روی canonical، Open Graph، sitemap و JSON-LD اثر مستقیم دارد).
2. لوگوی رسمی: در همان فایل، logo فعلاً به تصویر hero اشاره می‌کند؛ یک فایل PNG/SVG لوگوی واقعی جایگزین شود.
3. آیکون‌های PWA: src/app/manifest.ts فعلاً بدون آیکون است. دو فایل icon-192.png و icon-512.png در public/ قرار داده و در manifest معرفی شوند.
4. تصویر Open Graph: یک فایل opengraph-image.png با ابعاد ۱۲۰۰×۶۳۰ در src/app/ قرار دهید (Next.js آن را به‌صورت خودکار شناسایی می‌کند).
5. شبکه‌های اجتماعی: در src/config/site.ts، آرایه socials خالی است. لینک‌های واقعی اینستاگرام/تلگرام/لینکدین را اضافه کنید تا در Schema.org (sameAs) درج شود.
6. فرم تماس: فرم بخش «تماس» فعلاً فقط یک شبیه‌سازی محلی است (بدون ارسال واقعی به سرور یا سرویس ایمیل) — دقیقاً همان رفتاری که در نسخه قبلی هم وجود داشت. برای فعال‌سازی واقعی باید به یک سرویس فرم (مثل فرم‌اسپری، ایمیل، یا API اختصاصی) متصل شود.
7. npm audit: یک آسیب‌پذیری «high» در نسخه postcss داخلی Next.js 15.5 گزارش می‌شود (npm audit). این مربوط به مرحله build/dev است، نه کد سمت کاربر نهایی. رفع کامل آن نیازمند ارتقا به Next.js 16 (breaking change) است — در صورت تمایل به‌روزرسانی جداگانه انجام شود.

چک‌لیست سئوی پیاده‌سازی‌شده

مورد	وضعیت	فایل
یک H1 با کلمه کلیدی اصلی	✅	src/components/sections/Hero.tsx
سلسله‌مراتب H2/H3 منطقی، بدون پرش سطح	✅	src/components/ui/SectionHead.tsx و همه سکشن‌ها
عنوان و توضیحات با طول مناسب	✅	src/config/site.ts
Canonical، metadataBase، Open Graph، Twitter Card	✅	src/app/layout.tsx
lang="fa" و dir="rtl"	✅	src/app/layout.tsx
JSON-LD (LocalBusiness + WebSite)	✅	src/lib/seo/schema.ts, src/components/seo/JsonLd.tsx
sitemap.xml	✅	src/app/sitemap.ts
robots.txt	✅	src/app/robots.ts
manifest.webmanifest	✅ (بدون آیکون — نیاز به تکمیل)	src/app/manifest.ts
صفحه ۴۰۴ واقعی (بدون ریدایرکت به خانه)	✅	src/app/not-found.tsx
alt توصیفی روی همه تصاویر محتوایی	✅	همه کامپوننت‌های سکشن
تمام متن در HTML بدون نیاز به اجرای JS	✅	تأیید شده با بررسی خروجی build
لینک‌های داخلی سالم (#anchor)	✅	بدون تغییر نسبت به نسخه اصلی
فونت خودمیزبان (self-hosted) بدون CDN خارجی	✅	public/fonts/, src/app/layout.tsx
تصاویر بدون وابستگی به CDN خارجی	✅	تصاویر Industries از pexels دانلود و داخلی شدند

معماری فنی مهاجرت

• Server Components برای محتوا: تمام بخش‌های بدون تعامل (Hero, About, Standards, TapeMarquee, Footer) به‌صورت Server Component هستند و در HTML build نهایی کامل قابل مشاهده‌اند.
• Client Components فقط برای تعامل: منو موبایل، فرم تماس، اسلایدر نظرات، پنل‌های تعاملی محصولات/خدمات، شمارنده آمار، کرسر سفارشی و Preloader، هرکدام جداگانه 'use client' هستند تا حجم JS اولیه صفحه کمینه بماند.
• بدون بک‌اند: هیچ app/api، دیتابیس یا server action اضافه نشده؛ طبق درخواست پروژه.
• انیمیشن ورودی Hero با CSS خالص: برخلاف نسخه اصلی (که H1 تا پایان انیمیشن Preloader با opacity:0 مخفی بود)، اکنون محتوای Hero همیشه در HTML اولیه قابل مشاهده است و فقط با CSS keyframes (بدون وابستگی به اجرای JS) وارد صفحه می‌شود — این تغییر برای رفع مشکل LCP/SEO با تأیید شما انجام شد.