Dec 05 2022

Next.JS 靜態網站 + React-Intl 的 i18n

多國語系在許多網站已經是不可或缺的一個功能，在自己的研究中想做這事件情很久了，在公司的日常開發中也有許多這樣的功能，但前人已經設定好了，沒有從頭來過的感覺剛好這兩天終於有一個契機與必要實作的需求出現了。於是就把自己實作的步驟記錄下來！

1. 安裝React-intl

2. 設定next.config.js

開啟next.config.js設定預設的語系以及支援的語系設定，locales是設定支援的語系檔案而 defaultLocale 當沒有傳入語系設定時所使用的預設語系

3. 放置語系包的位置

在語系設定上我的檔案會放在/src/locales中，裡面的檔案要對應到在next.config.js中所設定的語系相同，網站中有需要用到多國語系的語系檔案都可以在這邊設定

語系的檔案結構

語系資料對應後續我們就可以使用FormattedMessage的Component來取得該資料值。

4. 設定_app.tsx檔案

在_app.tsx中設定IntlProvider以及語系包的資料設定

接下來就可以在畫面上需要多語言翻譯的位置加上下列程式碼就可以展現多國語系了！

輸出靜態網站

完成了多語系社的設定以後，當要輸出靜態網站時出現了錯誤...竟然說i18n不支援next export！

後來在官網中找到了這一段文字..

Note that Internationalized Routing does not integrate with next export as next export does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use next export are fully supported.

Next.js - Internationalized Routing

好吧，看起來我想輸出靜態網站不支援這樣的設定，所以只好動點手腳讓系統支援他！

用靜態路由的設定來讓他可以支援多國語系

再次修改_app.tsx

使用路由取得語系，再去設定 IntlProvider載入的語系設定

最後移除next.config.js中的設定

這樣就可以在靜態網站中擁有多國語系囉！

參考資料