@waveplay/pilot-i18next

Pilot i18Next

Support for i18next in Pilot router

Install

Using NPM

npm install @waveplay/pilot-i18next next-i18next

Using Yarn

yarn add @waveplay/pilot-i18next next-i18next

Getting started

Register your translations with this module using the PilotJS CLI. We assume that your i18n translations are inside the /public/locales directory.

npx pilotjs-cli build:locales

All this command does is copy those translations into /assets and generate a import-resource.js for internal use.

Basic usage

Wrap your app export with the appWithTranslation function. This will automatically add the i18n instance + resources to your app's context.

App.tsx

const App = () => {
  // ... your code
};
export default appWithTranslation(App);

Include serverSideTranslations in your returned props from your getServerSideProps function. Be sure to specify the namespaces you want to load.

example-page.tsx

export const getServerSideProps = async (context) => {
  const { locale } = context;

  return {
    props: {
      ...(await serverSideTranslations(locale, ['common']))
    }
  };
};

You're now ready to use the useTranslation hook in your components!

example-page.tsx

const ExamplePage = () => {
  const { t } = useTranslation('common');

  return (
    <View>
      <Text>{t('title')}</Text>
    </View>
  );
};

It's recommended to import the useTranslation hook directly from react-i18next.

Common issues

Your bundler may complain about the fs module not being found. That's because this module exports next-i18next for web builds, which are not meant to be used on native.

To fix this, create two files named the same way, but one with a .native.ts extension like this:

pilot-i18next.ts

export * from '@waveplay/pilot-i18next/dist/index';

pilot-i18next.native.ts

export * from '@waveplay/pilot-i18next/dist/index.native';

... and change your imports in your code to use this file instead.

App.tsx

import { appWithTranslation, serverSideTranslations } from './pilot-i18next';

Your bundler should now happily import only the .native version on native builds, keeping the fs issue away.

Credits

This project was originally developed for WavePlay.

License

The MIT License.