Astroのバージョンをv5からv6に更新した

公開日:
目次

Astroのversion 6がリリースされた。
https://astro.build/blog/astro-6/

このブログと、自社のサイトは、astro (v5)で作っているので、 v6に更新した。

Astro5から導入された新しいcontent collectionへの対応が作業の中心。
legacyなcontent collection(v2)が、Astro V5では一応使えたが、 Astro 6では使えなくなった。 Astro6特有の変更は、zodの更新に関係する事項のみだった。

Astro5から、Astro6へのアップグレード。

npx @astrojs/upgrade

content.config.tsの修正

src/content/config.tsを、src/content.config.tsにリネームして移動。

https://docs.astro.build/en/guides/upgrade-to/v6/#deprecated-astroschema-and-z-from-astrocontent を参考に、content.config.tsを修正

importの修正

import { defineCollection, z } from "astro:content"

を、

import { defineCollection } from "astro:content"
import { z } from "astro/zod"
import { glob } from 'astro/loaders';

に修正。zod4への対応と、新しいcontent collectionへの対応。

defineCollectionの中の修正

type: 'content', 

を削除。その代わり、コンテンツコレクションのパスをloaderで追加。

loader: glob({ base: './src/content/news', pattern: '**/*.{md,mdx}' }),

slugをidに書き換える

https://docs.astro.build/ja/guides/upgrade-to/v5/#legacy-v20-content-collections-api

Astro V5から、新しいcontent collectionが導入された。 この変更で、slugはdeprecateされ、idが導入された。V5では、slugが使えた。V6では、slugが廃止された。

post.slugなどのようにslugを使っていた場所は、post.idに変更しなければならない。

本当なら、Astro V5でサイトを作る時に、slugは避けて、idを使うべきだったのであるが、なぜか、そうしていなかった。v6へのアップグレードで問題が表面化して修正する事になった。

entry.renderの修正

https://docs.astro.build/ja/guides/upgrade-to/v5/#legacy-v20-content-collections-api

content collectionの変更で、render()機能も変更された。

変更に対応するため、まず、render()を使うファイルで、

import { render } from 'astro:content';

を追加する。

加えて、

const { Content } = await entry.render();

const { Content } = await render(entry);

に修正する。