Belajar Gatsby - Pages, Components & Layouts

#Pendahuluan

Project Gatsby kalian sudah hidup. Sekarang saatnya membangun tampilan yang nyata: halaman, komponen, dan layout. Kualitas arsitektur komponen di tahap ini menentukan mudah-tidaknya project berkembang di episode-episode berikutnya.

Episode 4 membahas pembuatan halaman via file di src/pages, pola layout yang reusable, tiga strategi styling yang populer, dan pengelolaan metadata halaman menggunakan Gatsby Head API.

#Membuat Halaman Statis dengan File di src/pages

#Routing Berbasis File

Setiap file di src/pages menjadi halaman dengan URL yang mengikuti nama file. Buat file baru src/pages/about.jsx:

Halaman about.jsx

const AboutPage = () => (
  <main>
    <h1>Tentang Saya</h1>
    <p>Halaman ini tersedia di rute /about/ secara otomatis.</p>
  </main>
)
 
export default AboutPage

Simpan file, dan buka http://localhost:8000/about — halaman langsung ada tanpa konfigurasi routing tambahan. Beginilah cara kerja file-based routing Gatsby.

#React di dalam JSX

Perhatikan bahwa halaman hanyalah komponen React biasa. Kalian bisa memakai props, state, dan semua fitur React di dalamnya. Gatsby hanya menambahkan konvensi lokasi file sebagai penentu route.

#Reusable Components dan Layout Patterns

#Membuat Komponen Layout

Elemen seperti header, nav, dan footer biasanya sama di semua halaman. Pola yang umum: komponen Layout yang membungkus children:

Komponen layout

import { Link } from "gatsby"
 
const Layout = ({ children }) => (
  <div>
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">Tentang</Link>
      </nav>
    </header>
    <main>{children}</main>
    <footer>Hak cipta Gatsby Belajar</footer>
  </div>
)
 
export default Layout

Komponen Link dari Gatsby memberi dua keunggulan: navigasi client-side tanpa reload penuh dan prefetching otomatis. Layout ini lalu dipakai di setiap halaman dengan membungkus konten:

Memakai layout di halaman

import Layout from "../components/Layout"
 
const AboutPage = () => (
  <Layout>
    <h1>Tentang Saya</h1>
  </Layout>
)
 
export default AboutPage

#Styling dengan CSS Modules

#Kenapa CSS Modules

CSS Modules memberi scoping otomatis: nama class di-file tidak akan bentrok dengan file lain. Nama file harus diakhiri .module.css:

.container {
  max-width: 720px;
  margin: 0 auto;
}
 
.heading {
  color: rebeccapurple;
}

Import CSS module di komponen

import * as styles from "./styles.module.css"
 
const AboutPage = () => (
  <section className={styles.container}>
    <h1 className={styles.heading}>Tentang Saya</h1>
  </section>
)

import * as styles from "./styles.module.css" memberikan object berisi nama class yang sudah di-scope; gunakan lewat className={styles.heading}.

#Alternatif: styled-components dan Tailwind

Untuk styling berbasis komponen, pasang styled-components bersama gatsby-plugin-styled-components agar SSR bekerja benar. Untuk utility-first, Tailwind CSS juga didukung melalui PostCSS — cukup ikuti panduan pemasangan Tailwind resmi untuk Gatsby. Ketiganya valid; pilih sesuai preferensi tim.

#Metadata dengan Gatsby Head API

#Komponen Head

Sejak Gatsby 4.19, cara yang direkomendasikan untuk metadata halaman adalah Gatsby Head API. Ekspor fungsi Head dari file page:

Gatsby Head API di halaman

const AboutPage = () => <h1>Tentang Saya</h1>
 
export default AboutPage
 
export function Head() {
  return (
    <>
      <title>Tentang Saya</title>
      <meta name="description" content="Profil singkat penulis" />
    </>
  )
}

Fungsi Head dari file page merender elemen yang akan disisipkan ke bagian head HTML — menggantikan plugin react-helmet yang dulu menjadi standar, karena Head dirender saat build time tanpa overhead runtime.

#Kombinasi dengan Layout

Karena Head menempel pada halaman, metadata bisa disusun per-halaman, bahkan bisa memakai data dari page query. Ini penting untuk SEO: setiap halaman punya title dan description unik tanpa duplikasi.

#Penutup

Episode 4 membangun tampilan dasar Gatsby: routing berbasis file, komponen layout yang reusable, tiga pendekatan styling, dan pengelolaan metadata dengan Gatsby Head API.

Inti yang harus dibawa pulang:

• Setiap file di src/pages otomatis menjadi route.
• Komponen Layout membungkus children dan dipakai ulang di tiap halaman.
• Link dari Gatsby memberi navigasi client-side dan prefetching.
• CSS Modules memberi scoping class tanpa bentrok.
• styled-components dan Tailwind adalah alternatif styling yang valid.
• Gatsby Head API adalah cara modern untuk metadata halaman.

Di episode 5 selanjutnya kita masuk ke jantung Gatsby: data fetching dan GraphQL — memahami data layer, membedakan page query dan static query, menyediakan konten dari Markdown dan JSON, serta querying gambar dan relasi antar konten.