Issue with default language and localePrefix: 'as-needed' in next-intl #1896

danielpeci · 2025-05-18T15:36:12Z

danielpeci
May 18, 2025

Hi everyone,

I'm having trouble with my Next.js application using next-intl for internationalization. Specifically, I'm struggling with the default language behavior when using localePrefix: 'as-needed'. My goal is to assign english to the root / and in languages I would love to have the prefix /de, /it and so on. I tried different approaches, and so far I only have a solution, that I get redirected to the root language. But as soon as I write other paths that exist, for example /about/me, I get 404 error (since this "language" is not found). So I would love to have a clean approach, and set /en as default.

Here's my current setup:

// src/i18n/routing.ts
import {defineRouting} from 'next-intl/routing';
import {internalization} from './config'
import {createNavigation} from 'next-intl/navigation'

export const routing = defineRouting({
    locales: ['en', 'de', 'it'],
    defaultLocale: 'en',
    localePrefix: 'as-needed',
    pathnames: {
        '/': '/',
    }
})

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

// src/middleware.ts
import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
 
export default createMiddleware(routing);
 
export const config = {
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
};

//src/i18n/navigation.ts
import {createNavigation} from 'next-intl/navigation';
import {routing} from './routing';

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

//src/app/[locale]/layout.tsx
export default async function RootLayout({
                                             children,
                                             params
                                         }: {
    children: React.ReactNode;
    params: Promise<{ locale: string }>;
}) {
    const {locale} = await params;

    if (!hasLocale(routing.locales, locale)) {
        notFound();
    }

    setRequestLocale(locale);

    return (
        <html lang={locale} suppressHydrationWarning>
        <body className={inter.className} suppressHydrationWarning>
        <NextIntlClientProvider>
            <Providers>
                <header className="bg-background pl-4 pr-4 md:pl-8 md:pr-8">
                    <Navigation/>
                </header>
                <main className="min-h-screen bg-background md:px-8 md:pb-8 md:pt-4">
                    {children}
                </main>
                <Footer/>
            </Providers>
        </NextIntlClientProvider>
        </body>
        </html>
    );
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issue with default language and localePrefix: 'as-needed' in next-intl #1896

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Issue with default language and localePrefix: 'as-needed' in next-intl #1896

Uh oh!

danielpeci May 18, 2025

Replies: 0 comments

danielpeci
May 18, 2025