Murajaah At-Taisir - Ketika Next.js Bertemu Mushaf

Eksperimen dengan Next.js 16, SWR, dan Tailwind CSS untuk menghadirkan pengalaman murajaah Qur’an yang ringan, acak, dan tetap berpijak pada metode At-Taisir karya Ustadz Adi Hidayat.

Blog • 05 Nov 2025 • Diperbarui 09 Nov 2025

Tangkapan layar halaman aplikasi Murajaah at-Taisir pada website HiRahmat.Dev

Kenapa Buat Aplikasi Ini?

Proyek ini saya buat karena sadar bahwa hafalan Qur’an itu bukan cuma soal menghafal, tapi soal menjaga hafalan juga. Kadang, bagian tersulit bukan pas nambah hafalan baru, tapi mempertahankan hafalan yang sudah ada. Saya sering ngerasa bagian itu paling berat.

Saya terinspirasi dari metode At-Taisir yang dikenalkan oleh Ustadz Adi Hidayat. Metode ini menarik karena mengajarkan hafalan bukan cuma lewat suara atau urutan ayat, tapi juga lewat posisi visual di mushaf—apakah ayat itu di sisi kiri, kanan, atas, bawah, halaman berapa, dan sebagainya. Buat saya, pendekatan ini unik karena menanamkan hafalan lewat ruang visual, bukan sekadar lisan.

Saya udah beli buku ust. Adi Hidayat terkait murajaah at-Taisir. Bagus, tapi menurut saya masih ada kekurangan karena ayat yang harusnya disembunyikan masih keliatan. Kurang gereged gitu.

Tangkapan foto cover buku Murajaah At-Taisir 30 Hari Hafal Alquran.Tangkapan foto isi buku Murajaah At-Taisir 30 Hari Hafal Alquran.

Dari situ saya mulai mikir, lah kan saya Frontend dan bisa buat aplikasi Web, gimana kalau saya buat aja aplikasinya, aplikasi murajaah biar lebih interaktif sekalian.

Aplikasi Murajaah at Taisir

Dari sana, saya coba bikin aplikasi kecil bernama Murojaah At-Taisir.

Tangkapan layar tampilan halaman Aplikasi Murajaah at Taisri dari website HiRahmat.Dev

Sederhana aja: aplikasi ini menampilkan ayat acak dari Al-Qur’an, dengan visualisasi yang meniru ciri khas posisi mushaf dalam metode At-Taisir. Tujuannya sama seperti buku ust. Adi Hidayat, bukan untuk menambah hafalan baru, tapi buat bantu murajaah.

Cara Pakai

Kamu cukup isi tiga hal — pilih surat, tentukan ayat mulai, dan ayat terakhir yang ingin diacak.

Setelah itu, tekan tombol “Mulai Murajaah”, dan aplikasi akan menampilkan ayat acak dari rentang yang kamu pilih.

Tangkapan layar tampilan form input di halaman Aplikasi Murajaah at Taisir.

Tampilan halaman di sisi kanannya juga dibuat menyerupai halaman mushaf, dengan ayat-ayat lain disembunyikan, kecuali ayat yang muncul.

Tujuannya supaya posisi ayat tetap terasa familiar, seolah kamu sedang membuka mushaf yang sama — hanya saja lewat layar.

Penutup

Saya pengen aplikasi ini terasa tidak formal, supaya siapa pun yang sedang menjaga hafalan, bahkan yang kadang ngerasa malu atau minder, bisa tetap murajaah dengan tenang. Tampilannya saya buat sesederhana mungkin, gak banyak tombol, dan bisa dipakai kapan aja tanpa harus “siap belajar”.

Data ayat diambil dari AlQuran.cloud API — Restful API open source yang menyediakan teks Al-Qur’an lengkap dan sederhana.

Semua dibuat sesimpel mungkin, tanpa backend rumit, karena fokusnya bukan di fitur, tapi di pengalaman yang tenang dan mudah diakses.

Proyek ini masih jauh dari selesai, tapi buat saya pribadi, ini udah cukup berfungsi.

Di tengah semua eksperimen dan proyek coding lain, yang satu ini terasa paling dekat secara batin.

Kadang saya buka aplikasinya bukan buat dites, tapi buat murajaah beneran.

Dan mungkin, itu udah cukup jadi alasan kenapa proyek ini saya buat.

Ke depannya bakal terus diperbarui supaya pengalamannya lebih enak lagi.

🔗 Coba aplikasinya di sini: hirahmat.dev/lab/murajaah-at-taisir

Punya ide atau proyek menarik?

Saya siap berkolaborasi — kirim email ke hirahmat.dev@gmail.com

background footer contact cta accent