Setup i18n with custom server

.vscode/settings.json

@@ -6,7 +6,7 @@
     "yarn.lock": true,
     ".next": true,
     ".cache": true,
-    "public": true
+    "public": false
   },
   "editor.formatOnSave": true,
   "javascript.format.enable": false,

i18n.ts

@@ -0,0 +1,10 @@
+import NextI18Next from 'next-i18next'
+
+const NextI18NextInstance = new NextI18Next({
+  defaultLanguage: 'en',
+  otherLanguages: ['es'],
+} as any)
+
+export default NextI18NextInstance
+
+export const { appWithTranslation, withTranslation } = NextI18NextInstance

package.json

@@ -3,9 +3,9 @@
   "version": "4.0.0",
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "ts-node --project tsconfig.server.json server.ts",
     "build": "next build",
-    "start": "next start",
+    "start": "NODE_ENV=production node server.js",
     "test": "ava",
     "test:jest": "jest",
     "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
@@ -23,11 +23,13 @@
     "apollo-link-http": "^1.5.17",
     "browser-monads": "^1.0.0",
     "clsx": "latest",
+    "express": "^4.17.1",
     "formik": "^2.1.4",
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "lodash": "^4.17.15",
     "next": "latest",
+    "next-i18next": "^4.4.0",
     "next-images": "^1.3.1",
     "next-with-apollo": "^5.0.1",
     "nprogress": "^0.2.0",
@@ -51,6 +53,7 @@
     "ava": "^3.8.1",
     "babel-plugin-styled-components": "^1.10.7",
     "jest": "^25.5.3",
+    "ts-node": "^8.9.1",
     "typescript": "^3.8.3"
   }
 }

pages/_app.tsx

@@ -13,6 +13,7 @@ import Head from 'next/head'
 import React from 'react'
 import { NextProgress } from '../components/shared/NextProgress'
 import { defaultTheme } from '../themes/default'
+import { appWithTranslation } from '../i18n'
 
 class MyApp extends App<{ apollo: ApolloClient<any> }> {
   componentDidMount() {
@@ -83,4 +84,4 @@ export default withApollo(
       cache: new InMemoryCache(),
     })
   }
-)(MyApp)
+)(appWithTranslation(MyApp))

server.ts

@@ -0,0 +1,54 @@
+import express, { Request, Response } from 'express'
+import next from 'next'
+import nextI18next from './i18n'
+import nextI18NextMiddleware from 'next-i18next/middleware'
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+const port = process.env.PORT || 3000
+
+;(async () => {
+  try {
+    await app.prepare()
+
+    const server = express()
+
+    await nextI18next.initPromise
+    server.use(nextI18NextMiddleware(nextI18next))
+
+    server.all('*', (req: Request, res: Response) => {
+      return handle(req, res)
+    })
+
+    server.listen(port, (err?: any) => {
+      if (err) throw err
+      console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`)
+    })
+  } catch (e) {
+    console.error(e)
+    process.exit(1)
+  }
+})()
+
+// import * as express from 'express'
+// import next from 'next'
+
+// const nextI18NextMiddleware = require('next-i18next/middleware').default
+
+// 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
+// })()

tsconfig.server.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "dist",
+    "noEmit": false
+  },
+  "include": ["server"]
+}