Cara atur zona waktu di CloudFlare Pages

UTC (Coordinated Universal Time) adalah standar waktu global yang menjadi acuan utama untuk semua zona waktu di dunia, menggantikan GMT, dan digunakan sebagai referensi waktu untuk berbagai keperluan seperti penerbangan, internet, dan pencatatan ilmiah seperti gempa bumi, serta menjadi dasar penetapan zona waktu lokal (misalnya, WIB adalah UTC+7).

Hampir semua framework, alat pengembangan atau serverless hosting (seperti Pages) rata-rata menggunakan UTC sebagai fondasi zona waktu, karena bersifat global, tidak terbatas oleh zona wilayah, dan mudah dikembangkan lebih lanjut (extended), misal diubah jadi UTC+7 (Asia/Jakarta) atau biasa disebut Waktu Indonesia Barat (WIB).

Kita dapat menggunakan dua pendekatan, yaitu di tingkat code dan edge, Cara menggunakannya zona waktu di CloudFlare Pages, yaitu:

1. Buat helper, misal menggunakan library day.js

Untuk menjembatani zona waktu, atau menyelaraskan waktu antara UTC dan Asia/Jakarta sehingga kita mendapatkan penanggalan yang konsisten antara dev dan prod, kita dapat menggunakan helper date.ts, seperti potongan kode berikut:

  {if (isDateOnlyString) {
    // Treat sebagai lokal date di Jakarta, tanpa adjust ke UTC
    return dayjs.tz(dateInput, 'Asia/Jakarta').format(fmt);
  } else {
    // Treat input sebagai UTC, lalu convert ke Jakarta
    return dayjs
      .utc(dateInput)
      .tz('Asia/Jakarta')
      .format(fmt);
  }

Pendekatan ini dapat diterapkan pada berbagai proyek, serta hosting apapun seperti Vercel atau Netlify, tidak terikat di Pages. Sehingga kita diberi kebebasan mau hosting dimanapun.

2. Gunakan Variables di Pages

Terkadang, zona waktu yang di set dari framework, tidak berjalan mulus dan “kalah” karena di dikte oleh CloudFlare Pages yang menggunakan zona waktu UTC. Ini juga mungkin jadi salah satu kekurangan Pages, yaitu terlalu memaksa proyek kita menggunakan UTC meskipun kita telah menggunakan zona waktu Asia/Jakarta. Hasilnya, localhost (dev) menampilkan tanggal yang benar, misal tanggal 1 Januari 2026, sedangkan di Pages menampilkan tanggal 31 Desember 2025, yang ternyata kurang satu hari dan merupakan indikasi kuat bahwa proyek kita dipaksa menggunakan zona waktu UTC meskipun sudah di buat helper untuk zona waktu Asia/Jakarta.

Cara mengatasi masalah ini cukup mudah, kita hanya perlu mendikte balik Pages supaya menggunakan zona waktu Asia/Jakarta. Caranya yaitu masuk ke dasbor CloudFlare Compute & AI Worker & Pages nama proyek Settings, geser sedikit kebawah, cari bagian Variable and Secrets, klik Add kemudian buat variabel baru.

Type: Text
Variable name: TZ
Value: Asia/Jakarta

Hasilnya akan terlihat seperti pada gambar berikut.

Klik Save, perubahan akan terlihat di build berikutnya.

Dengan mengikuti dua cara diatas, Anda telah mengatasi masalah zona waktu yang membingungkan, terutama untuk pengembang, yang melihat tanggal yang berbeda antara tanggal terbit artikel di localhost dan di Pages.