i18next.js

// Module imports

import i18next from 'i18next'
//import i18nextCache from 'i18next-localstorage-cache'
import i18nextLanguageDetector from 'i18next-browser-languagedetector'
import i18nextFetchBackend from 'i18next-fetch-backend'





i18next
//.use(i18nextCache)
.use(i18nextLanguageDetector)
.use(i18nextFetchBackend)
.init({
  backend: {
    loadPath: 'https://raw.githubusercontent.com/FuelRats/translations/master/{{lng}}/{{ns}}.json'
  },
  debug: false,
  defaultNS: 'translation',
  lng: 'en-US',
  load: 'currentOnly',
  ns: [
    'translation'
  ],
  wait: true
})





export default i18next

index.js

// Module imports
import React from 'react'
import { translate } from 'react-i18next'





// Component imports
import Page from '../components/Page'





class Home extends React.Component {
  render () {
    return (
      <Page>
        {this.props.t('blep')}
      </Page>
    )
  }
}

export default translate(['translations'], {})(Home)

package.json

{
  "name": "blep",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next"
  },
  "dependencies": {
    "i18next": "^8.1.0",
    "i18next-browser-languagedetector": "^1.0.1",
    "i18next-fetch-backend": "^0.0.1",
    "next": "^2.3.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-i18next": "^3.1.0"
  }
}

Page.js

// Component imports
import i18next from './i18next'





export default class extends React.Component {
  constructor (props) {
    super(props)

    this.i18n = i18next
  }

  render () {
    return (
      <I18nextProvider i18n={ this.i18next }>
        {this.props.children}
      </I18nextProvider>
    )
  }
}