Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.