サムネイル

Astro v4.6リリース!i18n強化やCSRF保護などが追加

#Astro#GitHub#Web開発#オープンソース#ニュース
投稿日:

2023年4月11日に、静的サイトジェネレーターであるAstroの最新バージョンAstro 4.6がリリースされました。

このバージョンでは、国際化のための手動ルーティング戦略開発者ツールバーの移動機能CSRF保護の実験的サポートなど、多数の新機能と改善が追加されています。この記事では、Astro 4.6の主要な変更点について解説します。

Astro v4.6の注目機能

Astro v4.6では次の機能が新たに追加されました。

それでは、これらの機能について一つずつ詳しく見ていきましょう。

手動i18nルーティング戦略

Astro v4.6では、国際化(i18n)のための手動ルーティング戦略が導入されました。この機能を利用することで、国際化されたAstroサイトのルーティングをより詳細に制御できるようになります。これは、デフォルトのルーティング戦略では不十分な場合に便利です。

手動ルーティングを有効にするには、astro.config.mjsi18n.routingオプションをmanualに設定します。

astro.config.mjs
1
import { defineConfig } from "astro/config";
2
3
export default defineConfig({
4
i18n: {
5
locales: ["en", "fr"],
6
defaultLocale: "fr",
7
routing: "manual",
8
}
9
});

次に、ルーティングを処理するためのmiddlewareをプロジェクトに追加します。

開発者ツールバーの位置変更機能

Astro v4.6では、開発者ツールバーの位置を画面の下部の異なる位置に移動させる機能が追加されました。これは、画面下部にヘッダーがある場合や、ツールバーを別の位置に移動させたい場合に役立ちます。

実験的なCSRF保護のサポート

Astro v4.6では、CSRF保護に対する実験的な部分サポートが追加されました。この機能は現在実験的なフラグの下にあり、将来的に変更される可能性があります。

CSRF保護を有効にするには、astro.config.mjsexperimental.security.csrfProtectionオプションを設定します。ただし、この機能はSSRモードでのみサポートされています。

astro.config.mjs
1
import { defineConfig } from "astro/config";
2
3
export default defineConfig({
4
experimental: {
5
security: {
6
csrfProtection: {
7
origin: true
8
}
9
}
10
}
11
});

Cookieの改善

AstroのCookie削除用ヘルパー(Astro.cookies.delete)では、pathdomain属性だけでなく、より多くの属性を設定できるようになりました。これにより、Cookieの削除がより柔軟になり、より正確な制御が可能になります。

旧バージョンのNode.jsのサポート終了

新しいバージョンのAstroでは、Node.jsのサポートポリシーに従い、古いバージョンのNode.jsのサポートが終了しました。サポートが終了したバージョンを使用している場合でも、Astro v5がリリースされるまでは引き続き使用できますが、いくつかの機能が期待どおりに動作しない可能性があります

Astroのアップグレード方法

既存のプロジェクトをAstro v4.6にアップグレードするには、@astrojs/upgradeを使用できます。または、パッケージマネージャーのアップグレードコマンドを実行して手動でアップグレードすることもできます。

Terminal window
npx @astrojs/upgrade
Terminal window
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

まとめ

Astro v4.6では、開発者がより細かい制御を行えるように多くの機能が追加・改善されています。とくに、国際化のための手動ルーティング戦略やCSRF保護のサポートなどの有用な機能が追加されています。

Astroの最新バージョンを使用することで、より柔軟で安全なWebサイトを構築できるようになります。Astroの公式ドキュメントを参照して、新しい機能を活用してみてください。

参考

Twitterのアイコン LINEのアイコン Threadsのアイコン Misskeyのアイコン Misskeyのアイコン
著者のアイコン画像