nkte8/skyshare

[Milestone task]: SPA部分の実装方法の検討

Opened this issue · 4 comments

How it would to do to accomplish?

Astroでi18nを実装するにあたって、どのようにページの生成を行うかを検討する
SPAページ部分、具体的にはsrc/pages/app.astroおよびsrc/component/Client配下のコンポーネントの実装方法を検討する

What it should do to accomplish?

具体的な実装方法の考案・提示

@nkte8
調査・実験した結果を報告します。

実現したかったこと

  • 言語コードをパスに含んだルーティングの実装の容易化
  • 翻訳ファイルの導入とその適用

試したこと

結果

  • astro-i18next は環境の問題で導入できなかった
  • paraglide は導入が煩雑だったため却下した
  • astro-i18n-aut は導入でき、言語ごとのパスの作成とパスからの言語判別まではできた
  • astro-i18n は導入でき、翻訳ファイルの導入とその適用ができた

結論

  • astro-i18n-autastro-i18n の組み合わせでいくのがよいかもしれない

さらなる検討事項

  • 翻訳ファイルで対応しきれない場合(ドキュメントページなど)はどうするか
  • リンクに関しては astro-i18n の機能でパスに現在の言語コードを含めることができるが、それ以外のケースではどう対応するか
  • 翻訳ファイルに関して、ファイルの分け方、ネームスペースの使いかた、キーの命名規則などを決める必要がある

補足

パッケージの選出は Astro公式ドキュメントのCommunity librariesから選出している
https://docs.astro.build/ja/recipes/i18n/

@nkte8
調査・実験した結果を報告します。

実現したかったこと

  • ドキュメントページに .md ファイルの内容をレンダリングする
  • 言語別に .md ファイルを用意し、パスに含まれる言語コードにしたがって出し分ける

結果

  • プレビューの /i18ntest//en/i18ntest/ を参照のこと
  • ほぼうまくいったが、デプロイ先の環境だとなぜか /ja/ がうまくいかない

結論

  • この方法を採用してもよいとおもう

さらなる検討事項

  • .mdx ファイルもおそらく使える。ドキュメントでより柔軟な表現をおこなうためにはこちらのほうがいいかもしれない
  • Lint のエラーが残っているので対応が必要かもしれない(いまはコメントで無視させている)
  • フォールバックの処理をいれていないので、/fr/ などとすると 404 になる

@so-asano Discordで出した話を記載します

リダイレクトの指向性変更について

  • 現在検証ではデフォルト言語から元のパス(文字コードなし)にリダイレクトしている動作を行っているが、逆に、元のパス(文字コードなし)から言語ありのパスにリダイレクトできないか
    • 文字コードなしで問題が発生しないが文字コードありで問題が発生する、みたいな事象が起きた際に、フィードバックの観点で問題の発覚が難しくなることを懸念している
  • デフォルトの /ja/ -> / のリダイレクトを無効にはできる
  • Astro側でSSRモードであればリダイレクト自体を制御することは可能
    • ライブラリとの共存が可能であるかの懸念あり
    • リダイレクトするページのサンプルを作成する → @nkte8

リダイレクトの方法(Astro Reference)