How to always hide the defaultLocale?

[joggienl]

In opposite of the thread [i18n] Prefix for default locale, how can you make sure that the defaultLocale is always stripped from the url?

If you have for example three locales ['en', 'fr', 'nl'] and you set 'en' as default locale, NextJS will sometimes strip the locale from the url, and sometimes it doesn't. Having a fake default locale seems to be a valid solution for this. But if your (large) site already has hundreds, or maybe thousands, of urls.. how can you prevent the defaultLocale from ever being in the url? This is important because of SEO and all the places that where "good" before.

Getting the defaultLocale in the url is possible for example by having a link on the website (or some referring site) that has the defaultLocale as part of the url. We see quite some hits from Google that come in this way.

As a possible solution I tried a redirect in next.config.js and I also checked middleware.js. Only problem is that you do not have access to the original url (the defaultLocale is always stripped from that version). A redirect from next.config.js will give an error (to many redirects).

I also found a way of using NextRequestMeta symbol on the context.req object in getServerSideProps but that does not seem like a good solution. Links with <Link/> for example will still show the defaultLocale (because it will then client side render):

export async function getServerSideProps(context) {
  const NextRequestMetaSymbol = Reflect.ownKeys(context.req).find(
    (key) => key.toString() === 'Symbol(NextRequestMeta)',
  );

  if (
    NextRequestMetaSymbol &&
    context.req[NextRequestMetaSymbol] &&
    context.req[NextRequestMetaSymbol].__nextStrippedLocale
  ) {
    return {
      redirect: { destination: context.req.url, permanent: false },
    };
  }

  // do more interesting stuff here...
}

I am out of options at this point, curios if anyone has had the same "problem" and/or has any ideas on this.

[joggienl]

I also found this comment that basically says there should always be a redirect. It does not tell though if it also goes for urls like /en/some/deeper/path to /some/deeper/path because that does not always "redirect" (I do not technically see a redirect happening in situations where it does work).

#21076 (comment)

[joggienl]

When using the /pages folder, I found it better to use the suggested method in #18419 in stead of always trying to strip it. That would also make it easier when using the new app directory.

[sorcerb]

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { i18n } from '@/i18n.config';

export function middleware(request: NextRequest) {
    const pathname = request.nextUrl.pathname;
    const pathnameIsMissingLocale = i18n.locales.every(
        locale => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
    )

    // Rewrite if there is no locale
    const locale = i18n.defaultLocale;
    if (pathnameIsMissingLocale) {
        if (locale === i18n.defaultLocale) {
            return NextResponse.rewrite(new URL(`/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
                request.url));
        }
    }

    // Redirect to remove default locale prefix
    if (pathname.startsWith(`/${locale}`)) {
        return NextResponse.redirect(new URL(`${pathname.replace(new RegExp(`^/${locale}`), '')}`,
            request.url));
    }

}

export const config = {
    // Matcher ignoring `/_next/` and `/api/`
    matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}