https://github.com/simplelocalize/simplelocalize-next-translate
Demo application for React 18+, Next.js 14+ and next-translate 2.6+
https://github.com/simplelocalize/simplelocalize-next-translate
i18n localization next-translate nextjs nextjs-example react react-i18n static-site
Last synced: 5 months ago
JSON representation
Demo application for React 18+, Next.js 14+ and next-translate 2.6+
- Host: GitHub
- URL: https://github.com/simplelocalize/simplelocalize-next-translate
- Owner: simplelocalize
- Created: 2022-04-05T00:45:11.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-25T14:04:11.000Z (6 months ago)
- Last Synced: 2024-12-17T09:30:20.327Z (5 months ago)
- Topics: i18n, localization, next-translate, nextjs, nextjs-example, react, react-i18n, static-site
- Language: CSS
- Homepage: https://simplelocalize.io/docs/integrations/next-translate/
- Size: 2.54 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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).
## Demo
https://github.com/user-attachments/assets/a9fb0c90-4d9d-4fcc-8157-35933683b0ec
## Translation files
Translations are placed in `/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`, `pl`.
```bash
.
├── en
│ ├── common.json
│ └── home.json
├── es
│ ├── common.json
│ └── home.json
├── pl
│ ├── common.json
│ └── home.json
└── fr
├── common.json
└── home.json
```
## next-translate configuration
Install [next-translate](https://github.com/vinissimus/next-translate) for NextJS
```bash
npm install --save next-translate
```
Create a configuration file in project root.
📦 file: ./i18n.json
```json
{
"locales": ["en", "es", "fr", "pl"],
"defaultLocale": "en",
"pages": {
"*": ["common"],
"/": ["home"]
}
}
```
## Next.js 14+ and i18n configuration
Import next-translate configuration file into `next.config.js`
```typescript
// 📦 file: ./next.config.js
const nextTranslate = require('next-translate-plugin')
module.exports = nextTranslate({
webpack: (config, { isServer, webpack }) => {
return config;
}
})
```
## 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
apiKey: YOUR_API_KEY
uploadFormat: single-language-json
uploadLanguageKey: en
uploadPath: ./locales/en/{ns}.json
uploadOptions:
- REPLACE_TRANSLATION_IF_FOUND
downloadFormat: single-language-json
downloadLanguageKeys: ['pl', 'fr', 'es']
downloadPath: ./locales/{lang}/{ns}.json
```
⤵️ [Download translations](https://simplelocalize.io/docs/cli/download-translations/) to `./locales` directory
```bash
simplelocalize download
```
⤴️ [Upload translations](https://simplelocalize.io/docs/cli/upload-translations/) from `./locales` directory
```bash
simplelocalize upload
```
## Usage
Example usage can be found in `pages/index.tsx`.
```typescript
import useTranslation from 'next-translate/useTranslation'
// 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.