はじめに
Astro v5 がリリースされたので、TIL サイトで使用していた Astro v4 からアップグレードしました。
この記事では、アップグレードに伴い変更が必要だったところや v5 で利用できるようになった実験的な機能についてご紹介したいと思います。
Astro v5 へのアップグレード
Astro v4 から v5 へのアップグレードガイドをみながら進めました。
まずは推奨されているアップグレードコマンドを叩きます。
> npx @astrojs/upgrade
Need to install the following packages:
@astrojs/upgrade@0.4.0
Ok to proceed? (y)
astro Integration upgrade in progress.
● @astrojs/check will be updated to v0.9.4
● @astrojs/rss will be updated to v4.0.9
● @astrojs/tailwind will be updated to v5.1.3
▲ astro will be updated to v5.0.2
▲ @astrojs/react will be updated to v4.0.0
wait Some packages have breaking changes. Continue?
Yes
check Be sure to follow the CHANGELOGs.
astro Upgrade to Astro v5
@astrojs/react CHANGELOG
██████ Installing dependencies with npm...
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there.
╰─────╯
アップグレード後に TIL サイトを触ってみて、壊れていたのはページネーションくらいでした。
paginate()で返される URL が変わった
これまで/til${page.url.next}のようにベースパス(/til)を自前で書かないといけませんでしたが、astro.config.mjs でbaseが設定してあればベースパスは不要になりました。
Content Collection から Content Layer へ
Content Collection はレガシーな機能となり、新しく Content Layer が使用できるようになりました。
使用するためにはいくつかやることがあります。
設定ファイルの移動
src/content/content.config.tsから、src/content.config.tsに移動させます。
コレクション定義の編集
コレクションを選択するtypeプロパティがレガシーとなり、loaderが使用されるようになりました。
loaderを定義していない コレクション定義では、内部的にastro/loaders の glob が使用されます。
コレクションの参照に使用していた slug を id に変更
Content Layer コレクションの参照にはidを使うようになったため、slugで参照している箇所は変更する必要があります。dynamic routing ファイルの[slug].astro も[id].astro に変更します。
しばらくは従来のコレクションを使用したい場合
これらの変更の準備ができていない場合は、legacy.collectionsフラグを有効にすることで、引き続き従来の Content Collection API の使用を続けることもできます。
TypeScript の設定変更
これまでsrc/env.d.tsが型推論に使用されていましたが、.astro/types.d.tsが使用されるようになりました。
それに伴い、ビルドされたファイルのチェック回避等の推奨される設定をtsconfig.jsonに追記します。
experimental な機能
せっかくなので 新しく利用できるようになった experimental な機能 を 1 つ使用してみました。
SVG 画像をそのままコンポーネントとして扱える
SVG 画像ファイルをインポートするだけでコンポーネントとして扱えるようになりました。
ネイティブな<svg>要素でサポートされているwidth, height, fillなどの属性を props として渡せます。
これを利用して、フッターのリンクを SVG 画像のアイコンに変更しました。
おわりに
ここまで読んでいただいてありがとうございました！
Discussion