Nextjs+next-intl多語言國際化最佳實踐（APP路由器）
Nextjs有兩種路由器：APP路由器和Page路由器。
前段時間，在Page路由器下，對nextjs做了國際化，並做了總結：
但Page路由器將會是Nextjs逐漸淘汰的路由器。所以，最近，基於APP路由器，對Nextjs做了國際化。
一、Nextjs國際化解決方案的選擇
1、i18next + react-i18next + i18next-resources-to-backend + next-i18n-router
似乎大多數都在用這個，我試了一下，挺複雜，還沒成功，所以我放棄了。
2、next-i18n-router react-intl
看著也挺複雜，由於有1的陰影，放棄了。
3、next-intl
next-intl 是一個完整的nextjs的國際化方案，無須其它軟體包。而且配置相對簡單。更重要的是，我配置成功了，沒遇到莫名其妙的問題。
所以，就是它了。
二、目錄結構
.三、國際化路由
1、novigation.js
這是個配置文件，這個文件中配置的項目會在其它一些文件中調用。
; , , , ,,,]; ; ; , : , : , : , : , : , : , : , : }, ] 2、[locale]目錄
app目錄中的頁面檔案全部放到[locale]目錄中。
3、中間件：middleware.js
說明：
實現以下樣式的URL
預設語言的URL：
首頁為：www.xxx.com
內頁為：www.xxx.com/about
其它語言的URL：（以西班牙語為例）
首頁為：www.xxx.com/es
內頁為：www.xxx.com/es/about
另外，如果URL中輸入了預設語言，例如預設語言為英語，使用者輸入URL：www.xxx.com/en
那麼，將自動前往www.xxx.com
代碼：
, ], };四、載入翻譯文件
1、翻譯文件
說明
我的翻譯檔案放在了「public」目錄中，但，其實，翻譯檔案也可以放在其它目錄中，只要在i18n.js檔案中配置好想應的路徑即可。
翻譯檔案是一個json文件，json檔案可以是嵌套格式，也可以不嵌套。這兩種，最終，在引用時會稍有不同。
程式碼（不嵌套）
{ : , }程式碼（嵌套）
{ :{ :, } }2、i18n.js文件
說明：
這個文件，是導入翻譯文件的，關鍵是配置翻譯文件的路徑，要和你的翻譯文件所在的路徑保持一致。
路徑中的${locale}表示語言。
程式碼
; 3、next.config.js的配置
/** = {} =)(); .五、實現翻譯
layout.js中的程式碼：
''''''''''''''< =>
< = =>
<>< />< /></>
</>
</>
);
}
page.js中的程式碼：
參數locale表示當前的語言。
如果翻譯檔案是不嵌套的方式，則const t = useTranslations();
如果翻譯檔案是嵌套的方式，則根據檔案結構和實際需要，用類似：const t = useTranslations(“bbb“);
''''<>
< =<>)}</></>
</>)六、語言切換器
1、效果
下拉選擇語言，目前頁面切換到所選的語言的頁面。
2、代碼
;
;
;
() {
();
();
();
. = (. });
};
(
<>
<
=
=
=
>
< = ></>< = =></>)
})}
</>
</>
);
}
() {
( => {
.七、SEO和搜尋引擎友好
1、Meta data
nextjs的APP路由器，產生頁面的title和Meta data，我嘗試了三種方式：
第一種方式：在layout.js中直接使用：expert const metadata={}
第二種方式：在page.js中使用動態產生Meta data
可參考：Optimizing: Metadata | Next.js (nextjs.org)
第這兩種方式，對於多語言的title和Meta data，我都失敗了。最後用了第三種方式，也是最簡單、直白的方式。
第三種方式：直接在page.js寫title標籤和Meta標籤。
所以，page.js的程式碼改成了這樣：
''''<>
<>)}</>
< = =</>
< = =></>
< = =></>
< = =></>
< = =></>
< = =></>
< = =></>
< = =></>
< = =></>
< = =></>
< =<>)}</></>
</>)2.多語言導航：讓搜尋引擎更容易發現多語言URL
說明
語言切換器是前端渲染的，所以，我在頁面的底部，也就是元件Footer.js中增加了後端渲染的多語言導航。點選對應的語言就會進入此語言的網站首頁。
Footer.js程式碼如下：
;
(){
(<>
< =></>
< =>
< =>< = = =></>< = = =></>)
})}
</>
< =>
<></>
</>
</>
</>
)
}
八、總結
國際化路由、翻譯文件的結構與引進、翻譯的實作。無論哪種國際化方案，都會涉及這三個面向。雖然都不叫麻煩，但總的來說，next-intl相對還是簡單一些。
九、參考
A Deep Dive into Next.js App Router Localization with next-intl
A complete guide for setting up next-intl with the App Router
关注我的微信公众号
