Astro インテグレーション

作成日:
Astro frontend SSG

Astroインテグレーションは、プロジェクトに機能を追加するための拡張機能です。UIフレームワーク、スタイリング、最適化、デプロイなど、様々なインテグレーションが公式・コミュニティから提供されています。

インテグレーションの追加

astro add コマンド（推奨）

# 対話的にインテグレーションを追加
npx astro add tailwind

# 複数同時に追加
npx astro add react tailwind

このコマンドは自動的に：

  1. パッケージをインストール
  2. astro.config.mjsに設定を追加

手動インストール

npm install @astrojs/tailwind tailwindcss
// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()],
});

公式インテグレーション

UIフレームワーク

パッケージ説明
@astrojs/reactReactコンポーネントの使用
@astrojs/vueVueコンポーネントの使用
@astrojs/svelteSvelteコンポーネントの使用
@astrojs/preactPreactコンポーネントの使用
@astrojs/solid-jsSolidJSコンポーネントの使用
@astrojs/litLitコンポーネントの使用

スタイリング

パッケージ説明
@astrojs/tailwindTailwind CSSの統合

コンテンツ

パッケージ説明
@astrojs/mdxMDXサポート
@astrojs/markdocMarkdocサポート

最適化・SEO

パッケージ説明
@astrojs/sitemapサイトマップ自動生成
@astrojs/partytownサードパーティスクリプトの最適化

アダプター（SSR用）

パッケージ説明
@astrojs/nodeNode.jsサーバー
@astrojs/vercelVercel
@astrojs/netlifyNetlify
@astrojs/cloudflareCloudflare Workers/Pages

Tailwind CSS

セットアップ

npx astro add tailwind

または手動で：

npm install @astrojs/tailwind tailwindcss
// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()],
});

tailwind.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

使用例

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Tailwindでスタイリング
</div>

詳細はTailwind CSSを参照してください。

React

セットアップ

npx astro add react

または手動で：

npm install @astrojs/react react react-dom
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

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

使用例

// src/components/Counter.jsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
---
import Counter from '../components/Counter.jsx';
---
<Counter client:load />

Vue

セットアップ

npx astro add vue

使用例

<!-- src/components/Counter.vue -->
<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
---
import Counter from '../components/Counter.vue';
---
<Counter client:visible />

サイトマップ

セットアップ

npx astro add sitemap
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',  // 必須
  integrations: [sitemap()],
});

ビルド時にsitemap-index.xmlとsitemap-0.xmlが生成されます。

オプション

sitemap({
  // 除外するページ
  filter: (page) => !page.includes('/admin/'),
  
  // 変更頻度
  changefreq: 'weekly',
  
  // 優先度
  priority: 0.7,
})

複数のインテグレーション

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import sitemap from '@astrojs/sitemap';
import mdx from '@astrojs/mdx';

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    react(),
    tailwind(),
    sitemap(),
    mdx(),
  ],
});

インテグレーションの設定

各インテグレーションはオプションを受け取ることができます：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [
    react({
      include: ['**/react/*'],
    }),
    tailwind({
      // グローバルベーススタイルを無効化
      applyBaseStyles: false,
    }),
  ],
});

インテグレーションの探し方

参考