چند وقت پیش در یکی از پروژه‌هایی که با Next.js توسعه می‌دادم، نیاز به یک loading bar داشتم تا هنگام navigation نمایش داده بشه.

چند پکیج رو امتحان کردم، اما تقریبا همه‌شون یکی از این مشکلات رو داشتن:
- خیلی از پکیج‌ها با App Router به‌خوبی کار نمی‌کردند
- با دکمه‌های back/forward مرورگر کار نمی‌کردند
- امکان نمایش UI سفارشی به عنوان loading هنگام navigation وجود نداشت

برای همین تصمیم گرفتم یک پکیج سبک، قابل سفارشی سازی و سازگار با App Router و Pages Router توسعه بدم:

ابزار nextjs-progress

چند قابلیت کلیدی:
- پشتیبانی کامل از App Router و Pages Router
- پشتیبانی از TypeScript و JavaScript
- امکان نمایش UI سفارشی به جای progress bar
- تشخیص back/forward مرورگر
- و Link و useRouter اختصاصی
- و useProgress برای کنترل دستی

اگر از Next.js استفاده می‌کنی و دنبال یک راه‌حل پایدار برای نمایش loading هنگام navigation هستی تا تجربه کاربری رو بهبود ببخشی، این پکیج دقیقا برای همین ساخته شده.

https://github.com/thehadikarimi/nextjs-progress
https://www.npmjs.com/package/nextjs-progress


@DevTwitter | <Hadi Karimi/>