Astro v2 へのアップグレードと、Content Collections の適用

投稿日: 2023-01-28

2023/01/23 に Astro v2 がリリースされたので、このサイトも v2 にアップグレードしてみた。

また目玉機能の 1 つに Content Collections が追加されたらしいので、それも適用してみた。

Astro v2 へのアップグレード

基本的に、用意された通りの Upgrade guide に沿って実施したら上手くいった(といっても Breaking Changes に掠ってなかったのでアップデートコマンドを実行した程度)。

ドキュメントをちゃんと読めばわかるのだけど、 react や vue などの integration を追加している場合は、 integration のバージョンも同時に上げてあげる必要があるので注意(ちゃんと読まなくて余分な時間を食った口です)。

自分の場合、ライブラリをほとんど入れていないので、この機会に一気に全部あげちゃえーと下記コマンドをおもむろに実行した。

$ yarn upgrade --latest

最終的な package.json のアウトプットはこんな感じになった。

Content Collections の適用

Markdown ファイルに型をつけることができて嬉しくなる機能、とのことでせっかくなので適用してみた。

公式ドキュメントと、先に Content Collections を適用されていた方のブログを参考にさせていただいた。ありがとうございます。

• https://docs.astro.build/en/guides/content-collections
• https://hiroppy.me/blog/astro-content-collections

個人的にややこしかったのが、 src/pages/posts/[slug].astro を作る部分。

Content Collections を適用する前のブログ記事は、 src/pages/posts/blogTitle.md という形式で保存されていたので、 /posts/blogTitle の url でブログページにアクセスできた。

Content Collections を適用する際に、ブログ記事は src/contens/blog のディレクトリに移動させたので、 /posts/blogTitle の url ではアクセスできなくなった。

そこで必要になってくるのが、新たに src/pages/posts/[slug].astro というファイルを作成して、動的にパスの解決をさせる実装。

これが、 SSG の場合と SSR の場合で対応が異なってくる。

SSG の場合は下記にあるような実装でビルド時に解決する。

https://docs.astro.build/en/guides/content-collections/#building-for-static-output-default

SSR の場合は、下記の実装でリクエスト時に解決する。

https://docs.astro.build/en/guides/content-collections/#building-for-server-output-ssr

自分の場合、 SSR を設定していたので後者のやり方になった。また、Markdown ファイルの方で layout コンポーネントを設定していたが、この実装になるのであれば src/pages/posts/[slug].astro ファイルの方に実装した方がシンプルになりそうなので、その修正も追加した。

最終的にはこんな感じ(プルリクエストに不要な変更が混ざっちゃっているけどまあご愛顧)

余談

せっかく記事にしても、 SEO 何も頑張っていないので自然流入では困って検索した人に全く引っかからない気がする。

せっかく SEO 的な効果もあるという Content Collections も適用したので、 SEO 関連の実装いくらか頑張ってみよう。