Astro 5へのマイグレーションを行った
公式ドキュメントなどを参考にAstro 5へのマイグレーションを個人的に行った際のメモ
公式のマイグレーションガイドが十分に詳しいため、特殊な実装をしていなければ、あまり問題なく移行できると思われる。
https://docs.astro.build/en/guides/upgrade-to/v5/
私個人はtsconfigの更新を後から行ったり、既存ファイルの名前によるエッジケースを踏んだため、若干手間取ったが、基本的には問題なく移行できた。
tsconfigの更新
src/env.d.ts
ではなく、src/.astro/types.d.ts
が利用されるようになった。
https://docs.astro.build/en/guides/upgrade-to/v5/#changed-typescript-configuration
},
+ "include": [".astro/types.d.ts", "**/*"],
+ "exclude": ["dist"]
}
この対応をしておかないと、新しいコンテンツレイヤーAPIなどを利用しようとした際に型エラーが発生する。
新しいコンテンツレイヤーAPIへの対応
Astro 5に移行する上で必須ではないが、対応を行った。
https://docs.astro.build/en/guides/upgrade-to/v5/#what-should-i-do-2
content configファイルの移動
src/content/config.ts
をsrc/content.config.ts
に移動した。
typeの削除とloaderの追加
import { SITE } from "site.config";
import { defineCollection, z, type CollectionEntry } from "astro:content";
+ import { glob } from 'astro/loaders';
const blog = defineCollection({
- type: "content",
+ loader: glob({
base:"./src/content/blog",
pattern:"\*_/_.md"
}),
schema: ({ image }) =>
z.object({
author: z.string().default(SITE.author),
post.slugの変更
新しいコンテンツレイヤーAPIでは、post.slugはpost.idに置き換えられている。 型エラーに従い修正すれば良い。
既存のconfig.tsのようなファイルの変更
同様の報告は見られないが、src/config.ts
のようなファイルがある場合、コンテンツが正常に取得出来なくなる挙動が見られた。
元々あったsrc/config.ts
をsrc/site.config.ts
に変更したところ、正常に動作するようになった。
ViewTransitionsの名前変更
ClientRouterという名前に変更されたため変更が必要。
https://docs.astro.build/en/guides/upgrade-to/v5/
- import { ViewTransitions } from 'astro:transitions';
+ import { ClientRouter } from 'astro:transitions';
- <ViewTransitions />
+ <ClientRouter />