How to retrieve a list of supported locales in Next.js 13?

[albertothedev]

In the Next.js 13 example, the LocaleSwitcher component toggles between two locally-defined locales. Needing to define the locales in place is bad practice, and this example doesn't work with more than two locales. Just as useLocale() retrieves the current locale, is there a way to get the list of supported locales defined in the middleware?

[amannn]

The Next.js 13 example is simplistic by intention. You can of course move your configuration to a separate module that you reference in all relevant places.

E.g.:

// src/config.ts
export default {
  locales: ['en', 'de'],
  defaultLocale: 'en'
};

Hope this helps!

[amannn]

Thanks for providing the details!

That's correct, this behavior is called excess property checking. I don't see a practical problem here if you pass additional unknown properties to the middleware, so I think this is ok. You can of course use something like lodash/pick if you want to avoid passing unnecessary properties.

[albertothedev]

Maybe I am too cautious, but for me the plausible case where I would add a non-existant property thinking of another library's configuration or misspell a property warrant the more strict type checking. When I use TypeScript I want it to behave consistently, like I know it should, instead of ending a day of bug fixing having learned the buzzword for one of its shortcomings.

Regardless of what's done about the type checking, I still think the example should feature more than two locales, which I think is a vastly more common use case. If you're open to the idea, I can submit a PR.

[amannn]

Sure, I understand your perspective. There are pros and cons in regard to excess property checking, balancing correctness and pragmatism. I wouldn't want to trade the job with the TypeScript team, it's probably hard enough to keep this balance and there will always be cases where users are put off by their decisions.

Thanks for kindly offering a pull request! I think for the time being I'd prefer the example to focus more on simplicity and the ability to easily copy-paste & modify code, without having to follow file references. I hope you can understand! I'll keep an eye open though for similar inquiries, this was the first time this topic came up so far.

[albertothedev]

Sure thing!

Keep up the good work, I have just spent the past weekend looking for an internationalization library for a project using Next.js 13, comparing Next.js 13's built-in support, next-i18next, next-translate, and this library and have chosen this one because of its features and sensible defaults and the fact that it's the only one that doesn't require you to write your own middleware.

The only missing feature is support for React Server Components but I see it's being worked on. Best of luck with your project!

FYI, in case you haven't heard, the Next.js team has said they will comment on the app directory's stability during the Vercel Ship event taking place this week.

[amannn]

That's great, glad to hear you've picked next-intl and thank you for the kind words!

Yep, RSC support is currently in beta. I know that many users already use it for their apps, there's a large feedback thread in the corresponding PR. The piece that's currently missing is SSG support, I really hope that upcoming React/Next.js features will enable this. And yes, I'm curiously following along with announcements! 🙂

Let me know how it goes in case you run into something else! 🙌