Native Support for next-view-transitions

[ahmetenesdur]

Is your feature request related to a problem? Please describe.

Yes. When using next-intl with next-view-transitions, the Link components don't work together directly.

The problem is:

• next-intl's Link uses locale-agnostic paths (e.g., /about)
• next-view-transitions' Link needs locale-prefixed paths (e.g., /en/about)

Currently, we need to:

1. Create custom wrapper components
2. Manually convert locale-aware hrefs to locale-prefixed URLs
3. Handle edge cases (like root path / → /en)

This is complex, error-prone, and breaks easily. There's already a discussion about this in the next-view-transitions repository, so it seems to be a common pain point.

Describe the solution you'd like

Add native support for next-view-transitions in next-intl so developers can use both libraries together seamlessly.

Option 1: Prop-based

import { Link } from '@/i18n/routing';

<Link href="/about" viewTransition>About</Link>

Option 2: Config-based

export const routing = defineRouting({
  locales: ['en', 'de'],
  defaultLocale: 'en',
  viewTransitions: true, // Enable globally
});

This would make next-intl's Link automatically work with next-view-transitions when enabled, without needing custom wrappers.

Describe alternatives you've considered

1. Custom wrapper components - This is what we're currently doing, but it's error-prone and requires maintenance
2. Using next-view-transitions' Link directly - But this loses all the locale-aware routing benefits from next-intl
3. Manual href conversion - Complex and breaks easily, especially with edge cases like root paths

Having native support in next-intl would be the cleanest solution and provide the best developer experience.

Additional Context

• next-intl: ^4.4.0
• next-view-transitions: ^0.3.4
• next: ^16.0.1
• react: ^19.2.0

Related Issues

• Related discussion in next-view-transitions: #38 - How to use this api with next-intl navigation wrapper?

[amannn]

Hey, thanks for raising this!

I think introducing a viewTransitions prop or config option would be difficult, as we'd have to pull in next-view-transitions as a dependency then.

Using a custom wrapper would be my first suggestion as well, the Link from next-view-transitions doesn't seem to be that much code and the useTransitionRouter hook seems to be exported as well by the library.

Alternatively, you could also do it the other way round and use the link from next-view-transitions while passing it an href based on getPathname.