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

examples/with-i18next/README.md

@@ -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/)

examples/with-i18next/components/Title.js

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

examples/with-i18next/package.json

@@ -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"
+}

examples/with-i18next/pages/index.js

@@ -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>
+    )
+  }
+}

examples/with-i18next/static/locales/pt/common.json

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

examples/with-i18next/tools/startI18n.js

@@ -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

examples/with-i18next/tools/translationHelpers.js

@@ -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
+    }
+  }
+}