Astro6.0

Astto6.0がリリースされた。基本的な機能に変更はないが多くの機能追加がある。

Astro 6 is here with a refactored dev server, an experimental Rust compiler, live content collections, CSP, and more.

アップグレード方法

# Recommended:npx @astrojs/upgrade# Bunbun x @astrojs/upgrade# Manual:npm install astro@latest

ここに載せていない追加機能は以下の通り

Live Content Collections

これまで実験的機能だった Live Content Collections が正式な機能になった。

src/live.config.ts

import { defineLiveCollection } from 'astro:content';import { z } from 'astro/zod';import { cmsLoader } from './loaders/my-cms';const updates = defineLiveCollection({  loader: cmsLoader({ apiKey: process.env.MY_API_KEY }),  schema: z.object({    slug: z.string(),    title: z.string(),    excerpt: z.string(),    publishedAt: z.coerce.date(),  }),});export const collections = { updates };

呼び出し

---import { getLiveEntry } from 'astro:content';const { entry: update, error } = await getLiveEntry(  'updates',  Astro.params.slug,);if (error || !update) {  return Astro.redirect('/404');}---<h1>{update.data.title}</h1><p>{update.data.excerpt}</p><time>{update.data.publishedAt.toDateString()}</time>

Built-in Fonts API

フォント埋め込みAPIであるBuilt-in Fonts APIが実装された。

astro.config.mjs

import { defineConfig, fontProviders } from 'astro/config';export default defineConfig({  fonts: [    {      name: 'Roboto',      cssVariable: '--font-roboto',      provider: fontProviders.fontsource(),    },  ],});

フォントを利用する

Fontコンポーネントをimportし astro.config.mjsで定義したcssVariableを指定する。

cssでそのフォントのcss変数名を指定する。

---import { Font } from 'astro:assets';---<Font cssVariable="--font-roboto" preload /><style is:global>  body {    font-family: var(--font-roboto);  }</style>

これ以外に複数の実験的機能が登場しているが割愛する。