preloader
心得

NextJS v13 能使用替代的語系 i18n 套件: next-international | NextJS V13 Can Use I18n Alternative Package

NextJS v13 能使用替代的語系 i18n 套件: next-international | NextJS V13 Can Use I18n Alternative Package

升級到 NextJS v13 後,因為產品裡用到 page router 而且用到 client-side routing,產品裡語系套件 next-i18next 舊版意外地不能跟 next.conig.jsredirects() 一起使用。如果這兩者一起會使用,產品的語系切換功能,會一直索取某個指定的語系檔案,導致產品顯示錯誤的語系。

經過我一番嘗試後,找到一個 i18n 套件 next-international package,用了它之後,產品的 page router ,可以用到 client-side routing ,也能用到 next.config.js 檔案裡的 redirects() ,做到 static site generate routing,這套件的設定方法的教學文件在這連結裡。用這替代的套件,能夠很快速地改寫,next-i18next 套件提供的函式,而且畫面不會顯示錯誤的語系。

NextJS 的 routing redirecting 文件連結在此,依照這文件的說明, next.config.js 檔案裡的 redirects() 是 server-side routing,useRouter() 的 router 和 middleware.ts 的內容則是 client-side routing。