next-intl conflicts with nextjs-toploader when both use custom useRouter

[flourine95]

🐛 Issue: next-intl conflicts with nextjs-toploader due to custom useRouter

❓ Question

How can I use both next-intl (with i18n routing) and nextjs-toploader in a Next.js App Router project, when both libraries rely on useRouter() and seem to conflict?

📦 Context

• I'm using Next.js 15 App Router with next-intl configured for i18n routing (/en/..., /vi/...) using the [locale]/ segment and middleware.ts.
• I want to display a top loading progress bar on route change using nextjs-toploader.
• However, once next-intl wraps or patches the router internally, nextjs-toploader no longer works properly — the loading bar doesn't show.

💥 What I’ve tried

• Placing <NextTopLoader /> inside app/[locale]/layout.tsx.
• Disabling spinner, customizing color and height.
• Avoiding multiple calls to useRouter() in the same component.
• Using without i18n routing mode (works, but I need localized URLs like /vi/...).

❗Expected Behavior

When using locale-prefixed routes (/vi/..., /en/...), I should still be able to use nextjs-toploader to indicate navigation progress during route changes.

✅ Ideal Solution

• An official recommendation on how to make both libraries work together without conflict.
• Or a workaround to trigger route-change loading manually (e.g. a hook or public API).

[amannn]

• next-intl wraps or patches the router internally

A note here: next-intl doesn't patch anything, but merely provides a convenience wrapper around Next.js' useRouter.

I'm not really familiar with nextjs-toploader, but this library seems to do some patching:

nextjs-toploader/src/index.tsx

Line 299 in 18caa97

history.pushState = (...args) => {

I'm not sure if this applies to this issue though.

If the feature request is just to invoke nprogress, I guess you could also call nprogress.start and done manually when using a different useRouter than the one from this library. Or just copy-paste https://github.com/TheSGJ/nextjs-toploader/blob/master/src/app.ts into your codebase and instead of importing from next/navigation, you could import a custom wrapped useRouter.