https://github.com/simplelocalize/simplelocalize-next-i18next

React localization example app for React 18+, Next.js 14+ and next-i18next
https://github.com/simplelocalize/simplelocalize-next-i18next

i18next next-i18next nextjs react-localization

Last synced: 4 days ago
JSON representation

React localization example app for React 18+, Next.js 14+ and next-i18next

• Host: GitHub
• URL: https://github.com/simplelocalize/simplelocalize-next-i18next
• Owner: simplelocalize
• Created: 2022-02-07T12:52:04.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-25T13:17:33.000Z (27 days ago)
• Last Synced: 2024-12-17T09:30:20.142Z (5 days ago)
• Topics: i18next, next-i18next, nextjs, react-localization
• Language: TypeScript
• Homepage: https://simplelocalize.io
• Size: 1.52 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![next-i18next and SimpleLocalize example](screenshot.png)

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Translations location

Translations are placed in `/public/locales/{lang}/{ns}.json`

- `{ns}` - namespace, allows you to split translation keys into multiple files

- `{lang}` - language

In this example there are two namespaces: `common` and `home` and 4 locales: `en`, `es`, `fr_FR`, `pl`.

```bash

.

├── en

│   ├── common.json

│   └── home.json

├── es

│   ├── common.json

│   └── home.json

├── pl

│   ├── common.json

│   └── home.json

└── fr_FR

    ├── common.json

    └── home.json

```

## i18next configuration

Install i18next for NextJS

```bash

npm install --save next-i18next

```

Create a configuration file in project root.

```typescript

// 📦 file: ./next-i18next.config.js

module.exports = {

  i18n: {

    defaultLocale: 'en',

    locales: ['en', 'es', 'pl', 'fr_FR'],

  },

};

```

## NextJS + i18n configuration

Import i18next configuration file into `next.config.js`

```typescript

// 📦 file: ./next.config.js

const {i18n} = require("./next-i18next.config");

const nextConfig = {

  reactStrictMode: true,

  i18n

}

module.exports = nextConfig

```

## SimpleLocalize configuration

💿 Install [SimpleLocalize CLI](https://simplelocalize.io/docs/cli/get-started/)

```bash

curl -s https://get.simplelocalize.io/2.7/install | bash

```

🧷 Create configuration file

```yaml

# 📦 file: ./simplelocalize.yml

uploadFormat: single-language-json

uploadLanguageKey: en

uploadPath: ./public/locales/en/{ns}.json

uploadOptions:

  - REPLACE_TRANSLATION_IF_FOUND

downloadFormat: single-language-json

downloadLanguageKeys: ['pl', 'fr', 'es']

downloadPath: ./public/locales/{lang}/{ns}.json

```

⤵️ [Download translations](https://simplelocalize.io/docs/cli/download-translations/) to `./public/locales` directory

```bash

simplelocalize download

```

⤴️ [Upload translations](https://simplelocalize.io/docs/cli/upload-translations/) from `./public/locales` directory

```bash

simplelocalize upload

```

> You can [automate process of adding translation keys](https://simplelocalize.io/docs/integrations/i18next/) from project to SimpleLocalize.

## Usage

Example usage can be found in `pages/index.tsx`.

```typescript

//translations from common.json

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

console.log(t('LEARN_MORE')) // output: Learn more

//translations from home.json

const {t: homeT} = useTranslation('home');

console.log(homeT('HELLO_WORLD')) // output: Hello world

```

## Try out this demo

First, run the development server:

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.