Closed4

Next.js の App Router での i18n 対応

nissy-devnissy-dev

ここら辺をいい感じしてくれるライブラリがあるらしい

https://github.com/aralroca/next-translate

ブログを見ると Server Component も Client Component も同じ API で呼び出せるようで、求めていたものという感じがする。

https://dev.to/aralroca/i18n-translations-in-nextjs-13s-app-dir-for-serverclient-components-4ek8

どう実現しているかというと、ここら辺の複雑さは plugin が吸収している。Server Component のときはRSC でさらにラップしていて、Client Component のときは HOC でラップするようになっている。

ラップ処理
https://github.com/aralroca/next-translate-plugin/blob/67e728a9d2881de3d4ccc15f40ecf9f89899415a/src/templateAppDir.ts

HOC の実装
https://github.com/aralroca/next-translate/blob/5a5f2d21e28d6c1e68c0fef4b84e01ca87d48143/src/withTranslationClientComponent.tsx#L7

こういうビルド時に動的にコード書き換えるプラグインはあんまり使いたくない... Turbopack への移行とかの障害になりそうなイメージがある。

このスクラップは2023/06/11にクローズされました