Astro 5.2 | Astro

Astro 5.2 уже доступен! Первый минорный релиз 2025 года: поддержка Tailwind 4, новый способ доступа к значениям конфига на страницах, улучшенная обработка trailing slash и поддержка внешних редиректов.**

Ещё январь — сделайте своим решением попробовать эти функции:

Поддержка Tailwind 4
Редиректы trailing slash
Внешние редиректы
TOML frontmatter в Markdown
Экспериментально: astro:config
Экспериментально: отключение React streaming

Чтобы обновить существующий проект, используйте CLI @astrojs/upgrade. Или обновите вручную:

# Рекомендуется:
npx @astrojs/upgrade

# Вручную:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Tailwind 4 support

С релизом v4 Tailwind CSS предлагает плагин @tailwindcss/vite, который можно напрямую добавить в проект Astro. Это упрощает опыт Tailwind в Astro — теперь рекомендуемый способ использовать Tailwind 4.

Astro 5.2 добавляет нативную поддержку этого Vite-плагина; команда astro add tailwind добавит плагин в конфиг Astro и создаст CSS-файл с импортом стилей Tailwind.

Интеграция @astrojs/tailwind устарела, но продолжит работать со старыми версиями Tailwind. Для обновления до Tailwind 4 удалите интеграцию и используйте обновлённую команду astro add tailwind или руководство Tailwind по ручной установке.

Спасибо Eveeifyeve за первую работу по поддержке Tailwind 4 в альфе, хотя итоговая реализация оказалась другой.

Trailing slash redirects

Нужен ли trailing slash в пути — вечный спор в веб-разработке. Но все согласны: должно быть единообразно. Дублированный контент вреден для SEO и сбивает пользователей.

Astro давно позволял настроить, сопоставляются ли маршруты с trailing slash или без, но раньше это означало «not found» для неверного пути или передачу хосту. Astro 5.2 автоматически редиректит on-demand маршруты на правильный путь согласно trailingSlash в astro.config.mjs.

Теперь неважно, перешёл ли посетитель на /about/, /about или даже /about/// — в production он всегда попадёт на правильную страницу. Для GET — редирект 301 (постоянный), для остальных методов — 308 (постоянный, с сохранением метода).

В development Astro покажет страницу ошибки вместо редиректа — чтобы поймать неверную конфигурацию и битые ссылки.

Чтобы включить редиректы trailing slash, установите trailingSlash в astro.config.mjs:

export default defineConfig({
  adapter: node({ mode: 'standalone' }),
  trailingSlash: 'never', // or 'always'
});

Подробнее — в документации trailingSlash.

External redirects

Astro теперь поддерживает внешние редиректы на http или https прямо из конфигурации.

Как и для внутренних редиректов с Astro 2.9, с адаптером можно передать объект как значение — указать status в дополнение к новому destination.

import {defineConfig} from "astro/config"

export default defineConfig({
    redirects: {
        "/about": "https://example.com/about",
        "/news": {
            status: 302,
            destination: "https://example.com/news"
        }
    }
})

Подробнее — в обновлённой документации конфигурации redirects.

TOML frontmatter in Markdown

Отличная поддержка Markdown и MDX в Astro всегда включала YAML frontmatter — в экспортах файлов и content collections. В этом релизе Astro также поддерживает TOML frontmatter в обоих. Полезно при добавлении контента с TOML из другого фреймворка вроде Hugo, или если просто предпочитаете TOML вместо YAML!

Конфигурация не нужна: используйте +++ для разделителя frontmatter — Astro распарсит как TOML.

+++
date = 2025-01-30
title = 'Use TOML frontmatter in Astro!'
[params]
  author = 'Houston'
+++

# Support for TOML frontmatter is here!

Спасибо Colin Bate за этот вклад.

Experimental: `astro:config`

В Astro несколько способов доступа к настройкам конфигурации: переменные окружения, глобальный объект Astro в .astro, переменная context в middleware и endpoints. Но легко забыть, где что доступно: import.meta.env.BASE или Astro.base?

С astro:config хотим дать единый способ читать самые полезные опции конфигурации откуда угодно в проекте — с типобезопасностью!

Виртуальный модуль экспонирует два подмодуля (/client и /server) для разных подмножеств значений конфигурации — защита данных, доступных клиенту.

Чтобы использовать модуль, включите через экспериментальный флаг:

import {defineConfig} from "astro/config"

export default defineConfig({
    trailingSlash: "always",
    experimental: {
        serializeConfig: true
    }
})

Затем из любого файла проекта:

import {trailingSlash} from "astro:config/client"

export function appendForwardPath(path) {
    if (trailingSlash === "always") {
        return path.endsWith("/") ? path : path + "/"
    }
    return path
}

Подробнее — в документации Serialized Configuration.

Хотим в будущем устареть другие способы чтения этих свойств и сделать astro:config стандартом. Присоединяйтесь к обсуждению в Serialized Config RFC!

Experimental: disable React streaming

Интеграция @astrojs/react теперь позволяет отключить React streaming. Полезно, если библиотека несовместима со стримингом — многие CSS-in-JS. Чтобы отключить, обновите интеграцию:

# Рекомендуется:
npx @astrojs/upgrade

# Вручную:
npm install @astrojs/react@latest
pnpm upgrade @astrojs/react --latest
yarn upgrade @astrojs/react --latest

Затем установите experimentalDisableStreaming: true в astro.config.mjs:

export default defineConfig({
  integrations: [
    react({
      experimentalDisableStreaming: true,
    }),
  ],
});

Подробнее — в документации @astrojs/react.

Спасибо Arturo Silva из Washington Post за этот вклад.

Bug fixes

Много исправлений с релиза 5.1. Все детали — в changelog.

Thanks

Спасибо всем контрибьюторам, включая Arturo Silva, Colin Bate, Sarah Rainsberger, Matthew Phillips, HiDeoo, Bjorn Lu, Armand Philippot, Yan Thomas, и многих других.

Ждём, что вы построите с Astro 5.2!