next.js with next-i18next translations
|
/* |
|
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" |
|
} |
