Routing to default Locale if trying to use an unsupported locale

[gablabelle]

Hello,

Is there a way to make unsupported locales route to default locale?

For example if our app supports the following:

en-CA (default)
fr-CA

and receives unsupported de-DE then it routes to en-CA ?

The problem is that our next.js app is embedded in Microsoft Teams which is basically an iframe and we specify the URL of our app with this format:

http://example.com/{locale}/home

Teams then replace the {locale} by the locale string (used by the current user accessing the embedded app).

Since we only support a subset of the locales they support, we don't want to get 404s for the unsupported locales but rather re-route to our default locale.

We would prefer not having to manually specify each of these unsupported locales in next.config.js's redirects because this doesn't scale.

[aralroca]

Yes, I think you can use the rewrites feature from Next.js https://nextjs.org/docs/api-reference/next.config.js/rewrites

[gablabelle]

@aralroca This worked, thanks.

       async redirects() {
          return [
            // Unsupported language that we could be received in URL via
            // 3rd party integrations (i.e Microsoft Teams)
            // that we can't map to our app locales.
            {
              source: '/(..|..-.[^/]+)/:path*', // Could be the following formats: ru kk-kz es-419 ca-es-VALENCIA
              destination: '/:path*',
              permanent: false,
            },
          ];
        }