Locale prefix should be removed from Link href with 'as-needed' middleware

[gkielwasser]

Description

Go on a page with a local that is not the default locale.
The Link href is not respecting setting 'as-needed' from middleware and therefore is displaying the local prefix from the default local.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

sandbox

Reproduction description

Steps to reproduce:

1. Click on "de" link
2. check the link for "en" link
3. See displayed href is '/en/about' instead of '/about'

Expected behaviour

Whatever the current local is, the Link href should not display the local prefix with 'as-needed' middleware.

[amannn]

The link points to /en/about only when you're on the de locale. This is required, because we don't know about the as-needed strategy of the middleware in this situation. However, clicking on the link will result in the correct URL.

Note that this only applies if you're switching the locale. If you're already on the en locale (i.e. no prefix in your case), then the link will point to /about. This optimization can be achieved because if we're on the client side, the current locale is en and we notice that it is not present in the URL, then the strategy must be as-needed.

I'm closing this since this is already working as intended. In 3.0 we've switched the default for localePrefix to always since it's a better default that avoids edge cases like this.

Hope this helps!

[zipme]

hi @amannn , because we are using domains setting and because one domain corresponds to one language so we set localePrefix: "never". However, when using the <Link> component from createLocalizedPathnamesNavigation, the ssr version of the <a>, the href is always prefixed with the locale, but once it's hydrated the prefix is gone, this would have certain impact on the SEO.

I forked the above sandbox and changed the localePrefix: "never", as you can see from this sandbox that the en link, when hovered, shows /about, but if you go check the source code it has locale prefix in it.

<a hrefLang="en" style="padding:4px;font-family:system-ui, sans-serif;line-height:1.5" href="[/en/about](https://ghtsqf-3000.csb.app/en/about)">en</a>

Besides this, is there a way to not auto redirect to the unprefixed version and localized path? Current if you visit /en/about-us it got redirected to /about-us, and if you have localized path and visiting a path from another language it got redirected to the path of the current language. Is there a way to just yield 404 instead of 307 redirect?

Thanks a bunch!

[amannn]

@zipme This is discussed here: #444

[gkielwasser]

as-needed

hi @amannn

I'm not sure to understand "because we don't know about the as-needed strategy of the middleware in this situation". LocalePrefix strategy isn't something decided at project layer ? Why it should be inferred from somewhere, appart from project config?

In the meantime to avoid all my pages not using the default languages, and that are pointing to the default locale, having a "known in advance" redirection, I had to use a wrapper arround next-intl Link to use either next-intl Link or Next default Link.

something like this

import NextLink from 'next/link'
import { Link as IntlLink } from "/utils/navigation"

const _Link = ({
   locale,
   ...props
}) => {
 const locale = useLocale()

 const isDefaultLocale = locale === DEFAULT_LOCALE
 const useNextLink = !isDefaultLocale && (props.locale === DEFAULT_LOCALE)
 const Link = useNextLink ? NextLink : IntlLink 
 
return <Link
  {...props}
 />
}