設定方法

次のリファレンスはAstroでサポートされているすべての設定項目をカバーしています。Astroの設定についてもっと知りたい場合は、Astroの設定の解説を確認してください。

import { defineConfig } from 'astro/config'

export default defineConfig({
  // 設定項目をここに追加します
})

トップレベルのオプション

site

データ型: string

最終的にデプロイされるURLです。Astroはビルドの最後にサイトマップとcanonicalタグのURLを生成するためにこの完全なURLを使用します。Astroを最大限活用するためにこの値を設定することを強く推奨します。

{
  site: 'https://www.my-site.dev'
}

base

データ型: string

デプロイ先のベースパスです。Astroは、開発時と本番ビルドの両方で、このパスをページとアセットのルートとして使用します。

以下の例では、astro devコマンドは/docsでサーバーを起動します。

{
  base: '/docs'
}

このオプションを使用する場合、静的アセットのインポートとURLには、指定したベースをプレフィックスとして追加する必要があります。この値はimport.meta.env.BASE_URLでアクセスできます。

import.meta.env.BASE_URLの値は、baseにどのような値を設定するかに関わらず、trailingSlashの設定で決定されます。

trailingSlash: "always"が設定されている場合は、常に末尾にスラッシュが含まれます。trailingSlash: "never"が設定されている場合は、baseにスラッシュが含まれていても、BASE_URLには末尾のスラッシュが含まれません。

さらに、Astroはインテグレーションで利用可能にする前に、config.baseに設定された値を内部で操作します。インテグレーションで読み込まれるconfig.baseの値も、同様にtrailingSlash設定によって決定されます。

以下の例では、import.meta.env.BASE_URLとconfig.baseの値は、処理されるときにどちらも/docsになります。

{
   base: '/docs/',
   trailingSlash: "never"
}

以下の例では、import.meta.env.BASE_URLとconfig.baseの値は、処理されるときにどちらも/docs/になります。

{
   base: '/docs',
   trailingSlash: "always"
}

trailingSlash

データ型: 'always' | 'never' | 'ignore'
デフォルト値: 'ignore'

開発サーバーのルーティングをマッチさせる動作の設定をします。次のオプションから選択してください。

'always' - 末尾にスラッシュを含むURLにのみマッチします。（例: “/foo/“）
'never' - 末尾にスラッシュを含むURLにはマッチしない。（例: “/foo”）
'ignore' - URLの末尾に”/“があるかどうかに関係なくマッチします。

本番用ホストが末尾のスラッシュの有無を厳格に扱う場合に、この設定項目を使用してください。

開発中に末尾のスラッシュの有無によりURLが動作しないようにしたい場合にも、このオプションを設定できます。

{
  // 例: 開発時に末尾のスラッシュを必須にする
  trailingSlash: 'always'
}

以下も参照:

build.format

redirects

データ型: Record.<string, RedirectConfig>
デフォルト値: {}

追加： astro@2.9.0

リダイレクトのマッピングを指定します。マッチするルートをキーに、リダイレクト先のパスを値にします。

動的ルートと静的ルートの両方をリダイレクトできますが、同じ種類のルートにのみリダイレクトできます。たとえば、'/article': '/blog/[...slug]' のようなリダイレクトはできません。

{
  redirects: {
    '/old': '/new',
    '/blog/[...slug]': '/articles/[...slug]',
  }
}

アダプターをインストールせずに静的に生成されたサイトでは、<meta http-equiv="refresh">タグによるクライアントリダイレクトを生成し、ステータスコードはサポートされません。

SSRの使用時か、output: staticモードで静的アダプターを使用している場合は、ステータスコードがサポートされます。AstroはリダイレクトされるGETリクエストにはステータスコード301を、その他のリクエストメソッドにはステータスコード308を使用します。

リダイレクトのステータスコードは、リダイレクトの設定でオブジェクトを使用してカスタマイズできます。

{
  redirects: {
    '/other': {
      status: 302,
      destination: '/place',
    },
  }
}

output

データ型: 'static' | 'server' | 'hybrid'
デフォルト値: 'static'

ビルドの出力対象を指定します。

'static' - 静的ホストにデプロイされる静的サイトをビルドします。
'server' - SSR (サーバーサイドレンダリング) をサポートするホストにデプロイされるアプリをビルドします。
'hybrid' - サーバーサイドレンダリングするページを一部含んだ静的サイトをビルドします。

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static'
})

以下も参照:

adapter

adapter

データ型: AstroIntegration

ビルドアダプターにより、好みのサーバー、サーバーレス、エッジのホストにデプロイできます。NetlifyやVercelなどのファーストパーティーのアダプターをインポートし、AstroのSSRを活用しましょう。

SSRについて詳しくはサーバーサイドレンダリングのガイドを、ホストの完全な一覧はデプロイのガイドを確認してください。

import netlify from '@astrojs/netlify';
{
  // 例: Netlifyのサーバーレスデプロイのためにビルドする
  adapter: netlify(),
}

以下も参照:

output

integrations

Type: AstroIntegration[]

カスタムインテグレーションでAstroを拡張します。インテグレーションは、Solid.jsなどのフレームワークのサポート、サイトマップなどの新しい機能、Partytownなど新しいライブラリの追加を一手に担います。

Astro のインテグレーションを使い始めるためにはインテグレーションガイドを確認してください。

import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
{
  // 例: Astro にReactとTailwindのサポートを追加
  integrations: [react(), tailwind()]
}

root

データ型: string
CLI: --root
デフォルト値: "." (現在の作業ディレクトリ)

このオプションはプロジェクトルート以外のディレクトリでastroのCLIコマンドを実行するときにのみ指定する必要があります。Astroは設定ファイルを見つける前にプロジェクトルートを知る必要があるため、通常このオプションは Astroの設定ファイルではなくCLI経由で指定されます。

--root: './my-project'のように相対パスを渡した場合、Astroは現在の作業ディレクトリを起点として相対パスを解決します。

例

{
  root: './my-project-directory'
}

$ astro build --root ./my-project-directory

srcDir

データ型: string
デフォルト値: "./src"

Astroがサイトを読み込むディレクトリを設定します。

ファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかを指定します。

{
  srcDir: './www'
}

publicDir

データ型: string
デフォルト値: "./public"

静的アセットを置くディレクトリを設定します。このディレクトリのファイルは開発環境では/で配信され、ビルド時にはビルド用のディレクトリにコピーされます。これらのファイルは変換、バンドルされることはなく、常にそのままの状態で配信、コピーされます。

ファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかを指定します。

{
  publicDir: './my-custom-publicDir-directory'
}

outDir

データ型: string
デフォルト値: "./dist"

astro buildコマンドがビルドの最終成果物を出力するディレクトリを設定します。

ファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかを指定します。

{
  outDir: './my-custom-build-directory'
}

以下も参照:

build.server

cacheDir

データ型: string
デフォルト値: "./node_modules/.astro"

ビルド成果物をキャッシュするディレクトリを設定します。このディレクトリのファイルは、ビルド時間を短縮するために以降のビルドで使用されます。

ファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかを指定します。

{
  cacheDir: './my-custom-cache-directory'
}

compressHTML

データ型: boolean
デフォルト値: true

HTML出力をミニファイし、HTMLファイルのサイズを小さくするためのオプションです。デフォルトでは、Astroは.astroコンポーネントのHTMLから改行を含む空白を削除します。これは開発モードと最終ビルドの両方で発生します。HTMLの圧縮を無効にするには、compressHTMLフラグをfalseに設定します。

{
  compressHTML: false
}

scopedStyleStrategy

データ型: 'where' | 'class' | 'attribute'
デフォルト値: 'attribute'

追加： astro@2.4

Astroコンポーネント内のスタイルをスコープするための戦略を指定します。次のオプションから選択してください。

'where' - :whereセレクターを使用し、詳細度（specificity）は増加しません。
'class' - クラスベースのセレクターを使用し、詳細度は1だけ増加します。
'attribute' - data-属性を使用し、詳細度は増加しません。

'class'を使用すると、Astroコンポーネント内の要素セレクターが（たとえばグローバルスタイルシートの）グローバルスタイルのデフォルトを上書きすることを保証できます。'where'を使用すると、詳細度をより細かく制御できますが、より高い詳細度のセレクター、レイヤー、その他のツールを使用して、適用されるセレクターを制御する必要があります。'attribute'を使用すると、要素のclass属性を操作し、自分のスタイルロジックとAstroの適用するスタイルとの間の競合を回避する必要がある場合に便利です。

vite

Type: ViteUserConfig

Viteに追加の設定項目を渡します。Astroがサポートしていない高度な設定が必要になった場合に有用です。

viteに設定するオブジェクトの完全なドキュメントはvitejs.devを確認してください。

例

{
  vite: {
    ssr: {
      // 例: 必要な場合、壊れたパッケージがSSRの処理を行うのをスキップさせます
      external: ['broken-npm-package'],
    }
  }
}

{
  vite: {
    // 例: Astroプロジェクトにカスタムのviteプラグインを直接追加する
    plugins: [myPlugin()],
  }
}

ビルドのオプション

build.format

データ型: ('file' | 'directory' | 'preserve')
デフォルト値: 'directory'

各ページの出力ファイルの形式を制御します。この値はアダプターによって設定されることがあります。

'file': Astroは”/foo.html”のように、各ページに対応するHTMLファイルを生成します。
'directory': Astroは"/foo/index.html"のように、ディレクトリを生成しページに対応するindex.html`ファイルをネストします。
'preserve': Astroは、ソースフォルダに表示される通りにHTMLファイルを生成します。（例: src/pages/about.astroが/about.htmlを作成し、src/pages/about/index.astroがファイル/about/index.htmlを作成します。)

{
  build: {
    // 例: ビルド時に`page/index.html`ではなく`page.html`を生成します。
    format: 'file'
  }
}

Astro.urlへの影響

build.formatの値によって、ビルド時にAstro.urlに設定される値が変わります。

directoryの場合 - Astro.url.pathnameは、フォルダの挙動を模倣するために、/foo/のように末尾にスラッシュを含みます。
fileの場合 - Astro.url.pathnameは、/foo.htmlのように.htmlを含みます。

これにより、new URL('./relative', Astro.url)を使用して相対URLを作成すると、開発時とビルド時で一貫した動作となります。

開発時の末尾のスラッシュの挙動を一貫させるために、ビルドフォーマットに応じてtrailingSlashオプションを'always'または'never'に制限できます。

directoryの場合 - trailingSlash: 'always'を設定する
fileの場合 - trailingSlash: 'never'を設定する

build.client

データ型: string
デフォルト値: './dist/client'

output: 'server'またはoutput: 'hybrid'の場合にのみ、クライアントサイドのCSSとJavaScriptの出力ディレクトリを制御します。outDirはコードがビルドされる場所を制御します。

outDirに対する相対パスを指定します。

{
  output: 'server', // または'hybrid'
  build: {
    client: './client'
  }
}

build.server

データ型: string
デフォルト値: './dist/server'

SSRのビルド時にサーバーJavaScriptの出力ディレクトリを制御します。

outDirに対する相対パスを指定します。

{
  build: {
    server: './server'
  }
}

build.assets

データ型: string
デフォルト値: '_astro'

追加： astro@2.0.0

バンドルされたJSやCSSなどのAstroが生成したアセットが、ビルド出力先のどのディレクトリに配置されるかを指定します。

{
  build: {
    assets: '_custom'
  }
}

以下も参照:

outDir

build.assetsPrefix

データ型: string
デフォルト値: undefined

追加： astro@2.2.0

Astroが生成したアセットへのリンクのプレフィックスを指定します。アセットが現在のサイトとは異なるドメインから提供されている場合に使用できます。

たとえばこの値をhttps://cdn.example.comに設定すると、アセットは（baseオプションに関係なく）https://cdn.example.com/_astro/...から取得されます。アセットを配信するには、./dist/_astro/のファイルをhttps://cdn.example.com/_astro/にアップロードする必要があります。この手順はサードパーティのドメインがどのようにホストされているかによって異なります。_astroパスの名前を変更するには、build.assetsに新しいディレクトリを指定します。

{
  build: {
    assetsPrefix: 'https://cdn.example.com'
  }
}

build.serverEntry

データ型: string
デフォルト値: 'entry.mjs'

SSRのビルド時のサーバーエントリーポイントのファイル名を指定します。このエントリーポイントは、デプロイ先のホストに通常依存し、アダプターが自動的に設定します。

ランタイムがファイルをJavaScriptモジュールとして認識できるように、このファイルの拡張子は.mjsとすることをおすすめします。

{
  build: {
    serverEntry: 'main.mjs'
  }
}

build.redirects

データ型: boolean
デフォルト値: true

追加： astro@2.6.0

リダイレクトがビルド時にHTMLに出力されるかどうかを指定します。このオプションはoutput: 'static'モードでのみ適用されます。SSRでは、リダイレクトは他のレスポンスと同じように扱われます。

このオプションは、リダイレクト用の特別な設定ファイルをもち、HTMLベースのリダイレクトを必要としない・望まないアダプターによって使用されることを想定しています。

{
  build: {
    redirects: false
  }
}

build.inlineStylesheets

データ型: 'always' | 'auto' | 'never'
デフォルト値: auto

追加： astro@2.6.0

プロジェクトのスタイルがcssファイルとしてブラウザに送信されるか、<style>タグとしてインラインで送信されるかを制御します。次のオプションから選択します。

'always' - プロジェクトのスタイルは<style>タグにインライン化されます。
'auto' - ViteConfig.build.assetsInlineLimit（デフォルト: 4kb）より小さいスタイルシートのみがインライン化されます。それ以外の場合、プロジェクトのスタイルは外部のスタイルシートとして送信されます。
'never' - プロジェクトのスタイルは外部のスタイルシートとして送信されます。

{
  build: {
    inlineStylesheets: `never`,
  },
}

サーバーのオプション

astro devとastro previewの両方で使用される、Astroの開発サーバーをカスタマイズします。

{
  server: { port: 1234, host: true }
}

実行するコマンド（“dev”、“preview”）に応じて設定を変えるために、この設定項目に関数を渡すこともできます。

{
  // 例: コマンドに応じてカスタマイズするためには関数の構文を使用します
  server: (command) => ({ port: command === 'dev' ? 4321 : 4000 })
}

server.host

データ型: string | boolean
デフォルト値: false

追加： astro@0.24.0

localhost以外のIPなど、サーバーがリッスンするネットワークIPアドレスを設定します。

false - ネットワークIPアドレスを公開しません。
true - LANやパブリックなアドレスを含むすべてのアドレスでリッスンします。
[カスタムアドレス] - 192.168.0.1などの[カスタムアドレス]のネットワークIPアドレスを公開します。

server.port

データ型: number
デフォルト値: 4321

サーバーがリッスンするポートを設定します。

設定したポートが使用されていた場合、Astroは自動的に利用可能な次のポート番号を使用しようと試みます。

{
  server: { port: 8080 }
}

server.open

データ型: string | boolean
デフォルト値: false

追加： astro@4.1.0

開発サーバーが起動時にブラウザウィンドウを開くかどうかを制御します。

開くURLを指定するには、URL文字列全体（例: ”http://example.com” ）、またはパス名（例: “/about”）を渡します。

{
  server: { open: "/about" }
}

server.headers

データ型: OutgoingHttpHeaders
デフォルト値: {}

追加： astro@1.7.0

astro devとastro previewで送信されるカスタムHTTPレスポンスヘッダーを設定します。

開発ツールバーのオプション

devToolbar.enabled

データ型: boolean
デフォルト値: true

Astroの開発ツールバーを有効化するかどうか。このツールバーを使うと、ページのアイランドを調査したり、パフォーマンスやアクセシビリティの便利な監査をしたりできるようになります。

このオプションのスコープはプロジェクト全体です。自分の環境でのみツールバーを無効化するには、npm run astro preferences disable devToolbarを実行します。すべてのAstroプロジェクトでツールバーを無効化するには、npm run astro preferences disable devToolbar --globalを実行してください。

prefetchのオプション

データ型: boolean | object

高速なページ遷移を提供するために、サイト上のリンクに対してプリフェッチを有効にします。（<ViewTransitions />を使用しているページではデフォルトで有効化されます。この動作からオプトアウトするにはprefetch: falseを設定してください。）

この設定は自動的にプロジェクト内のすべてのページにプリフェッチスクリプトを追加し、data-astro-prefetch属性を利用できるようにします。ページ上の任意の<a />リンクにこの属性を追加すると、そのページのプリフェッチが有効になります。

<a href="/about" data-astro-prefetch>About</a>

デフォルトのプリフェッチ動作をさらにカスタマイズするには、prefetch.defaultStrategyとprefetch.prefetchAllオプションを使用します。

より詳しい情報については、プリフェッチのガイドを参照してください。

prefetch.prefetchAll

データ型: boolean

data-astro-prefetch属性のないリンクも含めて、すべてのリンクに対してプリフェッチを有効にします。<ViewTransitions />ルーターを使用している場合は、この値はデフォルトでtrueになります。そうでない場合は、デフォルト値はfalseです。

prefetch: {
  prefetchAll: true
}

trueに設定した場合には、任意の個別のリンク上にdata-astro-prefetch="false"を設定することで、プリフェッチを個別に無効化できます。

<a href="/about" data-astro-prefetch="false">About</a>

prefetch.defaultStrategy

データ型: 'tap' | 'hover' | 'viewport' | 'load'
デフォルト値: 'hover'

data-astro-prefetch属性が値無しでリンク上に設定されたときの、デフォルトのプリフェッチ戦略です。

'tap': リンクをクリックする直前にプリフェッチします。
'hover': リンク上にホバーまたはフォーカスしたときにプリフェッチします。（デフォルト）
'viewport': リンクがビューポートに入ったときにプリフェッチします。
'load': ページのロード後に、ページ上のすべてのリンクをプリフェッチします。

属性の値を設定することで、個別のリンクに対して、このデフォルト値を上書きして異なる戦略を選択できます。

<a href="/about" data-astro-prefetch="viewport">About</a>

画像のオプション

image.endpoint

データ型: string
デフォルト値: undefined

追加： astro@3.1.0

画像最適化に使用するエンドポイントを設定します。undefinedを設定すると、デフォルトのエンドポイントが使用されます。

エンドポイントは常に/_imageに挿入されます。

{
  image: {
    // 例: カスタム画像エンドポイントを使用する
    endpoint: './src/image-endpoint.ts',
  },
}

image.service

データ型: Object
デフォルト値: {entrypoint: 'astro/assets/services/sharp', config?: {}}

追加： astro@2.1.0

どの画像サービスをAstroのアセットサポートで使用するかを設定します。

画像サービスが使用するエントリーポイントを含むオブジェクトを指定する必要があります。オプションで、サービスに渡す設定用オブジェクトを含めることもできます。

サービスのエントリーポイントは、組み込みのサービスかサードパーティのパッケージのどちらかを指定できます。

{
  image: {
    // 例: Sharpをベースとした画像サービスをカスタム設定で有効にする
    service: {
      entrypoint: 'astro/assets/services/sharp',
      config: {
        limitInputPixels: false,
      },
    },
  }
}

image.service.config.limitInputPixels

データ型: number | boolean
デフォルト値: true

追加： astro@4.1.0

Sharp画像サービスが処理する画像サイズを制限するかどうかを指定します。

falseに設定すると、Sharp画像サービスのデフォルトの画像サイズ制限をバイパスして、大きな画像を処理します。

image.domains

データ型: Array.<string>
デフォルト値: {domains: []}

追加： astro@2.10.10

リモート画像の最適化を許可する画像ソースドメインのリストを定義します。Astroは、その他のリモート画像を最適化しません。

このオプションにはドメイン名の文字列の配列を指定します。ワイルドカードは許可されません。許可されたソースURLパターンのリストを定義するにはimage.remotePatternsを使用してください。

{
  image: {
    // 例: リモート画像の最適化を単一のドメインに対して許可する
    domains: ['astro.build'],
  },
}

image.remotePatterns

データ型: Array.<RemotePattern>
デフォルト値: {remotePatterns: []}

追加： astro@2.10.10

リモート画像の最適化を許可する画像ソースURLパターンのリストを定義します。

remotePatternsは4つのプロパティで設定します。

プロトコル（protocol）
ホスト名（hostname）
ポート（port）
パス名（pathname）

{
  image: {
    // 例: s3バケットのすべての画像に対して処理を許可する
    remotePatterns: [{
      protocol: 'https',
      hostname: '**.amazonaws.com',
    }],
  },
}

以下のように、許可されたhostnameとpathnameの値を定義するためにワイルドカードを使用できます。それ以外の場合、指定された値のみがそのまま設定されます。 hostname:

すべてのサブドメインを許可するには、’**.’で始めます（‘endsWith’を使う）。
1つの階層のサブドメインのみを許可するには、’*.’で始めます。

pathname:

すべてのサブルートを許可するには、’/**‘で終わります（‘startsWith’を使う）。
1つの階層のサブルートのみを許可するには、’/*‘で終わります。

マークダウンのオプション

markdown.shikiConfig

データ型: Partial<ShikiConfig>

Shiki の設定項目です。使い方はマークダウンの設定のドキュメントを確認してください。

markdown.syntaxHighlight

データ型: 'shiki' | 'prism' | false
デフォルト値: shiki

使用するシンタックスハイライトを設定します。

shiki - Shikiのハイライトを使用します。
prism - Prismのハイライトを使用します。
false - シンタックスハイライトを使用しません。

{
  markdown: {
    // 例: マークダウンでprismのシンタックスハイライトを使用するよう変更する
    syntaxHighlight: 'prism',
  }
}

markdown.remarkPlugins

データ型: RemarkPlugins

マークダウンのビルドの仕方をカスタマイズするためにRemarkのプラグインを渡します。プラグインの関数をインポートして適用する（推奨）か、プラグインの名前を文字列として渡します。

import remarkToc from 'remark-toc';
{
  markdown: {
    remarkPlugins: [remarkToc]
  }
}

markdown.rehypePlugins

データ型: RehypePlugins

マークダウンのビルドの仕方をカスタマイズするためにRehypeのプラグインを渡します。プラグインの関数をインポートして適用する（推奨）か、プラグインの名前を文字列として渡します。

import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';
{
  markdown: {
    rehypePlugins: [rehypeAccessibleEmojis]
  }
}

markdown.gfm

データ型: boolean
デフォルト値: true

追加： astro@2.0.0

AstroはGitHub風のマークダウンをデフォルトで使用します。これを無効にするには、gfmフラグをfalseに設定します。

{
  markdown: {
    gfm: false,
  }
}

markdown.smartypants

データ型: boolean
デフォルト値: true

追加： astro@2.0.0

AstroはSmartyPantsのフォーマッターをデフォルトで使用します。これを無効にするには、smartypantsフラグをfalseに設定します。

{
  markdown: {
    smartypants: false,
  }
}

markdown.remarkRehype

データ型: RemarkRehype

remark-rehypeにオプションを渡します。

{
  markdown: {
    // 例: 脚注のテキストを別の言語に翻訳します。ここではデフォルトの英語の値を示します。
    remarkRehype: { footnoteLabel: "Footnotes", footnoteBackLabel: "Back to reference 1"},
  },
};

i18n

データ型: object

追加： astro@3.5.0

i18nルーティングを設定し、カスタマイズオプションを指定できるようにします。

より詳しい情報については、ガイドAstroにおける国際化を参照してください。

i18n.defaultLocale

データ型: string

追加： astro@3.5.0

ウェブサイト/アプリケーションのデフォルトのロケールです。これは必須のフィールドです。

特定の言語のフォーマットや構文が強制されることはありませんが、互換性を最大化するために、必要に応じて小文字とハイフン（例: “es”、“pt-br”）を使用することを推奨します。

i18n.locales

データ型: Locales

追加： astro@3.5.0

defaultLocaleも含む、ウェブサイトがサポートするすべてのロケールのリストです。これは必須のフィールドです。

言語は、個別のコードとしてリストすることも（例: ['en', 'es', 'pt-br'])、codesの共有のpathへのマッピングとしてリストすることもできます（例: { path: "english", codes: ["en", "en-US"]}）。これらのcodesはデプロイされるサイトのURL構造を決定するために使われます。

特定の言語のフォーマットや構文が強制されることはありませんが、フォルダ構造はリスト内のロケールに完全に一致しなければいけません。複数のcodesがカスタムURLのパスプリフィックスを指す場合には、設定されたpathと同じ名前のフォルダにコンテンツを保存してください。

i18n.fallback

データ型: Record.<string, string>

追加： astro@3.5.0

存在しないページへナビゲーションしたときのフォールバック戦略です（例: 翻訳ページがまだ作成されていない場合）。

このオブジェクトを使用して、サポートしている各言語に対するフォールバックlocaleルートを宣言してください。フォールバックが指定されなかった場合、利用できないページは404を返します。

例

以下の例では、コンテンツのフォールバック戦略を、/pt-br/で利用できないページから対応するesバージョンにリダイレクトするように、また、/fr/で利用できないページから対応するenバージョンにリダイレクトするように設定しています。/es/で利用できないページは、404を返します。

export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "pt-br", "es"],
    fallback: {
      pt: "es",
      fr: "en"
    }
  }
})

i18n.routing

データ型: Routing

追加： astro@3.7.0

サイトのURLを決定するためのルーティング戦略を制御します。デフォルト言語のフォルダ/URLのパス設定を元に設定してください。

i18n.routing.prefixDefaultLocale

データ型: boolean
デフォルト値: false

追加： astro@3.7.0

falseの場合、デフォルト以外の言語でのみ言語プリフィックスが表示されます。defaultLocaleでは、言語プリフィックスとローカライズされたフォルダに存在しないコンテンツファイルは表示されません。URLの形式は、デフォルト以外のすべての言語ではexample.com/[lang]/content/になりますが、デフォルトのロケールではexample.com/content/になります。

trueの場合、すべてのURLに言語プリフィックスが表示されます。URLの形式は、デフォルト言語も含めて、すべてのルーティングでexample.com/[lang]/content/になります。ローカライズされたフォルダが、デフォルト言語も含めてすべての言語で使用されます。

i18n.routing.redirectToDefaultLocale

データ型: boolean
デフォルト値: true

追加： astro@4.2.0

prefixDefaultLocale: trueが設定されている場合に、src/pages/index.astroから生成されたホームURL（/）を/[defaultLocale]にリダイレクトするかどうかを設定します。

redirectToDefaultLocale: falseを設定すると、サイトのルート上でこの自動リダイレクトを無効化します。

export default defineConfig({
i18n:{
  defaultLocale: "en",
    locales: ["en", "fr"],
    routing: {
    prefixDefaultLocale: true,
      redirectToDefaultLocale: false
  }
}
})

レガシーなフラグ

Astroのバージョン間の移行を支援するために、legacyフラグを導入することがあります。これらのフラグを使用すると、最新バージョンのAstroでも非推奨または古い動作を有効化できるため、Astroの新しいリリースにアップグレードして引き続き利用できます。

実験的なフラグ

Astroは、ユーザーが新しい機能に早期にアクセスできるように、実験的なフラグを提供しています。これらのフラグは安定しているとは限りません。

experimental.optimizeHoistedScript

データ型: boolean
デフォルト値: false

追加： astro@2.10.4

使用されていないコンポーネントのスクリプトが予期せずページに含まれるのを防ぎます。この最適化はベストエフォートであり、逆に使用されているスクリプトが含まれなくなる可能性もあります。ページを公開する前にビルドされた内容をしっかり確認してください。巻き上げられた（hoisted）スクリプトの解析の最適化を有効にするには、以下の実験的なフラグを追加します。

{
  experimental: {
    optimizeHoistedScript: true,
  },
}

experimental.contentCollectionCache

データ型: boolean
デフォルト値: false

追加： astro@3.5.0

静的モードでビルドするときに、コンテンツコレクションに対して永続キャッシュを有効にします。

{
  experimental: {
    contentCollectionCache: true,
  },
}

experimental.clientPrerender

データ型: boolean
デフォルト値: false

追加： astro@4.2.0

対応ブラウザで、設定されたページのクライアント上でのプリレンダリングを有効化します。

この機能は、実験的なSpeculation Rules Web APIを使用しており、デフォルトのprefetchの動作を、クライアント上でリンクをプリレンダリンクするようにグローバルで上書きします。この機能を有効にする前に、クライアント上でのプリレンダリングを行うときの潜在的なリスクを確認することをおすすめします。

以下は、astro.config.mjsで、好きなprefetch設定オプションとともにクライアントサイドのプリレンダリングを有効にする例です。

{
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'viewport',
  },
  experimental: {
    clientPrerender: true,
  },
}

サイト上の任意の<a />リンク上でdata-astro-prefetch属性を使うことで、引き続きプリフェッチにオプトインできます。<link>タグをドキュメントの先頭に追加したり、ページをJavaScriptでフェッチする代わりに、対応するspeculation ruleを持つ<script>タグが追加されます。

クライアントサイドのプリレンダリングにはブラウザの対応が必要です。Speculation Rules APIがサポートされていない場合は、prefetchは対応している戦略にフォールバックします。

より詳しいprefetchのオプションや使用方法については、プリフェッチのガイドを参照してください。

experimental.globalRoutePriority

データ型: boolean
デフォルト値: false

追加： astro@4.2.0

すべてのルーティングに対して、同じルーティング優先順位ルールに従い、リダイレクトと挿入されたルーティングをファイルベースのプロジェクトルーティングと同等に優先順位付けします。

これにより、特定の種類のルーティングを自動的に優先せずに、プロジェクト内のルーティングをより制御できるようになり、すべてのルーティングに対してルーティングの優先順位付けを標準化できます。

以下の例は、ファイルベースのルーティング、挿入されたルーティング、リダイレクトが次のように組み合わされた場合に、どのルートが特定のページのURLをビルドするかを示しています。

ファイルベースのルーティング: /blog/post/[pid]
ファイルベースのルーティング: /[page]
挿入されたルーティング: /blog/[...slug]
リダイレクト: /blog/tags/[tag] -> /[tag]
リダイレクト: /posts -> /blog

experimental.globalRoutingPriorityを有効化すると、（Astro 4.0のデフォルトのルーティング優先順位の代わりに）次のようになります。

（挿入されたルーティング/blog/[...slug]の代わりに）/tags/[tag]へのリダイレクトにより、/blog/tags/astroがビルドされる
（挿入されたルーティング/blog/[...slug]の代わりに）ファイルベースのルーティング/blog/post/[pid]により、/blog/post/0がビルドされる
（ファイルベースのルーティング/[page]の代わりに）/blogへのリダイレクトにより、/postsがビルドされる

ルーティングの優先度が等しい2つのルーティングが同じURLのビルドを試みる、ルーティング衝突が発生した場合は、Astroは競合するルーティングを特定できる警告をログ出力します。

experimental.i18nDomains

データ型: boolean
デフォルト値: false

追加： astro@4.3.0

実験的なdomainsルーティング戦略のためのドメインサポートを有効化します。これにより、1つ以上の対応言語のURLパターンを、カスタムドメイン（またはサブドメイン）を使用するように設定できます。

ロケールがドメインにマッピングされるとき、/[locale]/パスプレフィックスは使用されません。ただし、src/pages/内のローカライズされたフォルダは、設定されたdefaultLocaleを含めて依然として必要になります。

設定されなかった他のすべてのロケールは、prefixDefaultLocale 戦略にしたがって、デフォルトでローカライズされたパスベースのURLになります（例: https://example.com/[locale]/blog）。

export default defineConfig({
  site: "https://example.com",
  output: "server", // 必須、プリレンダリングされたページはなし
  adapter: node({
    mode: 'standalone',
  }),
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "pt-br", "es"],
    prefixDefaultLocale: false,
    domains: {
      fr: "https://fr.example.com",
      es: "https://example.es",
    },
  },
  experimental: {
    i18nDomains: true,
  },
});

作成されたページルートと、astro:i18nのヘルパー関数getAbsoluteLocaleUrl()およびgetAbsoluteLocaleUrlList()から返されたURLは、ともにi18n.domainsに設定されたオプションを使用します。

この実験的機能の制限を含む詳しい情報については、国際化ガイドを参照してください。

ページを編集 Translate

前へ
環境変数次へ
ランタイムAPI

Contribute

Community