Belajar Astro - Pages, Layouts & Components

#Pendahuluan

Setelah project siap di episode 3, saatnya membangun blok penyusun utama situs: halaman, layout, dan komponen. Ketiganya adalah fondasi UI Astro — hampir semua yang kalian bangun di series ini bermuara pada tiga konsep ini.

Halaman menentukan rute, layout membungkus banyak halaman dengan kerangka yang sama, dan komponen adalah potongan UI yang dipakai ulang. Menggabungkan ketiganya dengan styling yang rapi akan menghasilkan situs yang konsisten dan mudah dipelihara.

Episode 4 ini praktik penuh: kalian akan membuat halaman pertama, layout reusable, komponen dengan props, lalu mencoba styling dengan CSS biasa, scoped style, dan Tailwind.

#Membuat Halaman di src/pages

#Halaman Statis Pertama

Setiap file .astro di src/pages menjadi rute. Buat file src/pages/tentang.astro untuk halaman /tentang:

Halaman statis sederhana

---
const namaSitus = "Astro Learn";
---
 
<html lang="id">
  <head>
    <title>Tentang Kami</title>
  </head>
  <body>
    <h1>Halo, selamat datang di {namaSitus}</h1>
    <p>Halaman ini dirender sebagai HTML murni saat build.</p>
  </body>
</html>

Frontmatter (antara ---) berisi kode JavaScript yang berjalan di build time. Nilai {namaSitus} disisipkan ke template — pola interpolasi ini akan kalian pakai terus-menerus.

#Halaman Dinamis dengan Parameter

Untuk halaman dinamis seperti detail artikel, gunakan bracket di nama file:

Halaman dinamis [slug].astro

---
export function getStaticPaths() {
  return [
    { params: { slug: "satu" } },
    { params: { slug: "dua" } },
  ];
}
 
const { slug } = Astro.params;
---
 
<h1>Artikel: {slug}</h1>

getStaticPaths menghasilkan daftar halaman statis yang akan dibangun — setiap item di array menjadi satu file HTML di dist/.

#Layout Reusable dengan src/layouts

#Membuat Layout Dasar

Layout adalah komponen khusus yang membungkus konten halaman. Buat src/layouts/Base.astro:

Layout Base dengan slot

---
interface Props {
  title: string;
}
const { title } = Astro.props;
---
 
<html lang="id">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <nav>Logo | Beranda | Blog | Kontak</nav>
    <main>
      <slot />
    </main>
    <footer>Hak cipta 2026</footer>
  </body>
</html>

Elemen <slot /> adalah penanda tempat konten halaman akan disisipkan. Props diterima melalui Astro.props dan dideklarasikan dengan interface Props.

#Memakai Layout di Halaman

Gunakan layout dengan mengimport dan membungkus halaman:

Halaman memakai layout

---
import Base from "../layouts/Base.astro";
---
 
<Base title="Beranda">
  <h1>Beranda</h1>
  <p>Konten halaman masuk ke slot layout.</p>
</Base>

Layout menghemat banyak kode duplikat — judul, meta tag, navigasi, dan footer cukup ditulis sekali.

#Komponen Astro dan Komponen Framework

#Komponen Astro dengan Props

Komponen .astro adalah potongan UI tanpa page-level HTML. Contoh src/components/Card.astro:

Komponen Card

---
interface Props {
  judul: string;
  deskripsi: string;
}
const { judul, deskripsi } = Astro.props;
---
 
<article class="card">
  <h2>{judul}</h2>
  <p>{deskripsi}</p>
</article>

Komponen ini bisa dipakai di mana saja dengan <Card judul="Astro" deskripsi="Cepat" />. Aturan di atas script menentukan batas antara logika frontmatter dan template HTML.

#Komponen Framework sebagai Pulau

Komponen React, Vue, Svelte, dan Solid juga bisa dipakai di file .astro. Perbedaannya: komponen tersebut bersifat interaktif dan butuh directive hydration agar JavaScript-nya dikirim. Komponen Astro sendiri tidak butuh directive — dia selalu dirender sebagai HTML statis kecuali dipakai sebagai pulau dengan directive.

#Styling dengan CSS, Scoped Styles, dan Tailwind

#CSS Global dan Scoped Styles

CSS global ditaruh di src/styles lalu diimport di layout. Untuk style yang hanya berlaku di satu komponen, Astro menyediakan scoped styles:

Scoped style di komponen

<style>
  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
  }
</style>

Astro otomatis menambahkan hash unik ke selector di blok <style>, sehingga .card tidak akan bocor ke komponen lain.

#Tailwind CSS

Tailwind bisa diaktifkan dengan satu perintah integrasi:

Menambahkan Tailwind

npx astro add tailwind

npx astro add tailwind memasang package dan mengkonfigurasi Vite. Setelah itu utility class langsung bisa dipakai di seluruh template, termasuk di dalam file .astro dan komponen framework.

Tip

Kombinasi paling umum: layout menampung CSS global dan meta, komponen kecil memakai scoped styles atau utility class Tailwind, dan halaman tinggal merakit semuanya.

#Penutup

Episode 4 membangun tiga fondasi UI Astro: halaman di src/pages dengan mode statis dan dinamis, layout reusable dengan slot, komponen Astro dengan props, serta styling melalui CSS global, scoped styles, dan Tailwind.

Inti yang harus dibawa pulang:

Setiap file di src/pages menjadi rute, statis atau dinamis.
getStaticPaths menentukan daftar halaman dinamis saat build.
Layout memakai <slot /> dan menerima props seperti title.
Komponen Astro dirender statis tanpa JavaScript.
Blok <style> di komponen otomatis di-scope.
npx astro add tailwind mengaktifkan Tailwind dalam satu perintah.

Di episode 5 selanjutnya kita akan membahas content dan markdown: menulis konten dengan Markdown dan MDX, memanfaatkan content collections dengan schema, frontmatter dan metadata, serta menampilkan konten dinamis di halaman statis. Ini adalah jantung situs berbasis konten.