`astro-i18n-aut` Astroのためのi18n統合 🧑‍🚀

すべてのAstroクルーメイトのために❤️で作られました 🧑‍🚀

動機

Astroのための国際化（i18n）統合を提供します：

defaultLocaleをサポート
テンプレートファイルの重複を回避
アダプターに依存しない
UIフレームワークに依存しない
@astrojs/sitemap と互換性あり

クイックスタート

インストール

npm経由でインストール：

npm install astro-i18n-aut

設定

Astroの設定ファイルで:

import { defineConfig } from "astro/config";
import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
import sitemap from "@astrojs/sitemap";
const defaultLocale = "en";
const locales = {
  en: "en-US", // the defaultLocale value must present in locales keys
  es: "es-ES",
  fr: "fr-CA",
};export default defineConfig({
  site: "https://example.com/",
  trailingSlash: "always",
  build: {
    format: "directory",
  },
  integrations: [
    i18n({
      locales,
      defaultLocale,
    }),
    sitemap({
      i18n: {
        locales,
        defaultLocale,
      },
      filter: filterSitemapByDefaultLocale({ defaultLocale }),
    }),
  ],
});

あなたの .gitignore ファイルでは:

astro_tmp_pages_*

使用方法

設定が完了すると、各 .astro ページは他の言語でも追加のレンダリングが行われます。例えば、src/pages/about.astro は以下のようにレンダリングされます：

/about/
/es/about/
/fr/about/

redirectDefaultLocale（デフォルトで true）を有効にしている場合、リダイレクトは以下のようになります：

/en/about/ => /about/

getStaticPaths() 関数は一度だけ実行されることに注意してください。この制限により、/about/ に対する /es/acerca-de/ のような翻訳されたURLは使用できません。ただし、これは @astrojs/sitemap との互換性を保証します。

Astro のフロントマターとページコンテンツは、翻訳された各ページごとに再実行されます。例えば、Astro.url.pathname は以下のようになります：

/about/
/es/about/
/fr/about/

どの言語がレンダリングされているかの検出はあなた次第です。Astro のコンテンツコレクションや、react-i18next のような任意の i18n UI フレームワークを翻訳に利用できます。以下は純粋な Hello World の例です：

---
import { getLocale } from "astro-i18n-aut";
import Layout from "../layouts/Layout.astro";
const locale = getLocale(Astro.url);
let title: string;
switch (locale) {
  case "es":
    title = "¡Hola Mundo!";
    break;
  case "fr":
    title = "Bonjour Monde!";
    break;
  default:
    title = "Hello World!";
}

  
{title}

ロケールの扱いを容易にするためのいくつかのヘルパー関数が含まれています。

Astro の設定オプション

詳細については公式の Astro ドキュメントをご覧ください：

いずれかを設定する必要があります：

```
  {
```

site: "https://example.com/",
    trailingSlash: "always",
    build: {
      format: "directory",
    },
  }
  ```js

  
{
    site: "https://example.com",
    trailingSlash: "never",
    build: {
      format: "file",
    },
  }
  `
これらのオプションはすべて関連しており、一緒に設定する必要があります。これらはあなたのURLが以下のいずれになるかに影響します：/about/

/about
/about/ を選択した場合、/about は404になり、その逆も同様です。
統合オプション
locales：すべての言語ロケールのレコード。

defaultLocale：デフォルトの言語ロケール。値は locales のキーに存在しなければなりません。

redirectDefaultLocale - 例えば defaultLocale: "en" の場合、/en/about/ が /about/ にリダイレクトされるかどうか（デフォルト：308）。

include：含めるグロブパターン（デフォルト：["pages//*"]）。

exclude：除外するグロブパターン（デフォルト：["pages/api//*"]）。
互換性
#### ページファイルタイプ
その他の Astro ページファイルタイプ：
✅ .astro

❌ .md

❌ .mdx（MDX統合がインストールされている場合）

❌ .html

❌ .js / .ts（エンドポイントとして）
は翻訳できません。pages ディレクトリでこれらを使用する場合は、無視するグロブパターンに追加してください。例えば：js
["pages/api//", "pages//.md"];

#### ページの除外
Astroのドキュメントには次のように記載されています：
ページやディレクトリの名前の先頭にアンダースコア（_）を付けることで、それらをビルドから除外できます。_で始まるファイルはルーターに認識されず、dist/ディレクトリに配置されません。
>
これを使ってページを一時的に無効にしたり、テスト、ユーティリティ、コンポーネントを関連するページと同じフォルダに置くことができます。
残念ながら、このページ除外機能はサポートされていません。ページディレクトリにはページのみを配置してください。アンダースコア（_）で始まるページは、pages//_* を無視するグロブパターンに追加することで除外できます：
js
["pages/api//", "pages//_"];

#### Markdown.md と .mdx には、Astro の Content Collections を使用します。
このライブラリと Astro Content Collections を使うことで、Markdown を content に分けて整理しつつ、pages/blog/index.astro と pages/blog/[slug].astro を使って、defaultLocale があってもすべてのコンテンツをレンダリングできます。以下はフォルダ構成の例です：

.
└── astro-project/
    └── src/
        ├── pages/
        │   └── blog/
        │       ├── index.astro
        │       └── [id].astro
        └── content/
            └── blog/
                ├── en/
                │   ├── post-1.md
                │   └── post-2.md
                ├── es/
                │   ├── post-1.md
                │   └── post-2.md
                └── fr/
                    ├── post-1.md
                    └── post-2.md


#### UIフレームワーク

Astroはページファイルタイプとして.tsxや.jsxをサポートしていません。

ReactやVueのようなUIフレームワークは、Astroで通常通りコンポーネントとしてインポートして使用してください。

翻訳された内容title={t('title')}やロケールlocale={locale}をpropsとして渡しても構いません。

#### エンドポイント

デフォルトでは、pages/api//*内のすべてのページは無視されます。

.tsおよび.js`のエンドポイントでは、複数のロケールの処理方法は任意です。エンドポイントはユーザー向けではなく、使用方法も多様なため、実装はお好みにお任せします。

ライセンス

MITライセンス

コントリビュート

PR歓迎！ご協力ありがとうございます。バグ報告やPR作成についてはコントリビュートガイドをご覧ください。

--- Tranlated By Open Ai Tx | Last indexed: 2026-07-24 ---

astro-i18n-aut

astro-i18n-aut Astroのためのi18n統合 🧑‍🚀

動機