How to ignore default locale prefix?

[sachithrrra]

Is there a way to ignore the default locale prefix in the site?
I'd like to keep it like this for English: https://example.com/about instead of this: https://example.com/en/about

thanks!

middleware.ts

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  // A list of all locales that are supported
  locales: ["en", "de", "fr", "es", "it", "ja", "nl", "pl", "pt", "ru", "sv"],

  // Used when no locale matches
  defaultLocale: "en",
});

export const config = {
  // Match only internationalized pathnames
  matcher: ["/", "/(en|de|fr|es|it|ja|nl|pl|pt|ru|sv)/:path*"],
};

i18n.ts

import { getRequestConfig } from "next-intl/server";
import { notFound } from "next/navigation";

// Can be imported from a shared config
const locales = [
  "en",
  "de",
  "fr",
  "es",
  "it",
  "ja",
  "nl",
  "pl",
  "pt",
  "ru",
  "sv",
];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

config.ts

import { LocalePrefix, Pathnames } from "next-intl/routing";

export const defaultLocale = "en" as const;
export const locales = [
  "en",
  "de",
  "fr",
  "es",
  "it",
  "ja",
  "nl",
  "pl",
  "pt",
  "ru",
  "sv",
] as const;

export const pathnames: Pathnames<typeof locales> = {
  "/": "/",
};

export const localePrefix: LocalePrefix<typeof locales> = "always";

export const port = process.env.PORT || 3000;
export const host = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : `http://localhost:${port}`;

[amannn]

Yes, you're looking for localePrefix: 'as-needed'

[stylehuan]

The localePrefix is already set to ‘as-needed’ but it’s not working

[amannn]

Two problems:

1. The localePrefix is not passed to the middleware
2. The matcher is off

Please carefully review the docs.

[stylehuan]

I’ve read the documentation many times, but I still don’t quite understand.

The localePrefix doesn’t seem to be used anywhere in the middleware.
How should I interpret “matcher is off”?

[shiny]

It's not working for me too. I'm new to next-intl, the experience of turing “as-needed” on was a bit bumpy.

[shiny]

Thanks to @amannn's guide, I've worked it out, the key is middleware.ts

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
    locales: ["en", "de", "fr", "es", "it", "ja", "nl", "pl", "pt", "ru", "sv"],
    // 'as-needed' should pass to createMiddleware
    localePrefix: 'as-needed',
    defaultLocale: "en",
});

export const config = {
    // We should skip the internal routes
    matcher: ["/((?!api|static|.*\\..*|_next).*)", '/(zh-CN|en)/:path*']
};

[SamX23]

Thanks @shiny,

Hi, @amannn let me know if my case is possible.

Let say, I want both "/" and "/en" working, so it should not automatically redirect to "/en" whenever I visit the "/" page.
Is this possible ?

[amannn]

You can configure the localePrefix to either always use a prefix, or only when necessary (i.e. not for the default locale). Supporting both patterns at the same time is not supported, no.

Theoretically, you can configure the locale prefix of middleware dynamically by composing the middleware, but I wouldn't recommend it.

[SamX23]

I see, thanks