Astro v3の変更点

Astroの3.0がリリースされました。 このブログはAstroで作成しており、テンプレートでAstroPaperを利用しています。

Astroのバージョンアップに伴いいくつか変更が必要になったため、簡単にですが変更点をまとめました。

変更点

利用可能なNodeJSのバージョンが18.14.1からに変更

• Node 16はサポート外になりました
• このプロジェクトでは18.14.0を利用していたので、最新版の20.6.1を利用するようにしました

開発時のデフォルトのポートが4321に変更

• 3000から4321に変更されたので、開発時はlocalhost:4321でアクセスします
• https://docs.astro.build/en/guides/upgrade-to/v3/#changed-default-port-3000

TypeScriptのverbatimModuleSyntaxがデフォルトで有効化

• 必ずimport typeで型をimportする必要があります
• https://docs.astro.build/en/guides/upgrade-to/v3/#changed-default-verbatimmodulesyntax-in-tsconfigjson-presets

// Before
import { CollectionEntry, getCollection } from "astro:content"
// After
import { type CollectionEntry, getCollection } from "astro:content"

astro checkが別パッケージとして分離

• astro checkを使いたい場合のみインストールする方針になったようです。
  • 利用する場合は@astrojs/checkとtypescriptをインストールする必要があります
• https://docs.astro.build/en/guides/upgrade-to/v3/#moved-astro-check-now-requires-an-external-package

scopedStyleStrategyのデフォルト値がattributeに変更

• whereからattributeに変更されました
  • attributeに変更されたことで詳細度が変化してレイアウトが崩れてしまっていたため、whereに戻す対応をしました

defineConfig({
  scopedStyleStrategy: "where",
})

HTTPリクエストメソッドのケースが変更

• ローワーケースからアッパーケースに変更されました
  • AstroPaperではRSS配信とOGImageの作成で利用しているため、get->GETに変更しました

export async function GET() {
  const posts = await getCollection("blog")
  const sortedPosts = getSortedPosts(posts)
  return rss({
    title: SITE.title,
    description: SITE.desc,
    site: SITE.website,
    items: sortedPosts.map(({ data }) => ({
      link: `posts/${slugify(data)}`,
      title: data.title,
      description: data.description,
      pubDate: new Date(data.pubDatetime),
    })),
  })
}

compressHTMLのデフォルト値が変更

• falseからtrueに変更されました
  • trueに変更されたことで、(開発時を含む)ビルド時にHTMLがminifyされるようになりました
  • AstroPaperではパンくずリストの余白が消えてしまっていたため、スタイルの調整をしました

endpointでResponseオブジェクトを返す必要があるようになった

• v2ではオブジェクトを返すことが可能だったが、v3からはResponseオブジェクトを返す必要があります
  • AstroPaperではOGImageの作成で利用しているため、以下のように変更する必要がありました

// Before
export const get: APIRoute = async ({ params }) => ({
  body: await generateOgImage(params.ogTitle),
})
// After
export const GET: APIRoute = async ({ params }) =>
  new Response(await generateOgImage(params.ogTitle))