My apologies. This release is broken because I did the build with the dependencies of another branch 😅 Use the 0.20.2 version instead.

In this release we introduce 3 new features! 🔥

What's new in this release?

1. Trans component using an object for components

Until now, it was only possible to define the Trans components as an array. Now we also support that components can be defined as an object:

// The defined dictionary enter is like:
// "example": "<component>The number is <b>{{count}}</b></component>",
<Trans
  i18nKey="common:example"
  components={{
    component: <Component />,
    b: <b className="red" />,
  }}
  values={{ count: 42 }}
/>

2. Use a default namespace on useTranslation hook

To avoid repetition, if in a component you always use the same namespace, you can tell the useTranslation hook so you don't have to indicate it each time.

const { t, lang } = useTranslation('ns1') // default namespace (optional)
const title = t('title') // no need to add the ns1: on front
const example = t('ns2:example', { count: 3 }) // You can use other namespaces

3. Define fallbacks when a translation doesn't exist

If no translation exists you can define fallbacks (string|Array<string>) to search for other translations:

const { t } = useTranslation()
const textOrFallback = t(
  'ns:text',
  { count: 1 },
  {
    fallback: 'ns:fallback',
  }
)

List of fallbacks:

const { t } = useTranslation()
const textOrFallback = t(
  'ns:text',
  { count: 42 },
  {
    fallback: ['ns:fallback1', 'ns:fallbac2'],
  }
)

In Trans Component:

<Trans
  i18nKey="ns:example"
  components={[<Component />, <b className="red" />]}
  values={{ count: 42 }}
  fallback={['ns:fallback1', 'ns:fallback2']} // or string with just 1 fallback
/>

FEATURES

• Support components trans as object #336 (by @aralroca)
• Default ns on useTranslation hook #335 (by @aralroca)
• Implement fallbacks #333 (by @aralroca)

PATCHES

• Add docs about save language #337 (by @aralroca)
• Add fallback typescript type #334 (by @aralroca)
• Fix getStaticProps with getStaticPaths #322 (by @aralroca)

Note: 🚨

For the future version 1.0 we are working to eliminate the "build step" with a fairly simple migration without losing features but gaining: hotrelading/refresh, no more pages_ workaround (working in the same Next.js pages folder), de-duping logic, improving TypeScript support, making it easier to migrate to future changes in the Next.js core and making next-translate easier to maintain and test.

At the moment it is being developed in an experimental branch: 1.0.0-experimental, and prereleases are being taken out so that you can try it out. In fact we would love it if you could contribute by testing the experimental version and reporting issues or PR in order to stabilize it 😊.