Node express middleware for detecting requested language based on:
- URI prefix e.g. /en/home/
- Cookie value e.g. lang=en
- HTTP header e.g. Accept-Language=en-US,en;q=0.5
- Default language code
Request will be modified such that URI does not start with language code and new attribute
lang
gets added to the request object.
server.js
const express = require('express');
const {LanguageRouter} = require('lup-language');
const app = express();
// Add LanguageRouter as middleware that modifies request object
// based on given options (see documentation).
// Here parameter 'languages' is a list of language codes that
// your app will accept.
app.use(LanguageRouter({
languages: ['en', 'de']
}));
// Create your custom routes and retriev request language code
// by reading it from req.lang
app.get('/', function(req, res){
res.send("Your requested language is: "+req.lang.toUpperCase()+"<br>"+
"You can access translations from the translations dir using: "+req.TEXT['TranslationKey']);
});
app.listen(80, function(){
console.log("Server running");
});
server.ts
import express from 'express';
import next from 'next';
const dev = Config.isDevMode();
const HTTP_BIND = process.env.HTTP_BIND || "0.0.0.0";
const HTTP_PORT = parseInt(process.env.HTTP_PORT || "80") || 80;
const nextApp = next({dev: dev});
const nextHandler = nextApp.getRequestHandler();
nextApp.prepare().then(async () => {
const app = express();
// language middleware
app.use(await LanguageRouter({
useNextLanguages: false, /* true if Next ≤12 and i18n */
languagesFromTranslations: true,
redirectRoot: true,
}));
// TODO add here your custom routes ...
// all frontend routes
app.all('*', (req: Request | any, res: Response) => {
// add language prefix back to url (got removed by LanguageRouter)
const idx1 = req.url.lastIndexOf("."), idx2 = req.url.lastIndexOf("/");
req.url = (idx1 > idx2 || req.url.startsWith("/"+req.lang) || req.url.startsWith("/_next")) ?
req.originalUrl : "/"+req.lang+req.url;
return nextHandler(req, res);
});
// start server
app.listen(HTTP_PORT, HTTP_BIND, function(){
console.log("Server running at "+HTTP_BIND+":"+HTTP_PORT+" in "+(dev ? "development" : "production")+" mode");
});
});
index.tsx
// Next.js page
export default function Home({LANGUAGE_NAMES, TEXT}){
let components = [];
for(let lang in LANGUAGE_NAMES){
let name = LANGUAGE_NAMES[lang];
components.push(<a href={'/'+lang+'/'}>{name}</a>);
}
return (
<>
<h1>{TEXT['TranslationKey']}</h1>
<h2>{TEXT['HelloWorld']}</h2>
{components}
</>
);
}
export async function getStaticProps(context){
const TEXT = await getTranslations(context.locale, context.defaultLocale, [
'TranslationKey', 'HelloWorld'
]);
return {
props: {
LANGUAGE_NAMES: await getLanguageNames(),
TEXT: TEXT
}
};
}
app/[locale]/translations.ts
'use server';
import "server-only";
import { getTranslations } from "lup-language";
export default async function loadTranslations(locale: string, translationKeys: string[]): Promise<{[key: string]: string}> {
return await getTranslations(locale, 'en', translationKeys); // second argument is default locale
};
app/[locale]/layout.tsx
app/[locale]/page.tsx
import React from "react";
import styles from './page.module.css';
import loadTranslations from "../translations";
import { StaticParamsContext } from "../../../services/Types.service";
export default async function Home({ params }: StaticParamsContext) {
const locale = params.locale;
const TEXT = await loadTranslations(locale, ['HelloWorld']);
return <>
<b>{TEXT['HelloWorld']}</b>
</>
}
export async function generateStaticParams(context: StaticParamsContext) {
return [];
}