NPM Package / Form Library
ErlangForm
A schema-driven form builder library for React, powered by TanStack Form.
TYPESCRIPTSCHEMA-DRIVENTANSTACK FORM
Erlanggaht is building ErlangTech.
I focus on developing efficient, responsive software.
Clean, well-structured code creates better user experiences.
Always experimenting with modern libraries and the latest web standards.
Solving problems with efficient, effective solutions.
Finding ways to solve complex problems.
Software security is a top priority.
Frontend Development
Erlanggaht93
@erlanggaht93
Writing about technology, web development, and software engineering.
erlanggaht.com
erlanggaht.com
Read on Medium
RepositoriesProjectsActivityContributions
Double-click to open
E
ErlangForm
Pustaka schema-driven form builder untuk React menggunakan TanStack Form.
Related
Latest Articles
7 Oct 2026Technology
Erlang System Care: Aplikasi untuk Merawat PC Windows
Awalnya saya membuat **Erlang System Care** untuk kebutuhan pribadi, terutama mematikan komputer dengan timer. Dari kebutuhan sederhana itu, saya mulai menambahkan fitur lain yang sering saya pakai untuk memantau dan merawat PC. Sekarang, beberapa kebutuhan sehari-hari tersedia dalam satu aplikasi: - **Informasi perangkat** — lihat spesifikasi dan kondisi PC. - **Monitor sistem** — pantau CPU dan RAM, cari aplikasi yang berjalan, lalu hentikan proses jika diperlukan. - **Pembersih** — cek dan bersihkan file sementara, Recycle Bin, serta data browser. - **Penjadwal** — atur waktu shutdown, sleep, atau kunci layar. - **Mode Aktivitas** — simpan pengaturan daya, aplikasi, dan timer untuk kerja, gaming, atau malam. - **Shortcut Windows** — buka Task Manager, Device Manager, Uninstall Programs, dan alat lainnya. Ada juga tema terang dan gelap, bahasa Indonesia dan Inggris, serta system tray. Aplikasi tersedia dalam versi **installer dan portable** untuk Windows 10 ke atas, 64-bit. Saya membagikan aplikasi ini supaya bisa dipakai juga oleh teman-teman yang punya kebutuhan serupa. [**Lihat & Download Erlang System Care →**](https://erlangsystemcare.erlanggaht.com/)
ElectronApplication
6 Oct 2026Technology
DompetIQ: Catat Keuangan dengan Lebih Mudah
Saya membuat **DompetIQ** untuk membantu mengelola keuangan sehari-hari. Mulai dari mencatat pemasukan dan pengeluaran, mengatur anggaran, sampai memantau target tabungan—semuanya tersedia dalam satu aplikasi. Beberapa fitur yang bisa kamu gunakan: - **Dashboard:** lihat saldo dan transaksi terbaru. - **Catatan keuangan:** catat pemasukan dan pengeluaran, lalu cari berdasarkan tanggal. - **Kelola kartu dan rekening:** pantau saldo dari beberapa rekening. - **Anggaran:** atur batas pengeluaran dan pantau penggunaannya. - **Target tabungan:** tentukan tujuan dan lihat progres menabung. - **Laporan bulanan:** lihat ringkasan keuangan setiap bulan. - **Tools keuangan:** gunakan kalkulator untuk membantu perencanaan. DompetIQ tersedia dalam tampilan **Desktop** dan **Lite** yang lebih sederhana untuk penggunaan di ponsel. Ada juga pilihan tema terang/gelap, bahasa Indonesia/Inggris, serta pengaturan untuk menyembunyikan saldo. Penasaran? Kamu bisa mencoba mode demo sebelum membuat akun. [**Coba DompetIQ**](https://dompetiq.web.id) ## Punya Ide Aplikasi? Jika kamu ingin membuat website atau aplikasi, atau tertarik berkolaborasi, saya terbuka untuk berdiskusi. Kunjungi [layanan saya di Fastwork](https://fastwork.id/user/erlanggaht) atau hubungi saya langsung untuk membicarakan ide dan kebutuhanmu.
ApplicationNextjs
8 Sept 2026Frontend
# SEO Next.js #3: Monitoring
Setelah sitemap, metadata, dan structured data selesai, website perlu dipantau secara berkala. Tujuannya untuk mengetahui apakah ada halaman yang gagal diindeks, link yang bermasalah, atau performa yang menurun. ## 1. Memantau error di Google Search Console Buka [Google Search Console](https://search.google.com/search-console), lalu pilih properti: ```text erlanggaht.com ``` Menu yang perlu diperiksa: - **Overview** untuk melihat ringkasan website. - **Page indexing** untuk melihat halaman yang berhasil atau gagal diindeks. - **Core Web Vitals** untuk melihat pengalaman pengguna. - **Sitemaps** untuk memastikan sitemap berhasil dibaca Google. Jika menemukan error, klik jenis error tersebut untuk melihat URL yang bermasalah. Setelah memperbaikinya, klik **Validate Fix**. ## 2. Mengecek performa dengan PageSpeed Insights Gunakan [PageSpeed Insights](https://pagespeed.web.dev/) dan periksa halaman utama: ```text https://erlanggaht.com/ https://erlanggaht.com/about https://erlanggaht.com/work https://erlanggaht.com/blog ``` Perhatikan beberapa bagian berikut: - **Performance** — kecepatan halaman. - **Accessibility** — kemudahan akses pengguna. - **Best Practices** — praktik teknis website. - **SEO** — pemeriksaan dasar SEO. Metrik penting: - **LCP** mengukur kecepatan konten utama muncul. - **INP** mengukur kecepatan website merespons interaksi. - **CLS** mengukur kestabilan layout saat halaman dimuat. ## 3. Memeriksa halaman yang belum diindeks Di Google Search Console, buka: ```text Indexing → Pages ``` Periksa bagian: - **Error** - **Not indexed** - **Valid** Untuk mengecek URL tertentu, gunakan kolom **Inspect any URL**. Masukkan URL lengkap, lalu klik **Test live URL**. Jika halaman sudah bisa diakses Google tetapi belum masuk indeks, klik **Request indexing**. Proses ini hanya mengirim permintaan kepada Google dan tidak menjamin halaman langsung muncul di hasil pencarian. ## 4. Membandingkan mobile dan desktop Di PageSpeed Insights, jalankan pemeriksaan menggunakan mode: - Mobile - Desktop Mobile biasanya memiliki skor lebih rendah karena perangkat dan koneksi internet lebih terbatas. Pastikan layout tidak menyebabkan horizontal scroll, teks tetap terbaca, dan gambar tidak terlalu besar. ## Contoh penerapan teknis di Next.js ### Optimasi gambar dengan `next/image` ```tsx import Image from 'next/image'; export default function ProfileImage() { return ( <Image src="/images/pf-about.webp" alt="Erlangga Hidayatullah" width={800} height={800} sizes="(max-width: 768px) 100vw, 50vw" priority /> ); } ``` Gunakan `priority` hanya untuk gambar utama. Gambar lain dapat menggunakan lazy loading: ```tsx <Image src={article.coverImage} alt={article.title} width={1200} height={630} loading="lazy" sizes="(max-width: 768px) 100vw, 800px" className="object-cover" /> ``` ### Loading state Buat file `loading.tsx` di dalam folder halaman. ```tsx export default function Loading() { return ( <main className="mx-auto max-w-7xl animate-pulse px-6 py-16"> <div className="h-10 w-56 bg-neutral-200 dark:bg-neutral-800" /> <div className="mt-8 h-64 bg-neutral-200 dark:bg-neutral-800" /> </main> ); } ``` ### Halaman 404 Buat file `app/not-found.tsx` agar pengguna tidak berhenti di halaman error kosong. ```tsx import Link from 'next/link'; export default function NotFound() { return ( <main className="grid min-h-screen place-items-center text-center"> <div> <h1 className="text-4xl font-bold">Halaman tidak ditemukan</h1> <Link href="/" className="mt-6 inline-block underline"> Kembali ke Home </Link> </div> </main> ); } ``` ### Mengatur crawler dengan `robots.ts` ```ts import type { MetadataRoute } from 'next'; export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/', disallow: ['/admin', '/xz933k-panel'], }, sitemap: 'https://erlanggaht.com/sitemap.xml', }; } ``` ### Membuat sitemap dinamis ```ts import type { MetadataRoute } from 'next'; export default async function sitemap(): Promise<MetadataRoute.Sitemap> { const articles = await getAllArticles(); return articles.map((article) => ({ url: `https://erlanggaht.com/blog/${article.slug}`, lastModified: new Date(article.createdAt), changeFrequency: 'monthly', priority: 0.7, })); } ``` Setelah mengubah kode SEO, lakukan deploy terlebih dahulu sebelum mengecek ulang menggunakan Google Search Console atau PageSpeed Insights. ## Jadwal monitoring - Setelah deploy: cek sitemap dan halaman utama. - Seminggu sekali: cek Page indexing dan Core Web Vitals. - Sebulan sekali: cek PageSpeed semua halaman utama. - Setiap membuat artikel: lakukan URL Inspection. ## Kesimpulan Monitoring membantu memastikan SEO website tetap sehat setelah dipublikasikan. Google Search Console digunakan untuk memantau indexing dan error, sedangkan PageSpeed Insights digunakan untuk memeriksa performa dan pengalaman pengguna. Artikel Terkait: [SEO Next.js #1: Crawling dan Indexing](https://erlanggaht.com/blog/seo-nextjs-1-crawling-dan-indexing) [SEO Next.js #2: Optimasi Metadata dan Structured Data](hhttps://erlanggaht.com/blog/seo-nextjs-2-optimasi-metadata-dan-structured-data)
Search google consoleNextjs