mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Move with-i18next example to external repo (#5743)
This commit is contained in:
Isaac Hinman
Tim Neutkens
parent
e3c7d3fdb8
commit
c178e98a67
|
|
@ -1,48 +1,4 @@
|
|||
|
||||
# with-i18next example
|
||||
|
||||
## How to use
|
||||
|
||||
### Using `create-next-app`
|
||||
|
||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-i18next with-i18next-app
|
||||
# or
|
||||
yarn create next-app --example with-i18next with-i18next-app
|
||||
```
|
||||
|
||||
### Download manually
|
||||
|
||||
Download the example:
|
||||
|
||||
```bash
|
||||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-i18next
|
||||
cd with-i18next
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
# or
|
||||
yarn
|
||||
yarn 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/)
|
||||
The `with-i18next` example is maintained within the `react-i18next` repository and [can be found here](https://github.com/i18next/react-i18next/tree/master/example/nextjs).
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
import React from 'react'
|
||||
import { translate } from 'react-i18next'
|
||||
|
||||
class Post extends React.Component {
|
||||
render () {
|
||||
const { t } = this.props
|
||||
|
||||
return (
|
||||
<div>
|
||||
{t('namespace1:greatMorning')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(['namespace1'])(Post)
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import { translate } from 'react-i18next'
|
||||
export default translate(['common'])((props) => (<h1>{props.t('hello')}, {props.t('morning')}</h1>))
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"name": "with-i18next",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"i18next": "^10.0.7",
|
||||
"isomorphic-unfetch": "^2.0.0",
|
||||
"next": "latest",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-i18next": "^6.1.0"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
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'
|
||||
import Post from '../components/Post'
|
||||
|
||||
// get language from query parameter or url path
|
||||
const lang = 'id'
|
||||
|
||||
export default class Homepage extends Component {
|
||||
static async getInitialProps () {
|
||||
const translations = await getTranslation(
|
||||
lang,
|
||||
['common', 'namespace1'],
|
||||
'http://localhost:3000/static/locales/'
|
||||
)
|
||||
|
||||
return { translations }
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.i18n = startI18n(props.translations, lang)
|
||||
}
|
||||
|
||||
render (props) {
|
||||
return (
|
||||
<I18nextProvider i18n={this.i18n}>
|
||||
<div>
|
||||
<Title />
|
||||
<Post />
|
||||
</div>
|
||||
</I18nextProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"hello": "halo"
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"greatMorning": "Pagi yang indah!"
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"hello": "e ae tche",
|
||||
"morning": "manha"
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"greatMorning": "Maravilhosa manhã!"
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import i18n from 'i18next'
|
||||
|
||||
/**
|
||||
* Initialize a i18next instance.
|
||||
* @function startI18n
|
||||
* @param {object} files - Translation files.
|
||||
* @param {string} lang - Active language.
|
||||
*/
|
||||
const startI18n = (files, lang) => i18n.init({
|
||||
lng: lang, // active language http://i18next.com/translate/
|
||||
fallbackLng: 'pt',
|
||||
resources: files,
|
||||
ns: ['common'],
|
||||
defaultNS: 'common',
|
||||
debug: false
|
||||
})
|
||||
|
||||
export default startI18n
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/* global fetch */
|
||||
import 'isomorphic-unfetch'
|
||||
|
||||
/**
|
||||
* Fetch translation file(s).
|
||||
* @function getTranslation
|
||||
* @param {string} lang - Language to fetch.
|
||||
* @param {array} files - Translation files to fetch.
|
||||
* @param {string} baseUrl - Locale location.
|
||||
* @return {object} Fetched translation files.
|
||||
*/
|
||||
export async function getTranslation (lang, files, baseUrl) {
|
||||
let translation = {}
|
||||
|
||||
for (let file of files) {
|
||||
const response = await fetch(`${baseUrl}${lang}/${file}.json`)
|
||||
translation[file] = await response.json()
|
||||
}
|
||||
|
||||
return { [lang]: translation }
|
||||
}
|
||||
Loading…
Reference in a new issue