1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

with-i18next example (#1496)

* examples/with-i18next: create folder and initial settings

* examples/with-i18next:abstract url and object keys - finish readme

* examples/with-i18next: next@beta is not actually necessary

* examples/with-it18next: fix standardjs eslint warnings

* examples/with-i18next: review updates
This commit is contained in:
Átila Fassina 2017-04-30 16:35:07 +02:00 committed by Tim Neutkens
parent 1f642dceda
commit c9d0670362
7 changed files with 108 additions and 0 deletions

View file

@ -0,0 +1,33 @@
# with-i18next example
## How to use
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-i18next
cd with-i18next
```
Install it and run:
```bash
npm install
npm run dev
```
alternatively
```bash
yarn && yarn dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## The idea behind the example
This example shows how to add internationalisation through [i18next](https://github.com/i18next/i18next) to your NextJS app. The possibilities and features are documented in the [i18next project](http://i18next.com/translate/)

View file

@ -0,0 +1,2 @@
import { translate } from 'react-i18next'
export default translate(['common'])((props) => (<h1>{props.t('hello')}</h1>))

View file

@ -0,0 +1,19 @@
{
"name": "with-i18next",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"i18next": "^7.1.3",
"isomorphic-fetch": "^2.2.1",
"next": "*",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-i18next": "^2.2.1"
},
"author": "",
"license": "ISC"
}

View file

@ -0,0 +1,27 @@
import React, { Component } from 'react'
import { I18nextProvider } from 'react-i18next'
import startI18n from '../tools/startI18n'
import { getTranslation } from '../tools/translationHelpers'
import Title from '../components/Title'
export default class Homepage extends Component {
static async getInitialProps () {
const translations = await getTranslation('pt', 'common', 'http://localhost:3000/static/locales/')
return { translations }
}
constructor (props) {
super(props)
this.i18n = startI18n(props.translations)
}
render (props) {
return (
<I18nextProvider i18n={this.i18n}>
<Title />
</ I18nextProvider>
)
}
}

View file

@ -0,0 +1,3 @@
{
"hello": "e ae tche"
}

View file

@ -0,0 +1,11 @@
import i18n from 'i18next'
const startI18n = file => i18n.init({
fallbackLng: 'pt',
resources: file,
ns: ['common'],
defaultNS: 'common',
debug: false
})
export default startI18n

View file

@ -0,0 +1,13 @@
/* global fetch */
import 'isomorphic-fetch'
export async function getTranslation (lang, file, baseUrl) {
const response = await fetch(`${baseUrl}${lang}/${file}.json`)
const json = await response.json()
return {
[lang]: {
[file]: json
}
}
}