نسخه Next.js

بازگشت به فهرست

بسته Novira شامل دو نسخه از یک طراحی است. این فصل مخصوص نسخه Next.js است. اگر نسخه HTML را استفاده می‌کنید، فصل‌های ۱ تا ۱۲ برای شماست.

کدام نسخه را انتخاب کنم؟

اگر ...	نسخه مناسب
می‌خواهید فایل‌ها را مستقیم روی هاست اشتراکی کپی کنید	HTML
می‌خواهید قالب را به وردپرس یا لاراول تبدیل کنید	HTML
Node.js نصب نیست و نمی‌خواهید نصب کنید	HTML
پروژه را با React و TypeScript ادامه می‌دهید	Next.js
می‌خواهید بعداً به API واقعی وصل شوید	Next.js
سبد خرید باید بین صفحات باقی بماند	Next.js

هر دو نسخه دقیقاً همان ظاهر، همان رنگ‌ها و همان صفحات را دارند. فایل‌های novira-*.css بدون تغییر بین دو نسخه مشترک‌اند.

پیش‌نیازها

Node.js نسخه ۲۰ یا بالاتر (نسخه ۲۲ پیشنهاد می‌شود)
npm (همراه Node نصب می‌شود)
ویرایشگر با پشتیبانی TypeScript (VS Code پیشنهاد می‌شود)

بررسی نسخه نصب‌شده:

node -v
npm -v

اجرای پروژه

npm install
npm run dev

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

بار اول npm install چند دقیقه طول می‌کشد؛ دفعات بعد سریع است.

دستورهای موجود

دستور	کار
`npm run dev`	اجرای حالت توسعه با ری‌لود خودکار روی پورت ۳۰۰۰
`npm run build`	بیلد Node در پوشه `.next/`
`npm start`	اجرای بیلد Node (بعد از `npm run build`)
`npm run build:static`	خروجی کاملاً استاتیک در پوشه `out/`
`npm run preview`	پیش‌نمایش خروجی استاتیک روی `http://localhost:3030`
`npm run typecheck`	بررسی تایپ‌ها بدون تولید خروجی
`npm run lint`	اجرای ESLint

صفحه شروع

صفحه اول سایت (/) صفحه معرفی نسخه Next.js است و خود فروشگاه روی /shop قرار دارد.

اگر می‌خواهید فروشگاه صفحه اول باشد، محتوای app/page.tsx و app/shop/page.tsx را با هم جابه‌جا کنید و لینک‌های /shop را به / تغییر دهید.

ساختار پوشه‌ها

app/                 مسیرها؛ هر پوشه یک صفحه
  layout.tsx         چیدمان ریشه، فونت‌ها و NoviraProvider
  page.tsx           صفحه معرفی (مسیر /)
  shop/page.tsx      صفحه اصلی فروشگاه
  globals.css        ورودی Tailwind و استایل‌های سراسری
components/
  layout/            هدر، فوتر، دراور موبایل، دراپ‌داون سبد، ویجت پشتیبانی
  pages/             برای هر مسیر یک فایل content
  profile/           پوسته پروفایل و بخش‌های آن
  ui/                کارت محصول، اسلایدر، آیکون‌ها، تایمرها
  providers/         NoviraProvider، وضعیت مشترک کل سایت
lib/                 توابع کمکی: قیمت، اعداد فارسی، مسیرها، احراز هویت
lib/data/            داده‌های نمونه با تایپ مشخص
styles/              فایل‌های CSS قالب، مشترک با نسخه HTML
public/images/       تصاویر
types/               تایپ‌های دامنه
theme/               نسخه HTML اصلی، دست‌نخورده

نقشه مسیرها

/ · /shop · /fresh · /fashion · /bazaar · /category/[slug] · /product/[id] · /cart · /shipping · /payment · /profile · /profile/[section] · /blog · /blog/[slug] · /faq · /login · /coming-soon · /demo

پارامترهای آدرس نسخه HTML حفظ شده‌اند:

پارامتر	صفحه	کار
`?state=empty`	پروفایل	نمایش حالت خالی
`?demo=empty`	سبد خرید	نمایش سبد خالی
`?sort=` `?brand=` `?view=` `?page=`	دسته‌بندی	فیلتر، مرتب‌سازی و صفحه‌بندی
`?cat=`	بلاگ	فیلتر دسته
`?slug=` `?label=`	به‌زودی	عنوان و متن صفحه

تفاوت‌ها با نسخه HTML

نسخه HTML	نسخه Next.js
هر صفحه یک `x-data` جدای Alpine	کامپوننت‌های React و وضعیت مشترک در `NoviraProvider`
هدر در ۲۷ فایل تکرار شده	یک کامپوننت `Header` با اسلات برای بخش‌های متغیر
۲۰ فایل `profile-*.html`	مسیر `/profile` و `/profile/[section]`
سبد خرید با هر جابه‌جایی خالی می‌شد	سبد در Provider نگه داشته می‌شود
`output.css` از پیش کامپایل‌شده	Tailwind v4 از روی کد JSX ساخته می‌شود

شخصی‌سازی

رنگ برند

رنگ‌ها در متغیرهای CSS تعریف شده‌اند. فایل styles/novira.css را باز کنید:

:root {
  --ds-brand: #EF4056;
  --ds-brand-dark: #D32F45;
}

با تغییر همین دو مقدار، دکمه‌ها، برچسب‌ها و تاکیدهای کل سایت عوض می‌شوند.

داده‌های نمونه

همه محصولات، دسته‌ها، بنرها و متن‌ها در lib/data/ هستند و تایپ دارند. برای اتصال به API واقعی، همین فایل‌ها را با فراخوانی سرور جایگزین کنید؛ کامپوننت‌ها همان شکل داده را می‌گیرند.

lib/data/home.ts        بنرها، استوری‌ها، ردیف‌های صفحه اصلی
lib/data/products.ts    محصولات مشترک
lib/data/category.ts    محصولات صفحه دسته‌بندی و فیلترها
lib/data/profile.ts     سفارش‌ها، پیام‌ها، آدرس‌ها
lib/data/navigation.ts  مگامنو و لینک‌های فوتر

تصاویر

تصاویر در public/images/ هستند. در کد از کامپوننت Img (فایل components/ui/img.tsx) استفاده می‌شود تا در حالت نصب در زیرپوشه هم آدرس درست بماند. برای تصویر جدید، همین کامپوننت را به کار ببرید نه تگ img خام.

فونت

فونت‌های Dana، Rokh و PlusJakartaSans در app/fonts/ قرار دارند و در styles/novira-theme-base.css تعریف شده‌اند. فونت وزیرمتن هم در styles/novira-next.css تنظیم شده است.

اضافه کردن یک صفحه جدید

پوشه‌ای در app/ بسازید، مثلاً app/about/
فایل page.tsx را داخلش بسازید:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'درباره ما | نوویرا',
};

export default function AboutPage() {
  return درباره ما;
}

هدر و فوتر از app/layout.tsx به‌صورت خودکار اعمال می‌شوند.