Belajar Gatsby - Plugins & Themes

#Pendahuluan

Salah satu alasan Gatsby begitu produktif adalah ekosistem plugin dan theme yang luas. Alih-alih menulis fitur dari nol, kalian menginstal paket yang sudah teruji lalu mengonfigurasinya sesuai kebutuhan.

Episode 7 membedah cara kerja plugin, pola install dan konfigurasi dengan options, konsep theme sebagai kumpulan plugin yang reusable, serta pentingnya urutan plugin terhadap hasil build.

#Memahami Plugin Ecosystem

#Jenis-Jenis Plugin

Plugin Gatsby terbagi menjadi tiga kategori utama:

• Source plugins: menarik data masuk, contoh gatsby-source-filesystem dan gatsby-source-contentful.
• Transformer plugins: mengubah format data, contoh gatsby-transformer-remark dan gatsby-transformer-sharp.
• Functional plugins: menambah fitur, contoh gatsby-plugin-image, gatsby-plugin-sitemap, dan gatsby-plugin-offline.

Ribuan plugin tersedia di Plugin Library resmi Gatsby. Sebelum menulis kode sendiri, selalu cek apakah plugin yang dibutuhkan sudah ada — ini kebiasaan yang menghemat waktu berjam-jam.

#Install dan Konfigurasi Plugin

#Memasang Plugin

Pemasangan sama seperti paket npm biasa:

npm install gatsby-plugin-sitemap gatsby-plugin-robots-txt

#Dua Cara Pendaftaran

Plugin bisa didaftarkan sebagai string sederhana atau object dengan options:

Plugin dengan dan tanpa options

module.exports = {
  plugins: [
    "gatsby-plugin-image",
    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        query: `
          {
            allSitePage {
              nodes {
                path
              }
            }
          }
        `,
      },
    },
  ],
}

Bentuk string "gatsby-plugin-image" setara dengan resolve tanpa options. Saat plugin butuh pengaturan, gunakan object dengan properti resolve dan options. gatsby-plugin-sitemap di atas menghasilkan file sitemap.xml dari daftar halaman yang di-query.

#Membuat dan Memakai Themes

#Apa Itu Gatsby Theme

Theme adalah kumpulan plugin, komponen, dan data yang dibungkus menjadi satu paket yang bisa dipakai ulang. Kalian bisa membuat theme sendiri lalu menggunakannya seperti plugin biasa:

gatsby new theme-blog-gatsby https://github.com/gatsbyjs/gatsby-starter-theme-workspace

Starter theme-workspace menyediakan dua folder: theme itu sendiri dan example site yang memakainya. Struktur ini memudahkan pengembangan sambil melihat hasilnya langsung.

#Memakai Theme dengan Options

Theme diaktifkan lewat array plugins, dan options-nya bisa disesuaikan per pemakaian:

Pakai theme dengan options

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-blog",
      options: {
        basePath: "/blog",
        contentPath: "content/posts",
      },
    },
  ],
}

basePath: "/blog" menentukan di URL mana konten theme muncul, dan contentPath menentukan folder tempat menulis konten. Pengguna theme tidak perlu tahu detail internal — cukup atur options.

#Mengapa Themes Berguna

Theme memungkinkan tim atau organisasi berbagi desain dan fungsionalitas lintas project. Kalian bisa me-shadow file theme (override komponen tertentu) tanpa menulis ulang seluruhnya — fleksibilitas yang jarang ada di framework lain.

#Plugin Ordering dan Performa

#Urutan Plugin dalam Array

Urutan plugin di array plugins bisa memengaruhi hasil. Dua aturan praktis yang umum:

• Plugin manifest dan offline: daftar gatsby-plugin-manifest sebelum gatsby-plugin-offline.
• Plugin yang berubah harus muncul sebelum plugin yang membaca hasilnya; transformer setelah source yang bersangkutan.

Jika ragu, ikuti panduan instalasi resmi setiap plugin — urutan yang disarankan sudah diuji oleh pengelola.

#Dampak terhadap Performa Build

Setiap plugin menambah kerja saat build. Jangan menumpuk plugin yang tidak terpakai. Plugin dengan runtime yang besar bisa memperlambat build dan memperbesar bundle; audit secara berkala plugin mana yang benar-benar dipakai. gatsby build --verbose bisa membantu melihat proses apa saja yang berjalan.

#Penutup

Episode 7 membuka pintu ekosistem Gatsby: jenis plugin, pola install dan konfigurasi, pembuatan serta pemakaian theme, dan best practice urutan plugin.

Inti yang harus dibawa pulang:

• Plugin terbagi menjadi source, transformer, dan functional.
• Plugin bisa didaftarkan sebagai string atau object dengan options.
• Theme adalah kumpulan plugin dan komponen yang reusable.
• Options theme disesuaikan per pemakaian lewat basePath dan contentPath.
• Urutan plugin berpengaruh; ikuti panduan resmi.
• Hapus plugin yang tidak terpakai agar build tetap cepat.

Di episode 8 selanjutnya kita masuk ke fase workloads: configuration dan environment — gatsby-config dan gatsby-node, environment variables, source dan transformer plugins, kustomisasi schema data, serta pengelolaan secret di build.