redirect does not respect as-needed locale prefix

[jorgemoya]

Description

When using locale prefix as-needed, I would expect redirect to respect this configuration, instead it will append default locale. This is not how using Link behaves, so it is unexpected. For non default locales, I would expect for redirect to append locale prefix.

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://next-intl-redirect-issue-of1rlux37-jorgemoyas-projects.vercel.app/

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Click on Click to redirect
3. Error: Notice how default locale is appended to url. Navigating with header links works as expected.

Expected behaviour

The expected behavior would be to respect the as-needed locale prefix configuration and for navigation within the default locale to ignore appending locale, much like using the Link component. For non default locales it would be fine to append locale prefix.

[amannn]

Thanks for the report! I'm currently working on a re-implementation of the navigation APIs in #1316 in order to address some long-standing issues. I think the issue you've reported can be solved too as part of that, I've put this on my list!

This is currently my top priority, I'll keep you updated!

[amannn]

The feedback raised in this issue has been addressed as part of an upcoming createNavigation function (currently available as a prerelease here: #1391). In case you decide to give it a spin, let me know if everything works as expected for you!

Also, thanks again for the great feedback here! 🙏❤️

[DevOsaWebsite]

@amannn HI!

next: 14.2.4
next-intl: 3.21.0-canary.0

When use the Link component from routing, for links to the default locale you expect an href like

domain.com

but you get

domain.com/defaultLocale

DOM render

<a hreflang="en" href="/en/tools"> but expect href="/tools"

This does not interfere with user navigation (307 redirect works well). But it is a problem for SEO.
Because when crawling a site, non-existent pages will end up in the Google index. Thus eating up the crawling budget. Also disrupting internal linking, eating up link weight...

I suspect the problem is here:

function getLocalePrefix(locale, localePrefix) {
  var _localePrefix$prefixe;
  return localePrefix.mode !== 'never' && ((_localePrefix$prefixe = localePrefix.prefixes) === null || _localePrefix$prefixe === void 0 ? void 0 : _localePrefix$prefixe[locale]) ||
  // We return a prefix even if `mode: 'never'`. It's up to the consumer
  // to decide to use it or not.
  '/' + locale;
}

missing if locale === defaultLocale ...

[amannn]

@DevOsaWebsite Thanks for providing feedback here!

Some questions:

1. Besides updating the version, did you upgrade to createNavigation?
2. Are you referring to the markup resulting from the server side render, or the final markup after hydration that renders in the browser?
3. Are you using domains in combination with localePrefix: 'as-needed'?

Please refer to #1316, you should find an answer there.

[jorgemoya]

@amannn Sorry for not testing this in time, but it works as expected, thank you!

[mfkrause]

@amannn I'm still experiencing this issue on 3.22. I'm using createNavigation and do not use domains. Here's the routing file:

export const routing = defineRouting({
  locales: ['en-US', 'de-DE'],
  defaultLocale: 'de-DE',
  localePrefix: {
    mode: 'as-needed',
    prefixes: {
      'en-US': '/en',
    },
  },
  pathnames: {
    '/': '/',
    // ...
  },
});

export const { Link, redirect, usePathname, useRouter, getPathname } = createNavigation(routing);

When I use the exported Link component like so:

'use client';
import { useParams } from 'next/navigation';
import { Link, usePathname } from '@/i18n/routing';
import { useTranslations, useLocale } from 'next-intl';

const SomeComponent = () => {
  const pathname = usePathname();
  const params = useParams();
  const t = useTranslations();
  const locale = useLocale();

  return (
    <Link
      href={{
        pathname,
        params,
      }}
      locale={locale === 'de-DE' ? 'en-US' : 'de-DE'}
      className="text-sm">
        {t('links.switchLanguage')}
    </Link>
  );
}

The resulting tag will still have the superfluous de-DE prefix. The redirection works.

Any clue?

Edit: Sorry, I just noticed this issue here is about redirect, not Link. If I read the PR for createNavigation correctly, the issue I'm describing should be fixed as well though, no?

[amannn]

@mfkrause There's some background on this here: #1316 (comment).

Does that make sense? Maybe I should mention this in the docs somewhere (updated).