GatsbyJSで作ったブログのi18nを検討中

公開日: 2020年06月28日最終更新日: 2022年01月28日

せっかくブログ記事を書くならば英語版も作って公開してみようと考え、このブログの多言語対応（i18n: internationalization）を検討しています。 DeepLの翻訳精度がすごいので機械翻訳で楽に対応できそうというのもあります。しかしGatsbyJSでどう対応させるかで困っています。

GatsbyJSではいくつかプラグインがあるようです。Localization and Internationalization with Gatsby (i18n)にある通り、gatsby-plugin-i18nを使うことでpages配下のページはプラグインでi18n対応できました。 しかし "content/posts" 配下のmarkdownは対象になりません。

イメージとしては、日本語で書いた記事のファイルは "content/posts/2020-06-28-i18n/index.md" として配置し、 英語のファイルは "content/posts/2020-06-28-i18n/index.en.md" のように配置すると、それぞれの言語のページが作成されるようにしたいです。
その上で、日本語の場合は "gan0803.dev/2020-06-28-i18n" というパスでアクセスし、英語の場合は "gan0803.dev/en/2020-06-28-i18n" のようにlocaleのディレクトリ配下のパスでアクセスできると嬉しいです。このときのパスはslugを優先し、かつslugのパスの前にも必要に応じてlocaleを入れてほしいです。

しかし、gatsby-theme-blogのpostsをi18n対応してくれるプラグインは多分なさそうです。 自分で作り込む必要がありそうです。 言語設定用のキーを追加してGraphQLのクエリに追加、gaysby-node.jsでページ生成するように変更、切り替え部品を作成する、という感じでしょうか。

GatsbyJSを使っていて思うのですが、ThemeやPluginがいまいち自分の欲しいケースに当てはまらないということが多いです。
そして自分でThemeやPluginをカスタマイズして使う場合は依存パッケージが多くバージョンアップの変更点を追うのが大変というのも感じています。
GatsbyJSに対する理解が足りなくて無駄なことをしているという可能性は大いにありますが。

GatsbyJSは以下のような開発環境や基本的な機能を提供してくれるものとして扱うのが良いように感じています。

• React、Webpack、Babelなどがすぐ使えて、TypeScriptもすぐコンパイルできる。
• GraphQLを使ってデータソースから必要なデータを取り出してページを構築できる。
• シンプルなサイトを作るのであれば必要なものは用意されていて、苦労せずサイトに機能追加できる場合がある。

ThemeやPluginはそのまま利用できる場合だけ利用し、手を加えない（できるだけshadowingしない）。 機能を追加したい場合はコンポーネントを新しく自分で作り込んでいく、という感じです。

最近はHugoのほうがエコシステムが大きく見えて、色々用意されていて楽なんじゃないか、とかよぎります。隣の芝は青い。
showcaseを見ると素晴らしいサイトがたくさんあるので、GatsbyJSで作られたサイトのコードを読んで学ぼうと思います。Reactとかサイトのコード公開されてるんですね。