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

# Bun
bun 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>

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