https://github.com/wave-play/pilot-i18next
Support for i18next in Pilot router
https://github.com/wave-play/pilot-i18next
Last synced: about 1 year ago
JSON representation
Support for i18next in Pilot router
- Host: GitHub
- URL: https://github.com/wave-play/pilot-i18next
- Owner: Wave-Play
- License: mit
- Created: 2022-10-11T06:24:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-13T16:25:48.000Z (over 3 years ago)
- Last Synced: 2025-03-27T15:55:57.153Z (about 1 year ago)
- Language: TypeScript
- Size: 1.27 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Pilot i18Next
[](https://github.com/Wave-Play/pilot-i18next/blob/main/LICENSE) [](https://github.com/Wave-Play/pilot-i18next/actions)  [](https://bundlephobia.com/result?p=@waveplay/pilot-i18next)
**Support for i18next in Pilot router**
## Install
Using NPM
```bash
npm install @waveplay/pilot-i18next next-i18next
```
Using Yarn
```bash
yarn add @waveplay/pilot-i18next next-i18next
```
## Getting started
Register your translations with this module using the built-in CLI.
```bash
pilot-i18next build
```
This assumes that your i18n translations exist inside `/public/locales`. All this command does is copy those translations into the module 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`
```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`
```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`
```tsx
const ExamplePage = () => {
const { t } = useTranslation('common');
return (
{t('title')}
);
};
```
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. This is because this module exports `next-i18next` on 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`
```ts
export * from '@waveplay/pilot-i18next/dist/index';
```
> `pilot-i18next.native.ts`
```ts
export * from '@waveplay/pilot-i18next/dist/index.native';
```
... and change your imports in your code to use this file instead.
> `App.tsx`
```ts
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](https://waveplay.com).
## License
The MIT License.