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" | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment