Node express middleware for detecting requested language
npm install lup-language!GitHub package.json version
!npm bundle size
!GitHub Workflow Status
!NPM
lang gets added to the request object.
req.lang - requested language code e.g. 'en'
req.langs - list of all supported language codes (based on found translation files in translations dir or next.config.js).
req.TEXT - object with all translations for the requested language code (Disabled by default!).
req.PATH - update URI path without language code prefix.
server.js
javascript
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({
defaultLanguage: 'en',
}));
// 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()+"
"+
"You can access translations from the translations dir using: "+req.TEXT['TranslationKey']);
});
app.listen(80, function(){
console.log("Server running");
});
`
$3
app/[locale]/translations.ts
`typescript
'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
`typescript
export default async function RootLayout({ params, children }: LocaleLayoutProps){
const { locale } = await params;
// if locale is not supported redirect to a supported one
const validLocale = await checkLanguage(locale, getDefaultLocale());
if(validLocale && locale !== validLocale){
permanentRedirect('/'+validLocale+'/'); // response code 308 - Permanent Redirect
}
// load translations for given translation keys (note this loadTranslations function is defined in translations.ts, see below)
const TEXT = await loadTranslations(locale, [
'HelloWorld',
]);
return
{TEXT['HelloWorld']}
;
}
export async function generateStaticParams(context: StaticParamsContext){
const locales = await getLocales();
return locales.map((locale) => ({ locale: locale }));
}
`
app/[locale]/page.tsx
`typescript
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 <>
{TEXT['HelloWorld']}
>
}
`
app/[locale]/translations.ts
Server action that also allows client components to load translations.
`typescript
'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, getDefaultLocale(), translationKeys);
};
`
Optional if unsupported languages or root should be redirected:
middleware.ts
`typescript
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { LanguageRouter } from "lup-language";
export const runtime = 'nodejs'; // only works with NodeJS runtime
// Settings
const lupLang = LanguageRouter({
defaultLanguage: 'en',
});
export function middleware(req: NextRequest): NextResponse {
// Redirect to correct language
const langInfo = lupLang.nextJsMiddlewareHandler(req);
if(langInfo.redirect || langInfo.cookie){
req.nextUrl.pathname = langInfo.redirect ? langInfo.redirect : req.nextUrl.pathname;
const res = langInfo.redirect ? NextResponse.redirect(req.nextUrl, { status: langInfo.redirectResponseCode }) : NextResponse.next();
if(langInfo.cookie){
res.cookies.set(langInfo.cookie.name, langInfo.cookie.value, langInfo.cookie.options);
}
return res;
}
// Other middleware logic
return NextResponse.next();
}
`
$3
server.ts
`typescript
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");
});
});
`
$3
index.tsx
`typescript
// 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({name});
}
return (
<>
{TEXT['TranslationKey']}
{TEXT['HelloWorld']}
{components}
>
);
}
export async function getStaticProps(context){
const TEXT = await getTranslations(context.locale, context.defaultLocale, [
'TranslationKey', 'HelloWorld'
]);
return {
props: {
LANGUAGE_NAMES: await getLanguageNames(),
TEXT: TEXT
}
};
}
``