Example of integrating next-i18next using typescript

Right now I try to integrate next-i18next into my nextjs project where I am using typescript. I am struggling with making it work properly. Is there someone out there who has a repo where I can check how its done or can someone maybe create a small codesandbox or sth? Would be awesome, I could also make it nice and contribute it to the repo

[kachkaev]

Hi @BjoernRave! Feel free to check out my integration of this library into a TypeScript project: https://gitlab.com/kachkaev/website-frontend

I guess the issue can be close because it’s a question and not a bug or a feature request. Although it might be worth adding a TypeScript example into the repo at one point 😉

[MichalW]

This is my approach to this problem: Generally based on this: https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab

package.json:

 "scripts": {
    "dev": "npm-run-all clean transpile server:dev",
    "start": "npm-run-all clean transpile build server:prod",
    "build": "next build",
    "server:prod": "NODE_ENV=production node .build/server",
    "server:dev": "node .build/server",
    "transpile": "babel server.ts i18n.ts --extensions \".ts\" --out-dir .build",
    "clean": "rimraf dist-server",
    ...
  },
  "dependencies": {
    "@babel/cli": "^7.8.4",
    "express": "^4.17.1",
    "npm-run-all": "^4.1.5",
    "rimraf": "^3.0.2",
    ...
  }
  "

i18n.ts:

import NextI18Next from 'next-i18next';

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'en',
  defaultNS: 'translations',
  localePath: 'public/locales',
  otherLanguages: ['de'],
});

export const { appWithTranslation, useTranslation } = NextI18NextInstance;

export default NextI18NextInstance;

server.ts

import express from 'express';
import next from 'next';
import nextI18NextMiddleware from 'next-i18next/middleware';
import nextI18next from './i18n';

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

(async () => {
  await app.prepare();
  await nextI18next.initPromise;

  await express()
    .use(nextI18NextMiddleware(nextI18next))
    .get('*', (req, res) => appHandler(req, res))
    .listen(port);
})();