[Milestone task]: SPA部分の実装方法の検討
Opened this issue · 4 comments
nkte8 commented
How it would to do to accomplish?
Astroでi18nを実装するにあたって、どのようにページの生成を行うかを検討する
SPAページ部分、具体的にはsrc/pages/app.astro
およびsrc/component/Client
配下のコンポーネントの実装方法を検討する
What it should do to accomplish?
具体的な実装方法の考案・提示
so-asano commented
@nkte8
調査・実験した結果を報告します。
実現したかったこと
- 言語コードをパスに含んだルーティングの実装の容易化
- 翻訳ファイルの導入とその適用
試したこと
- astro-i18next の導入
- astro-i18n の導入
- astro-i18n-aut の導入
- paraglide の導入
結果
astro-i18next
は環境の問題で導入できなかったparaglide
は導入が煩雑だったため却下したastro-i18n-aut
は導入でき、言語ごとのパスの作成とパスからの言語判別まではできたastro-i18n
は導入でき、翻訳ファイルの導入とその適用ができた
結論
astro-i18n-aut
とastro-i18n
の組み合わせでいくのがよいかもしれない
さらなる検討事項
- 翻訳ファイルで対応しきれない場合(ドキュメントページなど)はどうするか
- リンクに関しては
astro-i18n
の機能でパスに現在の言語コードを含めることができるが、それ以外のケースではどう対応するか - 翻訳ファイルに関して、ファイルの分け方、ネームスペースの使いかた、キーの命名規則などを決める必要がある
nkte8 commented
補足
パッケージの選出は Astro公式ドキュメントのCommunity libraries
から選出している
https://docs.astro.build/ja/recipes/i18n/
so-asano commented
@nkte8
調査・実験した結果を報告します。
実現したかったこと
- ドキュメントページに
.md
ファイルの内容をレンダリングする - 言語別に
.md
ファイルを用意し、パスに含まれる言語コードにしたがって出し分ける
結果
- プレビューの
/i18ntest/
、/en/i18ntest/
を参照のこと - ほぼうまくいったが、デプロイ先の環境だとなぜか
/ja/
がうまくいかない
結論
- この方法を採用してもよいとおもう
さらなる検討事項
.mdx
ファイルもおそらく使える。ドキュメントでより柔軟な表現をおこなうためにはこちらのほうがいいかもしれない- Lint のエラーが残っているので対応が必要かもしれない(いまはコメントで無視させている)
- フォールバックの処理をいれていないので、
/fr/
などとすると 404 になる
nkte8 commented
@so-asano Discordで出した話を記載します
リダイレクトの指向性変更について
- 現在検証ではデフォルト言語から元のパス(文字コードなし)にリダイレクトしている動作を行っているが、逆に、元のパス(文字コードなし)から言語ありのパスにリダイレクトできないか
- 文字コードなしで問題が発生しないが文字コードありで問題が発生する、みたいな事象が起きた際に、フィードバックの観点で問題の発覚が難しくなることを懸念している
- デフォルトの /ja/ -> / のリダイレクトを無効にはできる
- Astro側で
SSR
モードであればリダイレクト自体を制御することは可能- ライブラリとの共存が可能であるかの懸念あり
- リダイレクトするページのサンプルを作成する → @nkte8