Integrations

ใน Next.js คุณขยาย framework ผ่าน next.config.js — webpack plugins, Babel transforms, rewrites, redirects และ third-party packages ที่ hook เข้า build pipeline Astro มีแนวคิดชั้นหนึ่งที่เรียกว่า integrations ที่ครอบคลุม surface area เดียวกัน แต่ชัดเจนกว่า: แต่ละ integration คือ npm package ที่ลงทะเบียนใน astro.config.mjs และสามารถแตะ build pipeline, dev server และ output ได้

`astro.config.mjs` vs `next.config.js`

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['images.unsplash.com'],
  },
  async redirects() {
    return [
      { source: '/old', destination: '/new', permanent: true },
    ];
  },
};

module.exports = withBundleAnalyzer(nextConfig);

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    react(),
    tailwind(),
    sitemap(),
  ],
  adapter: vercel(),
  redirects: {
    '/old': '/new',
  },
});

helper defineConfig ให้ TypeScript autocomplete เต็มรูปแบบใน editor integration ทั้งหมดอยู่ใน array integrations: [] — ไม่มี pattern การ wrap/compose แบบ withBundleAnalyzer(nextConfig)

เพิ่ม integrations ด้วย `astro add`

# UI framework integrations
npx astro add react          # @astrojs/react — เปิดใช้งาน .tsx islands
npx astro add preact         # @astrojs/preact — ทางเลือก React-compatible ที่เบากว่า
npx astro add svelte         # @astrojs/svelte
npx astro add vue            # @astrojs/vue

# Styling
npx astro add tailwind       # @astrojs/tailwind — inject Tailwind เข้าทุกหน้าอัตโนมัติ

# Site utilities
npx astro add sitemap        # @astrojs/sitemap — สร้าง sitemap.xml ตอน build
npx astro add mdx            # @astrojs/mdx    — รองรับ MDX สำหรับ content pages

# SSR adapters (เลือกหนึ่งอัน)
npx astro add vercel         # @astrojs/vercel
npx astro add netlify        # @astrojs/netlify
npx astro add node           # @astrojs/node (self-hosted Node.js)
npx astro add cloudflare     # @astrojs/cloudflare

แต่ละคำสั่งติดตั้ง package และ แก้ไข astro.config.mjs ให้คุณ คุณสามารถแก้ไข config ด้วยตนเองภายหลังได้เสมอ

รูปแบบ integration

Astro integration คือเพียง function ที่ return config object นี่คือ custom integration แบบ minimal:

import { defineConfig } from 'astro/config';

function myPlugin() {
  return {
    name: 'my-plugin',
    hooks: {
      'astro:build:done': ({ dir }) => {
        console.log('Build finished. Output:', dir.pathname);
      },
    },
  };
}

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

คุณจะแทบไม่ต้องเขียน custom integrations เอง — package @astrojs/* อย่างเป็นทางการครอบคลุมกรณีทั่วไปแล้ว — แต่การเข้าใจรูปแบบจะช่วยเมื่อคุณอ่าน source code ของ integration

ส่ง options ให้ integrations

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

export default defineConfig({
  integrations: [
    react({
      include: ['**/interactive/**'],  // hydrate เฉพาะ components ใน dir นี้
    }),
    tailwind({
      applyBaseStyles: false,          // ข้าม Tailwind's base reset
    }),
  ],
});

Integrations

astro.config.mjs vs next.config.js

เพิ่ม integrations ด้วย astro add

รูปแบบ integration

ส่ง options ให้ integrations

`astro.config.mjs` vs `next.config.js`

เพิ่ม integrations ด้วย `astro add`