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 sitemap from '@astrojs/sitemap';
import vercel from '@astrojs/vercel';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    react(),
    sitemap(),
  ],
  adapter: vercel(),
  vite: {
    plugins: [tailwindcss()],
  },
  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 — enables .tsx islands
npx astro add preact         # @astrojs/preact — lighter React-compatible alternative
npx astro add svelte         # @astrojs/svelte
npx astro add vue            # @astrojs/vue

# Styling
npx astro add tailwind       # installs the @tailwindcss/vite plugin (Tailwind 4)

# Site utilities
npx astro add sitemap        # @astrojs/sitemap — generates sitemap.xml at build
npx astro add mdx            # @astrojs/mdx    — MDX support for content pages

# SSR adapters (pick one)
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 sitemap from '@astrojs/sitemap';

export default defineConfig({
  integrations: [
    react({
      include: ['**/interactive/**'],  // only hydrate components in this dir
    }),
    sitemap({
      filter: (page) => !page.includes('/admin/'),  // exclude private pages
    }),
  ],
});

Tailwind 4 ไม่ใช่ Astro integration — npx astro add tailwind จะติดตั้ง Vite plugin @tailwindcss/vite แทน ตั้งค่าไว้ใต้ vite: { plugins: [...] } ไม่ใช่ integrations: [...] ส่วน package เก่า @astrojs/tailwind (ที่มี option applyBaseStyles) เลิกใช้แล้ว เกี่ยวข้องกับโปรเจกต์ Tailwind 3 เท่านั้น

Integrations

astro.config.mjs vs next.config.js

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

รูปแบบ integration

ส่ง options ให้ integrations

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

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