Tooling, Testing & Deployment

หากคุณเคย deploy แอปพลิเคชัน Next.js มาก่อน คุณมี mental model สำหรับโมดูลนี้อยู่แล้ว: CLI ที่ขับเคลื่อน dev/build/preview, การตรวจสอบ TypeScript, ไฟล์ configuration, ระบบนิเวศ integration และ deployment target Astro แมปแบบหนึ่งต่อหนึ่งกับทุกเครื่องมือเหล่านั้น — เพียงแต่คำสั่งและชื่อไฟล์เปลี่ยนไป

ภาพรวม toolchain

Next.js / React	สิ่งเทียบเท่าใน Astro
`next dev`	`astro dev`
`next build`	`astro build`
`next start`	`astro preview`
`next lint`	`astro check` (ตรวจสอบ type ในไฟล์ `.astro`)
`next.config.js`	`astro.config.mjs`
Next.js plugins (webpack)	Astro integrations (`@astrojs/*`)
`npm install @next/bundle-analyzer`	`npx astro add react` / `npx astro add tailwind`
Vercel / Netlify สำหรับ Next.js	Vercel / Netlify adapters สำหรับ Astro
`tsc --noEmit`	`astro check` ครอบคลุม `.astro` + `.ts`
Jest / Vitest	Vitest (config เหมือนกัน; Astro ไม่มี test runner ในตัว)

บทเรียนในโมดูลนี้

บทเรียน	สิ่งที่คุณจะเรียนรู้
Astro CLI	`astro dev` / `build` / `preview` / `add` / `check`; scripts ใน `package.json`
Integrations	`npx astro add`, `astro.config.mjs`, ระบบนิเวศ integration
`astro check`	ตรวจสอบ type ในไฟล์ `.astro`, editor tooling เทียบกับ `tsc`/ESLint
Static vs SSR	`output: 'static'` เทียบกับ `output: 'server'`, adapters, `prerender`
Deploy	`astro build`, static hosts, SSR adapters, GitHub Actions CI

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: { domains: ['cdn.example.com'] },
};
module.exports = nextConfig;

// package.json scripts (typical Next project)
// "dev":   "next dev"
// "build": "next build"
// "start": "next start"
// "lint":  "next lint"
// "type-check": "tsc --noEmit"

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

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

// package.json scripts (typical Astro project)
// "dev":     "astro dev"
// "build":   "astro build"
// "preview": "astro preview"
// "check":   "astro check"