Day 23: 使用 API 管理 i18n，多語言支援的後端實作

2024 iThome 鐵人賽

DAY 23

JavaScript

從PM到前端開發：我的React作品集之旅系列第 23 篇

16th鐵人賽

carolcheng

2024-09-23 16:03:10

183 瀏覽

分享至

在之前的文章中，我們探討了如何透過本地 JSON 檔案來管理多語言支援（i18n）。隨著專案的擴展和多語言需求的增加，本地管理翻譯檔案可能變得不夠靈活。今天，我們將專注於後端，講述如何使用 Node.js 來建立一個 API，讓我們能夠動態管理翻譯資料，實現更高效的多語言支援架構。

為什麼要將 i18n 資料從本地轉為 API 形式？

集中管理翻譯資源：透過 API，所有翻譯資料都可以集中存放在伺服器上，減少本地存儲的複雜性，並確保翻譯內容能夠快速更新。
即時更新翻譯資料：透過 API，翻譯資料可以即時從伺服器載入，無需重新部署應用程式。這大幅提升了多語言應用的靈活性。
擴展性：API 管理可以允許我們隨時新增或修改翻譯內容，且可以針對不同地區動態提供適當的翻譯資料。

實際演練

Step 1: 初始化 Node.js 專案

首先，我們創建一個 Node.js 專案來搭建伺服器，並且安裝必要的依賴。

mkdir react-webpack-starter
cd react-webpack-starter
npm init -y
npm install express cors  
npm install -g vercel

express：用來建立伺服器的框架。
cors：解決跨域問題。
vercel ：用於最終部署伺服器。

Step 2: 設定 Express 伺服器

接下來，我們會創建一個簡單的 Express 伺服器，並透過 API 提供多語言翻譯資料。這些翻譯資料將以 JSON 的形式返回給前端，並根據請求中的語言參數動態提供對應的翻譯。在根目錄下建立 server.js 文件，這是我們的後端伺服器主檔案。

// server.js
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 3000;

// 中間件
app.use(cors());
app.use(express.json());

// 翻譯資料
const translations = {
  en: {
   //...其他英文翻譯資料
   projectData: [
            {
                id: 1,
                date: "2024",
                category: "React Project",
                title: "Portfolio Website",
                description: `Created a personal portfolio website to showcase projects, blog posts, and professional experience. 
                    The website includes an interactive homepage, project filtering, and a blog section, all integrated into a smooth single-page application experience.`,
                stack: ['React', 'Figma'],
                image: "project1.png",
                live: {
                    icon: "projects/live.png",
                    url: "https://luma-c.com/home"
                },
            {
                id: 2,
                date: "2024",
                category: "UI/UX Design",
                title: "Recipe App Design",
                description: `Designed a recipe app for iPhone 14 with popular recipe recommendations, meal suggestions, live shopping, and ingredient purchase features. The interface is simple and intuitive, optimizing the browsing and buying experience.`,
                stack: ["Figma"],
                image: "project2.png",
                live: "",
            }
        ]
  },
  zh: {
     //...其他中文翻譯資料
       projectData: [
            {
                id: 1,
                date: "2024",
                category: "React 專案",
                title: "個人作品網站",
                description: `建立一個個人作品網站，展示項目、博客文章和專業經驗。網站包含互動首頁、項目過濾和博客部分，所有內容集成於單頁應用之中。`,
                stack: ['React', 'Figma'],
                image: "project1.png",
                live: {
                    icon: "projects/live.png",
                    url: "https://luma-c.com/home"
                },
            },
            {
                id: 2,
                date: "2024",
                category: "UI/UX 設計",
                title: "食譜APP設計",
                description: `針對 iPhone 14 設計的食譜APP，具備熱門食譜推薦、三餐推薦、購物直播及食材購買功能。界面設計簡潔直觀，並優化了使用者的瀏覽與購買體驗。`,
                stack: ["Figma"],
                image: "project2.png",
                live: "",
        }
  },
};

// 翻譯 API 端點
app.get('/api/translations', (req, res) => {
  const lang = req.query.lang || 'en'; // 預設語言為英文
  res.json(translations[lang] || translations.en); // 返回對應語言的翻譯
});

// 啟動伺服器
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Step 3: 配置路由

在 vercel.json 文件中配置路由：

{
    "version": 2,
    "builds": [
        {
            "src": "server.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/api/translations",
            "dest": "/server.js"
        }
    ]
}