O hirunewani blog

Astro 5へのマイグレーションを行った

Created at

公式ドキュメントなどを参考に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.tssrc/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.tssrc/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 />