بازسازی پروژهٔ Next.js؛ فراتر از مرتب کردن پوشه‌هابازسازی پروژهٔ Next.js؛ فراتر از مرتب کردن پوشه‌هابازسازی پروژهٔ Next.js؛ فراتر از مرتب کردن پوشه‌هابازسازی پروژهٔ Next.js؛ فراتر از مرتب کردن پوشه‌هابازسازی پروژهٔ Next.js؛ فراتر از مرتب کردن پوشه‌ها

مدیریت زبان‌های انگلیسی و ایتالیایی رو بازنگری کردم تا لینک‌ها، زبان انتخاب‌شده رو در URL در نظر بگیرن. صفحهٔ 404 هر دو زبان هم نیاز به رسیدگی داشت؛ از لینک‌های درست تا جلوگیری از خطاهای hydration.

ترجمه شدن متن صفحه، تمام ماجرای چندزبانه بودن نیست. مسیرهای ناوبری و حالت‌های خطا هم باید با زبان کاربر هماهنگ بمونن.

• پیاده‌سازی سنگین smooth scrolling رو حذف کردم؛ حلقهٔ دائمی requestAnimationFrame اون در این پروژه به CPU فشار می‌آورد.
• برای کاهش هزینهٔ رندر موقع اسکرول از content-visibility استفاده کردم و blurهای سنگین رو در نمایشگرهای کوچک کنار گذاشتم.
• رندر carousel رو تغییر دادم تا فقط تصویر فعال رندر بشه، نه اینکه همهٔ تصاویر هم‌زمان بارگذاری و decode بشن.
• صفحهٔ Home دیگه برای نمایش چند preview، کل دادهٔ مقاله‌ها، پروژه‌ها و سرویس‌ها رو دریافت نمی‌کرد.
• داده‌های غیرضروری رو از Client Componentها به Server Componentها منتقل کردم و یک bundle بزرگ سمت کلاینت حذف شد.

تغییرات رو با lint، build نسخهٔ production، بررسی ترجمه‌ها و assetها و smoke test مسیرها و APIها بررسی کردم. نتیجه‌ای که در پست توضیح دادم، فشار کمتر روی مرورگر و اسکرول و ناوبری سبک‌تر بود.

نکتهٔ اصلی برای من این بود که انتخاب Next.js فقط نقطهٔ شروعه. داده‌های حجیم سمت کلاینت، decode کنترل‌نشدهٔ تصاویر و افکت‌های پرهزینه همچنان روی تجربهٔ کاربر اثر می‌ذارن. در این پروژه، مشخص‌تر کردن مرز سرور و کلاینت و کنترل بهتر رندر بود که تفاوت ایجاد کرد.