Next.js 14中的增強國際化（I18N）

Next.js 14簡化了多語言網站開發。本文展示了構建多語言的Next.js 14應用程序，涵蓋了從項目設置到動態語言切換器的關鍵方面。

密鑰功能：

>使用語言路由和動態消息加載的簡化多語言開發。 > Next.JS 14中的國際化實用指南（I18N），包括項目設置，I18N配置，基於JSON的翻譯和特定語言的路由。
• >為改進的內容組織創建語言slug的詳細說明，尤其對博客或產品目錄有益。 這涉及動態消息加載，用於重定向的環境匹配中間件以及對佈局和頁面組件的修改。
>
• >使用Next.js的路由器和鉤子實現用戶友好的動態語言切換器，從而增強了用戶體驗。
• 構建一個多語言Next.js 14 App：
>

該過程涉及以下步驟：

>

項目設置：

創建一個新的next.js項目（例如），然後安裝

和
1. 。 配置

   插件。 npx create-next-app my-i18n-app next@latest next-intlnext.config.js特定特定內容：next-intl使用JSON文件（例如，

   ，
，
2. ）創建一個

   文件夾，其中包含每個語言環境的翻譯。 這彌補了Next.js目前缺乏自動翻譯。 content en.json>es.json>動態消息加載：de.json創建一個基於檢測到的語言環境的動態導入消息JSON文件的文件，以確保內容適應用戶語言的偏好。 錯誤處理（例如，對於不支持的語言環境）至關重要。

   >

3. > 語言路由和中間件：使用i18n.ts實現notFound文件，以定義受支持的語言環境，默認場所和路由規則，以將用戶引導到網站的適當語言版本。

   config確保只處理國際化路徑。
>

4. >佈局和頁面組件：middleware.ts修改佈局和頁面組件（例如，next-intl/middleware，matcher），以利用來自

   >的
掛鉤>訪問翻譯內容。 構建您的組件以有效處理不同的語言版本。

6. 語言切換器組件：構建使用next.js的路由器和LangSwitcher.tsx來管理語言選擇和路由的組件。該組件提供了一個用戶友好的接口，用於在語言之間切換。將此組件集成到您的佈局中（例如，usePathname）。 app/layout.tsx>

>每個步驟的完整代碼示例可在原始文章中找到。 這種修訂的響應提供了更簡潔，更有條理的概述，維護了關鍵信息和圖像放置。

以上是Next.js 14中的增強國際化（I18N）的詳細內容。更多資訊請關注PHP中文網其他相關文章！