jonashendrickx/i18n.js

## i18n.js
/*
  Do not copy/paste this code. It is used internally
  to manage end-to-end test suites.
*/

const NextI18Next = require('next-i18next').default
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig

const localeSubpathVariations = {
  none: {},
  foreign: {
    nl: 'nl',
  },
  all: {
    en: 'en',
    nl: 'nl',
  },
}

module.exports = new NextI18Next({
  otherLanguages: ['nl'],
  localeSubpaths: localeSubpathVariations[localeSubpaths],
})

## next.config.js
module.exports = {
    publicRuntimeConfig: {
      localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
        ? process.env.LOCALE_SUBPATHS
        : 'none',
    },
  }

## packages.json
{
  "name": "nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "node index.js",
    "build": "next build",
    "start": "NODE_ENV=production node index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "i18next": "^19.4.4",
    "next": "9.3.6",
    "next-i18next": "^4.4.1",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

## pages\_app.js
import React from 'react'
import App from 'next/app'
import { appWithTranslation } from '../i18n'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <Component {...pageProps} />
    )
  }
}

export default appWithTranslation(MyApp);

## pages\_error.json
import React from 'react'
import PropTypes from 'prop-types'

import { withTranslation } from '../i18n'

const Error = ({ statusCode, t }) => (
  <p>
    {statusCode
      ? t('error-with-status', { statusCode })
      : t('error-without-status')}
  </p>
)

Error.getInitialProps = async ({ res, err }) => {
  let statusCode = null
  if (res) {
    ({ statusCode } = res)
  } else if (err) {
    ({ statusCode } = err)
  }
  return {
    namespacesRequired: ['common'],
    statusCode,
  }
}

Error.defaultProps = {
  statusCode: null,
}

Error.propTypes = {
  statusCode: PropTypes.number,
  t: PropTypes.func.isRequired,
}

export default withTranslation('common')(Error)

## pages\index.js
import Head from 'next/head'
import PropTypes from 'prop-types'

import { i18n, Link, withTranslation } from '../i18n'

const Home = ({ t }) => {
  return (
    <div className="container">
      <Head>
        <title>{t('title')}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className="title">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <button
          type='button'
          onClick={() => i18n.changeLanguage(i18n.language === 'en' ? 'nl' : 'en')}
        >
          {t('change-locale')}
        </button>
      </main>

      <footer>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
        </a>
      </footer>
    </div>
  )
}

Home.getInitialProps = async () => ({
  namespacesRequired: ['common'],
})

Home.propTypes = {
  t: PropTypes.func.isRequired,
}

export default withTranslation('common')(Home);

## server.js
const express = require('express')
const next = require('next')
const nextI18NextMiddleware = require('next-i18next/middleware').default

const nextI18next = require('./i18n')

const port = process.env.PORT || 3000
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler();

(async () => {
  await app.prepare()
  const server = express()

  await nextI18next.initPromise
  server.use(nextI18NextMiddleware(nextI18next))

  server.get('*', (req, res) => handle(req, res))

  await server.listen(port)
  console.log(`> Ready on http://localhost:${port}`) // eslint-disable-line no-console
})();

## static\locales\en\common.json
{
    "title": "Create new Next.js app.",
    "change-locale": "Change Language"
}

## static\locales\nl\common.json
{
    "title": "Maak nieuwe Next.js app.",
    "change-locale": "Taal veranderen"
}
	/*
	Do not copy/paste this code. It is used internally
	to manage end-to-end test suites.
	*/

	const NextI18Next = require('next-i18next').default
	const { localeSubpaths } = require('next/config').default().publicRuntimeConfig

	const localeSubpathVariations = {
	none: {},
	foreign: {
	nl: 'nl',
	},
	all: {
	en: 'en',
	nl: 'nl',
	},
	}

	module.exports = new NextI18Next({
	otherLanguages: ['nl'],
	localeSubpaths: localeSubpathVariations[localeSubpaths],
	})
	module.exports = {
	publicRuntimeConfig: {
	localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
	? process.env.LOCALE_SUBPATHS
	: 'none',
	},
	}
	{
	"name": "nextjs",
	"version": "0.1.0",
	"private": true,
	"scripts": {
	"dev": "node index.js",
	"build": "next build",
	"start": "NODE_ENV=production node index.js"
	},
	"dependencies": {
	"express": "^4.17.1",
	"i18next": "^19.4.4",
	"next": "9.3.6",
	"next-i18next": "^4.4.1",
	"react": "16.13.1",
	"react-dom": "16.13.1"
	}
	}
	import React from 'react'
	import App from 'next/app'
	import { appWithTranslation } from '../i18n'

	class MyApp extends App {
	render() {
	const { Component, pageProps } = this.props
	return (
	<Component {...pageProps} />
	)
	}
	}

	export default appWithTranslation(MyApp);
	import React from 'react'
	import PropTypes from 'prop-types'

	import { withTranslation } from '../i18n'

	const Error = ({ statusCode, t }) => (
	<p>
	{statusCode
	? t('error-with-status', { statusCode })
	: t('error-without-status')}
	</p>
	)

	Error.getInitialProps = async ({ res, err }) => {
	let statusCode = null
	if (res) {
	({ statusCode } = res)
	} else if (err) {
	({ statusCode } = err)
	}
	return {
	namespacesRequired: ['common'],
	statusCode,
	}
	}

	Error.defaultProps = {
	statusCode: null,
	}

	Error.propTypes = {
	statusCode: PropTypes.number,
	t: PropTypes.func.isRequired,
	}

	export default withTranslation('common')(Error)
	import Head from 'next/head'
	import PropTypes from 'prop-types'

	import { i18n, Link, withTranslation } from '../i18n'

	const Home = ({ t }) => {
	return (
	<div className="container">
	<Head>
	<title>{t('title')}</title>
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main>
	<h1 className="title">
	Welcome to <a href="https://nextjs.org">Next.js!</a>
	</h1>

	<button
	type='button'
	onClick={() => i18n.changeLanguage(i18n.language === 'en' ? 'nl' : 'en')}
	>
	{t('change-locale')}
	</button>
	</main>

	<footer>
	<a
	href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
	target="_blank"
	rel="noopener noreferrer"
	>
	Powered by{' '}
	<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
	</a>
	</footer>
	</div>
	)
	}

	Home.getInitialProps = async () => ({
	namespacesRequired: ['common'],
	})

	Home.propTypes = {
	t: PropTypes.func.isRequired,
	}

	export default withTranslation('common')(Home);
	const express = require('express')
	const next = require('next')
	const nextI18NextMiddleware = require('next-i18next/middleware').default

	const nextI18next = require('./i18n')

	const port = process.env.PORT \|\| 3000
	const app = next({ dev: process.env.NODE_ENV !== 'production' })
	const handle = app.getRequestHandler();

	(async () => {
	await app.prepare()
	const server = express()

	await nextI18next.initPromise
	server.use(nextI18NextMiddleware(nextI18next))

	server.get('*', (req, res) => handle(req, res))

	await server.listen(port)
	console.log(`> Ready on http://localhost:${port}`) // eslint-disable-line no-console
	})();
	{
	"title": "Create new Next.js app.",
	"change-locale": "Change Language"
	}
	{
	"title": "Maak nieuwe Next.js app.",
	"change-locale": "Taal veranderen"
	}