Add support for useTranslation in an API route (pages/api/*)

[natterstefan]

Is your feature request related to a problem? Please describe.

I am looking for an i18n-library that I can use in my Next app on both the client- and server-side (especially in API routes). At the moment I am using https://github.com/isaachinman/next-i18next, which does not solve the problem. I am also about to test https://github.com/vinissimus/next-translate#gett, which could be useful as well.

But I asked myself if next-intl could solve that problem as well for me.

In my current use case I try to find a way to use https://react-pdf.org/ in my current Next setup.

Describe the solution you'd like

Add pages/api/* support, like:

import useApiTranslations from 'next-intl/useApiTranslations'

export default async function handler(req, res) {
  const t = await useApiTranslations(req.query.__nextLocale, 'common')
  const title = t('title')

  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify({ title }))
}

ATM it is not possible to use it for instance because of this line:

next-intl/packages/next-intl/src/NextIntlProvider.tsx

Line 1 in 23aed9a

import {useRouter} from 'next/router';

Describe alternatives you've considered

As mentioned above, the idea came to me after seeing the getT feature in next-translate.

[amannn]

Hi, and thanks for the report! 🙂

As discussed via chat yesterday, the lower level library of next-intl, called use-intl, might be a good fit for react-pdf.

Can you try it out and let me know if it works for you?

[natterstefan]

Hi @amannn,

yes, I will try it as discussed. I'll let you know about the results.

Thanks for your help.

[natterstefan]

Hi @amannn,

I created an example and it works! 🚀

Thanks.

[amannn]

Really cool, thanks for sharing! 🙂