มาทำความรู้จัก Astro น้องใหม่ไฟแรง

Astro เป็น Static Site Generator ที่กำลังมาแรงในปัจจุบัน ด้วยจุดเด่นที่ช่วยลดขนาดไฟล์ JavaScript บนเว็บไซต์และเพิ่มประสิทธิภาพให้การโหลดหน้าเว็บเป็นไปได้อย่างรวดเร็วมากขึ้น เหมาะสำหรับนักพัฒนาที่ต้องการสร้างเว็บไซต์ที่เน้นความเร็วและประสบการณ์ผู้ใช้ที่ดี นอกจากนี้ Astro ยังรองรับการใช้งานร่วมกับ JavaScript Framework ยอดนิยม เช่น React, Vue, และ Svelte ได้อย่างลงตัว

Installation Astro

การติดตั้ง Astro ทำได้ง่าย ๆ ด้วยคำสั่ง CLI ด้านล่างนี้:

# ติดตั้ง Astro ผ่าน npm
npm create astro@latest

# หรือถ้าใช้ Yarn
yarn create astro

# จากนั้นตอบคำถามที่ CLI เพื่อสร้างโปรเจกต์ใหม่

เมื่อสร้างโปรเจกต์เสร็จแล้ว ให้ติดตั้ง dependencies ด้วยคำสั่ง:

npm install
# หรือ
yarn install

Integrate Astro with React Framework

Astro รองรับการใช้งานร่วมกับ React ได้โดยง่าย เพียงเพิ่ม integration ลงในโปรเจกต์ของคุณ:

npm install @astrojs/react

จากนั้นเพิ่ม integration ลงในไฟล์ astro.config.mjs:

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

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

คุณสามารถใช้งาน React Component ได้ทันทีในไฟล์ .astro!

Integrate with Tailwind CSS

การตั้งค่า Tailwind CSS บน Astro สามารถทำได้ง่าย ๆ ดังนี้:

ติดตั้ง Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

แก้ไขไฟล์ tailwind.config.js ให้เหมาะสมกับโปรเจกต์ของคุณ:

module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

เพิ่ม Tailwind directives ในไฟล์ CSS หลัก:

@tailwind base;
@tailwind components;
@tailwind utilities;

รวม Tailwind CSS เข้ากับ Astro ผ่านไฟล์ astro.config.mjs:

import tailwind from '@astrojs/tailwind';

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

Project Structure

โครงสร้างโปรเจกต์ Astro พื้นฐาน:

├── public
├── src
│   ├── components
│   ├── layouts
│   ├── pages
│   └── styles
└── astro.config.mjs

public: ไฟล์ที่เสิร์ฟตรง เช่น รูปภาพ, ไอคอน
src: โฟลเดอร์หลักสำหรับโค้ดของโปรเจกต์
components: เก็บไฟล์ Component ต่าง ๆ
layouts: เก็บ Layout สำหรับหน้าต่าง ๆ
pages: เก็บไฟล์ Page แต่ละหน้า
styles: เก็บไฟล์ CSS

Layout

Astro รองรับการสร้าง Layout เพื่อใช้ซ้ำได้อย่างง่ายดาย เช่น:

ไฟล์ src/layouts/BaseLayout.astro:

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

ใช้งาน Layout ใน Page:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="หน้าแรก">
  <h1>ยินดีต้อนรับสู่ Astro!</h1>
</BaseLayout>

Page

สร้างหน้าเว็บด้วยไฟล์ .astro ภายในโฟลเดอร์ pages เช่น:

ไฟล์ src/pages/index.astro:

---
---

<h1>สวัสดี Astro!</h1>

Routing

Astro ใช้ไฟล์และโฟลเดอร์ใน src/pages เพื่อจัดการ Routing อัตโนมัติ เช่น:

src/pages/index.astro -> /
src/pages/about.astro -> /about

Component

สร้าง Component เพื่อใช้ซ้ำได้ เช่น:

ไฟล์ src/components/Header.astro:

<header>
  <h1>{title}</h1>
</header>

ใช้งาน Component:

---
import Header from '../components/Header.astro';
---

<Header title="หน้าแรก" />

Styling and CSS

คุณสามารถใช้ CSS ได้หลากหลายวิธีใน Astro เช่น:

Inline CSS:

<h1 style="color: red;">Hello World</h1>

Global CSS:

เพิ่มไฟล์ CSS ใน src/styles และ import ลงใน Layout หรือ Page

Scoped CSS:

<style>
h1 {
  color: blue;
}
</style>

<h1>ข้อความสีฟ้า</h1>

Image Optimize

Astro มีฟีเจอร์สำหรับปรับแต่งรูปภาพให้เหมาะสมเพื่อเพิ่มประสิทธิภาพ:

ติดตั้ง Image Integration:

npm install @astrojs/image

เพิ่มการตั้งค่าใน astro.config.mjs:

import image from '@astrojs/image';

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

ใช้ Component Image:

---
import { Image } from '@astrojs/image/components';
---

<Image src="/example.jpg" alt="Example" width={300} height={200} />

Server Rendering

Astro รองรับ Server-side Rendering (SSR) โดยเปิดใช้งานผ่านการตั้งค่า:

export default defineConfig({
  output: 'server',
});

จากนั้นสร้างไฟล์ API Endpoint:

ไฟล์ src/pages/api/hello.ts:

export async function get() {
  return {
    body: JSON.stringify({ message: 'Hello, world!' }),
  };
}

ลองดูตัวอย่างโค้ดได้ที่ GitHub

สามารถดาวน์โหลดตัวอย่างโค้ดเพิ่มเติม และลองปรับแต่งด้วยตนเอง!

Migrate จาก NextJs มาใช้งาน Astro Framework