大家好!
最近我需要为基于 Express 的 API 添加多语言支持。我想分享一个简短的教程,供那些希望根据用户的首选语言让后端响应翻译内容的开发者参考。
为什么要为后端国际化?
以下是后端国际化的一些实际应用场景:
- 以用户语言显示后端错误信息: 以用户的母语显示错误信息,以提高理解度并减少挫败感。这允许错误信息直接以 toast 形式显示,而无需在前端进行映射。
- 发送多语言的电子邮件、推送通知等: 通过以收件人的语言发送事务性、营销或通知电子邮件来提高参与度。将推送通知、短信消息本地化,以确保清晰度并增强用户体验。
- 检索多语言内容: 从数据库中以多种语言提供内容。
开始使用
安装
首先,使用您喜欢的包管理器安装必要的包:
npm install intlayer express-intlayer
设置
接下来,通过在项目根目录创建 intlayer.config.ts 文件来配置国际化设置:
// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [
Locales.ENGLISH,
Locales.FRENCH,
Locales.SPANISH_MEXICO,
Locales.SPANISH_SPAIN,
],
defaultLocale: Locales.ENGLISH,
},
};
export default config;
Express 应用设置
现在,设置您的 Express 应用以使用 express-intlayer:
// src/index.ts
import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";
const app: Express = express();
// 加载国际化请求处理器
app.use(intlayer());
// 路由
app.get("/", (_req, res) => {
res.send(
t({
en: "Example of returned content in English",
fr: "Exemple de contenu renvoyé en français",
"es-ES": "Ejemplo de contenido devuelto en español (España)",
"es-MX": "Ejemplo de contenido devuelto en español (México)",
})
);
});
// 启动服务器
app.listen(3000);
兼容性
express-intlayer 可以与 react-intlayer 或 next-intlayer 无缝协作。同时,它也兼容各种国际化解决方案。
自定义区域检测
默认情况下,express-intlayer 使用 Accept-Language 头来确定客户端的首选语言。您可以自定义此行为,通过头信息或 cookie 来检测区域设置:
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// 其他配置选项
middleware: {
headerName: "my-locale-header",
cookieName: "my-locale-cookie",
},
};