https://github.com/fakundo/next-i18next-ext
Next integration with i18next
https://github.com/fakundo/next-i18next-ext
i18n i18next internationalization next next-i18next
Last synced: about 1 month ago
JSON representation
Next integration with i18next
- Host: GitHub
- URL: https://github.com/fakundo/next-i18next-ext
- Owner: fakundo
- Created: 2022-10-03T20:00:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2026-02-09T20:41:16.000Z (5 months ago)
- Last Synced: 2026-02-10T00:05:22.284Z (5 months ago)
- Topics: i18n, i18next, internationalization, next, next-i18next
- Language: TypeScript
- Homepage:
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-i18next-ext
[](https://www.npmjs.com/package/next-i18next-ext)
Extended [next-i18next](https://github.com/i18next/next-i18next) which allows you to use translations shared between pages and load them once. SSG and SSR work great too.
## Installation
```
npm i next-i18next-ext
```
## Usage
1. Configure your [custom Document](https://nextjs.org/docs/advanced-features/custom-document) to provide shared translations for the App
```js
import { createGetInitialProps } from 'next-i18next-ext/server';
export default class _Document extends Document {
static getInitialProps = createGetInitialProps(['common']);
render() {
...
}
}
```
### Steps above are the same as for `next-i18next`
2. Configure your [custom App](https://nextjs.org/docs/advanced-features/custom-app)
```js
import { appWithTranslation } from 'next-i18next-ext';
const _App = ({ Component, pageProps }) => {
return ;
};
export default appWithTranslation(_App);
```
3. You also able to use page-level translations
```js
import { serverSideTranslations } from 'next-i18next-ext/server';
export const getStaticProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale, ['main-page'])),
},
};
};
```
4. Use translation
```js
import { useTranslation } from 'react-i18next';
export const Footer = () => {
const { t } = useTranslation('common');
return (
{t('description')}
);
};
```
## API
#### createGetInitialProps
```ts
const createGetInitialProps: (namespacesRequired?: string[], configOverride?: UserConfig | null, extraLocales?: string[] | false) => (ctx: DocumentContext, locale?: string) => DocumentInitialProps;
```
#### serverSideProps
```ts
const serverSideTranslations: (initialLocale: string, namespacesRequired?: string[] | undefined, configOverride?: UserConfig | null, extraLocales?: string[] | false) => Promise;
```
#### appWithTranslation
```ts
const appWithTranslation: (App: any, configOverride?: UserConfig | null) => (appProps: any) => JSX.Element;
```