بازسازی‌شده از یک نمونه‌ی اولیه‌ی نیمه‌کاره با React و Vite. همه‌ی صفحه‌ها در زمان بیلد پیش‌رندر می‌شوند، هیچ دیتابیس و APIای وجود ندارد، و همه‌ی محتوا در ماژول‌های تایپ‌شده زیر src/content قرار دارد.
چالش
همین پورتفولیو: یک سایت کاملاً ایستای Next.js بدون بک‌اند، با فایل‌های محتوای تایپ‌شده و یک ایمیج Docker که از طریق Coolify روی VPS دیپلوی می‌شود. به دو زبان فارسی و انگلیسی.
نسخه‌ی قبلی یک خطای ظریف داشت که ارزش نام بردن دارد: کارت‌های پروژه یک prop می‌گرفتند و بعد نادیده‌اش می‌گرفتند، و یک پروژه را چهار بار نمایش می‌دادند. هیچ‌چیز کرش نکرد، هیچ هشداری داده نشد - سایت فقط بی‌صدا دروغ می‌گفت. بازسازی طوری سازمان‌دهی شده که برگشتن این دسته از باگ‌ها از نظر ساختاری سخت باشد.
کاری که کردم
- محتوا داده است، نه markup. هر متن در یک رکورد تایپ‌شده زیر src/content قرار دارد و کامپوننت‌ها همان چیزی را نمایش می‌دهند که به آن‌ها داده می‌شود.
- هر پروژه یک فایل، همه در یک آرایه‌ی واحد. حذف یک پروژه یعنی حذف یک خط - صفحه‌ی فهرست، صفحه‌ی اصلی، sitemap و ساخت routeهای ایستا همه از همان آرایه می‌خوانند، پس هیچ لینکی به صفحه‌ای که دیگر وجود ندارد باقی نمی‌ماند.
- هیچ بک‌اندی وجود ندارد. نه API route، نه دیتابیس، نه server action؛ صفحه‌ی تماس از لینک‌های mailto: و tel: استفاده می‌کند، پس چیزی برای روشن نگه داشتن یا ایمن کردن نیست.
- SCSS Modules به‌جای یک فریم‌ورک utility، با رنگ‌ها و فاصله‌هایی که به‌صورت CSS custom property متمرکز شده‌اند، نه کدهای hex تکرارشده در stylesheetها.
- به شکل یک ایمیج Docker مستقل منتشر می‌شود، تا دیپلوی روی VPS دقیقاً همان چیزی باشد که به‌صورت محلی بیلد و تست شده.
- دو زبانه با یک ساختار: متن فارسی هر پروژه در فایلی کنار نسخه‌ی انگلیسی است و تصاویر، رنگ و فهرست تکنولوژی‌ها میان دو زبان مشترک‌اند.
ویژگی‌های کلیدی
- کاملاً ایستا - همه‌ی routeها در زمان بیلد پیش‌رندر می‌شوند.
- افزودن یا حذف یک پروژه فقط یک فایل را تغییر می‌دهد.
- بیلد چندمرحله‌ای Docker روی خروجی standalone در Next.js.
- فارسی و انگلیسی، با تشخیص خودکار زبان بازدیدکننده و حالت شب.
نتیجه
سایتی که به‌روزرسانی‌اش سریع است و اجرایش تقریباً هزینه‌ای ندارد، و مدل محتوایش کاری را انجام می‌دهد که قبلاً با به خاطر سپردن انجام می‌شد.
