ゆとって生きたい
【Astro】Astro 7にアップデートした

【Astro】Astro 7にアップデートした


# astrojs# Astro# TypeScript

はじめに

このブログをAstro 4系からAstro 7系にアップデートしました。 サボり過ぎというのもありつつも、あっというまにメジャーバージョンが上がっていきますね…。

Astro自体は比較的アップデートしやすいフレームワークだと思っていますが、今回はメジャーバージョンをいくつか跨いだこともあり、単純にパッケージだけ上げれば終わりという感じではありませんでした。

特にこのブログではMarkdownの記事をContent Collectionsで管理しているため、Astro 5で入ったContent Layer周りの変更も一緒に対応する必要がありました。

この記事では、実際に対応した内容と確認したポイントを残しておきます。

Codexにお任せでしたが、似たような内容をAgentに読ませることもあるかもだし、まあ一応自分がやったので記事にしておこうと思います。 (Zennで7系へのアップデートはやや詰まったという話を見ましたが、私の環境がシンプルなこともあってかCodexにお任せで問題なく進めることができました)

本文

アップデート後の主なバージョン

今回アップデートした後の主なバージョンは以下です。

{
  "astro": "^7.0.3",
  "@astrojs/mdx": "^7.0.0",
  "@astrojs/rss": "^4.0.18",
  "@astrojs/sitemap": "^3.7.3",
  "tailwindcss": "^4.3.1",
  "daisyui": "^5.6.3"
}

また、良い機会だったのでnodeを26系に更新しています。 （それでローカル環境が動かなくなってちょっと苦労したのですが…） Astro 7へのアップデート自体は公式ガイドを確認しつつ進めました。

https://docs.astro.build/ja/guides/upgrade-to/v7/

ただ、このブログはAstro 4から上げたため、Astro 5のアップグレードガイドも見る必要がありました。

https://docs.astro.build/ja/guides/upgrade-to/v5/

Content CollectionsをContent Layer形式に変更

一番大きかった変更はContent Collections周りです。

以前はsrc/content/config.tsで定義していましたが、現在はsrc/content.config.tsに移動しています。また、Content Layerのloaderとしてastro/loadersのglobを使う形にしています。

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

const blogCollection = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/blog" }),
  schema: ({ image }) =>
    blogSchema.extend({
      heroImage: image().optional(),
    }),
});

このブログでは記事ごとにheroImageをfrontmatterで指定しており、Astroの画像処理に乗せたいので、schema: ({ image }) => ...の形でimage()を使っています。

ここを雑にz.string()だけにしてしまうと、既存のImageコンポーネント側で扱いづらくなるため、既存の表示仕様に合わせて残しました。

Tailwind CSS v4対応

Tailwind CSSもv4系に上げています。

以前のAstro公式Tailwind連携ではなく、現在はVite pluginとして@tailwindcss/viteを使う形にしました。

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://tkkm.tokyo",
  integrations: [mdx(), sitemap()],
  vite: {
    plugins: [tailwindcss()],
  },
});

CSS側もTailwind v4の書き方に寄せています。

@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  themes: all;
  logs: false;
}

@source "../**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";

このブログではDaisyUIも使っているため、DaisyUIもv5系に更新しました。

View Transitions周り

Astro 7のアップグレードガイドでは、astro:transitionsの一部API変更にも触れられています。

このブログでは内部APIには依存しておらず、現在はClientRouterを使う形になっています。

---
import { ClientRouter } from "astro:transitions";
---

{TRANSITION_API && <ClientRouter />}

既存の記事一覧や詳細ページの遷移も、問題なく動いていそうです。

Markdown/MDX周りの確認

Astro 7ではMarkdown周りの処理にも変更が入っています。

このブログは基本的にMarkdown記事が中心で、一部MDXも扱える構成にしているため、記事一覧、タグページ、RSS、サイトマップが壊れていないかを確認しました。

特に確認したのは以下です。

  • Markdown記事がContent Collectionとして読み込めること
  • frontmatterのヒーローイメージが画像として解決されること
  • タグページが生成されること
  • /rss.xmlが生成されること
  • sitemapが生成されること

他にもありますが、CodexにAcceptance Criteriaとして上記のような内容を渡しています。 やっぱり基準を明示するとかなりCodexはそれ通りにやってくれる印象です。

まとめ

Astro 4からAstro 7へのアップデートでは、Astro 7固有の変更だけでなく、途中のAstro 5で入ったContent Layer対応も見る必要がありました。

今回重い腰を上げてアップデートをした理由としては、Astro 7のリリース記事を見ると、 https://astro.build/blog/astro-7/

Rustベースのいろいろな処理がされるようになっていて高速化がされていたり、coding agentを検知してdev serverをバックグラウンドで動かす（これは全然どういうことなのかわかってないけど）したり、AIエージェント用に出力をしたりと機能追加に閉じない魅力的なアップデートだなあと感じたことが大きいです。 結果的にほぼCodex任せだったとはいえ、大きな更新は何が起こるかわからないですし。

おまけ

実際に実装を進める前に、codexとすり合わせた内容は下記になります。

# Astro v7 Upgrade Plan

## Goal

Upgrade this blog from Astro 4 to Astro 7 while preserving the current site behavior, build output, content rendering, RSS feed, sitemap generation, Tailwind styling, and local developer workflow.

Primary reference: <https://docs.astro.build/ja/guides/upgrade-to/v7/>

## Current Project Snapshot

- Package manager: `pnpm`
- Current Astro version: `astro@^4.11.6`
- Current official integrations:
  - `@astrojs/mdx@^3.1.2`
  - `@astrojs/rss@^4.0.7`
  - `@astrojs/sitemap@^3.1.6`
  - `@astrojs/tailwind@^5.1.0`
- Current npm latest versions checked on 2026-06-28:
  - `[email protected]`
  - `@astrojs/[email protected]`
  - `@astrojs/[email protected]`
  - `@astrojs/[email protected]`
  - `@astrojs/[email protected]`
- Site uses:
  - Content collections in `src/content/config.ts`
  - Markdown blog posts
  - `astro:transitions` public APIs: `ViewTransitions` and `slide`
  - RSS route at `src/pages/rss.xml.js`
  - Tailwind and DaisyUI
- Existing unrelated working tree note:
  - `pnpm-workspace.yaml` is currently untracked. Do not modify it unless the upgrade requires it.

## Guide Checks To Apply

1. Upgrade Astro and official integrations together.
   - Preferred command from the Astro guide:
     ```sh
     pnpm dlx @astrojs/upgrade
     ```
   - If the automated upgrader is not enough, manually update `package.json` and regenerate `pnpm-lock.yaml`.

2. Check Vite 8 impact.
   - This project does not currently show custom Vite plugins or Vite config.
   - If new build errors appear, compare them with the Vite 8 migration notes.

3. Check removed experimental flags.
   - Current `astro.config.mjs` does not use `experimental`.
   - No migration expected here.

4. Check Rust compiler strictness.
   - Run `pnpm run build` after upgrading.
   - Fix any invalid Astro/HTML templates, especially unclosed tags or invalid nesting that Astro 4 may have tolerated.

5. Check reserved file name `src/fetch.ts`.
   - No `src/fetch.ts` or `src/fetch.js` was found.
   - No migration expected here.

6. Check new Markdown processor behavior.
   - This project has many `.md` posts and uses `@astrojs/mdx`.
   - No remark/rehype plugins were found in `astro.config.mjs`.
   - Start with Astro 7 defaults. Only add `@astrojs/markdown-remark` and `markdown.processor = unified()` if Markdown/MDX rendering regressions appear.

7. Check whitespace behavior.
   - Astro 7 defaults `compressHTML` to JSX-style whitespace handling.
   - After build, visually inspect pages with adjacent inline elements. If spaces disappear, add explicit spaces in templates or set `compressHTML: true` to preserve the previous behavior.

8. Check deprecated/removed APIs.
   - Removed transition internals were not found.
   - Public imports currently found:
     - `ViewTransitions` from `astro:transitions`
     - `slide` from `astro:transitions`
   - No `@astrojs/db` dependency was found.
   - No `getContainerRenderer()` usage was found.

## Repo-Specific Cleanup To Include

- `astro.config.mjs` currently imports and registers `sitemap` twice:
  - duplicate `import sitemap from '@astrojs/sitemap';`
  - duplicate `sitemap()` in `integrations`
- Remove the duplicate while touching the config for the upgrade.

## Execution Steps

1. Confirm baseline state.
   ```sh
   git status --short
   pnpm install --frozen-lockfile
   pnpm run build

  1. Run the official upgrader.

    pnpm dlx @astrojs/upgrade

  2. Review dependency changes.

    • Confirm astro is upgraded to v7.
    • Confirm official integrations are compatible with Astro 7.
    • Confirm pnpm-lock.yaml is regenerated consistently.

  3. Apply required source/config fixes.

    • Clean duplicate sitemap config.
    • Fix compiler errors from stricter Astro parsing.
    • Fix Markdown/MDX rendering issues only if they appear.
    • Fix whitespace regressions only if they appear.

  4. Verify the upgrade.

    pnpm run build
pnpm run dev

  5. Smoke test in browser.

    • Home page
    • Blog index pagination
    • Individual blog post pages
    • Tag pages
    • RSS route: /rss.xml
    • Sitemap output
    • View transitions
    • Images from content collection frontmatter

Acceptance Criteria

  • package.json and pnpm-lock.yaml resolve Astro 7.
  • pnpm run build succeeds.
  • Existing routes still render.
  • Markdown posts and MDX support still work.
  • RSS and sitemap generation still work.
  • No unrelated user changes are reverted.