# Pemikiran & Cerita: Web Dev

> Berbagi pengalaman, pembelajaran, dan petualangan saya di dunia teknologi dan lainnya.

URL: https://www.matthewswong.com/id/blog/category/web-dev/

- [Cara Membuat Website Ramah Aksesibilitas Next.js (Pemula)](https://www.matthewswong.com/id/blog/cara-membuat-website-accessible-nextjs/)
- [Cara Menjalankan Node Test Runner di Next.js untuk Pemula](https://www.matthewswong.com/id/blog/cara-menjalankan-node-test-runner-nextjs/)
- [Cara Kerja Caching Next.js: Static, Dynamic, dan Revalidate](https://www.matthewswong.com/id/blog/cara-kerja-caching-rendering-nextjs-static-dynamic/)
- [Cara Meningkatkan Core Web Vitals Next.js untuk Pemula](https://www.matthewswong.com/id/blog/cara-meningkatkan-core-web-vitals-nextjs/)
- [Cara Membuat Middleware Next.js: Matcher, Redirect, Rewrite](https://www.matthewswong.com/id/blog/cara-membuat-middleware-nextjs/)
- [Cara Membuat API di Next.js dengan Route Handlers (route.ts)](https://www.matthewswong.com/id/blog/cara-membuat-api-nextjs-route-handlers/)
- [Cara Membuat SEO Metadata Next.js App Router untuk Pemula](https://www.matthewswong.com/id/blog/cara-membuat-seo-metadata-nextjs-app-router/)
- [Cara Membuat Smoke Test Playwright di GitHub Actions](https://www.matthewswong.com/id/blog/cara-smoke-test-playwright-github-actions/)
- [Perbedaan Server Component dan Client Component Next.js](https://www.matthewswong.com/id/blog/perbedaan-server-component-client-component-nextjs/)
- [Ukuran Docker Image Next.js Standalone: Dockerfile Nyata](https://www.matthewswong.com/id/blog/nextjs-standalone-docker-image-size/)
- [Plugin Claude Code untuk Next.js: Skill, Hook, Subagent](https://www.matthewswong.com/id/blog/claude-code-plugin-nextjs-stack-toolkit/)
- [Claude Code Artifacts: Terbitkan Halaman dari Sesi](https://www.matthewswong.com/id/blog/claude-code-artifacts-publishing-guide/)
- [Answer Engine Optimization (AEO): Dikutip Mesin AI](https://www.matthewswong.com/id/blog/answer-engine-optimization-ai-search/)
- [Speculation Rules API: Prerender dan Prefetch Instan di Chrome](https://www.matthewswong.com/id/blog/speculation-rules-api-prerendering/)
- [JavaScript Temporal API: Pengganti Modern untuk Date](https://www.matthewswong.com/id/blog/javascript-temporal-api-guide/)
- [Next.js 16: Migrasi middleware.ts ke proxy.ts](https://www.matthewswong.com/id/blog/nextjs-16-proxy-ts-migration/)
- [Next.js Cache Components dan Direktif use cache](https://www.matthewswong.com/id/blog/nextjs-cache-components-use-cache/)
- [Error Hydration Next.js: Penyebab dan Cara Memperbaikinya](https://www.matthewswong.com/id/blog/nextjs-hydration-errors-fix/)
- [Mengamankan Next.js Server Actions: Auth, IDOR & Validasi Zod](https://www.matthewswong.com/id/blog/nextjs-server-actions-security/)
- [Astro 5 Server Islands & Content Layer API: Apa yang Baru](https://www.matthewswong.com/id/blog/astro-5-server-islands-content-layer/)
- [Runes Svelte 5: Reaktivitas $state, $derived, $effect](https://www.matthewswong.com/id/blog/svelte-5-runes-reactivity/)
- [HTMX dan Pendekatan Aplikasi Berbasis Hypermedia](https://www.matthewswong.com/id/blog/htmx-hypermedia-driven-apps/)
- [Tailwind CSS v4: Engine Oxide dan Konfigurasi CSS-First](https://www.matthewswong.com/id/blog/tailwind-css-v4-oxide-engine/)
- [React Compiler: Memoisasi Otomatis Tanpa useMemo](https://www.matthewswong.com/id/blog/react-compiler-automatic-memoization/)
- [Biome vs ESLint + Prettier: Satu Toolchain Rust Pengganti Dua](https://www.matthewswong.com/id/blog/biome-vs-eslint-prettier-toolchain/)
- [Rolldown: Bundler Rust Vite Pengganti Rollup](https://www.matthewswong.com/id/blog/vite-rolldown-rust-bundler/)
- [Debouncing dan Throttling di React dengan Cara yang Benar](https://www.matthewswong.com/id/blog/debouncing-throttling-react-hooks-guide/)
- [React Server Components vs Arsitektur Islands](https://www.matthewswong.com/id/blog/react-server-components-vs-islands-architecture/)
- [TanStack Router: Routing yang Sepenuhnya Type-Safe di React](https://www.matthewswong.com/id/blog/tanstack-router-type-safe-routing/)
- [Valibot vs Zod: Ukuran Bundle dan Tree-Shaking](https://www.matthewswong.com/id/blog/valibot-vs-zod-bundle-size/)
- [Web Worker di React: Pindahkan Main Thread dengan Comlink](https://www.matthewswong.com/id/blog/web-workers-offload-main-thread-react/)
- [Apa yang Berubah di Zod 4: Performa, Mini, dan Migrasi](https://www.matthewswong.com/id/blog/zod-4-schema-validation-performance/)
- [Next.js Partial Prerendering: Shell Statis, Lubang Dinamis](https://www.matthewswong.com/id/blog/nextjs-partial-prerendering-ppr/)
- [Server-Sent Events di Next.js: Lebih Sederhana dari WebSocket](https://www.matthewswong.com/id/blog/server-sent-events-nextjs-streaming/)
- [React 19 use() dan Actions: Model Async yang Baru](https://www.matthewswong.com/id/blog/react-19-use-hook-actions-guide/)
- [TanStack Query di Next.js App Router: Prefetch dan Hydrate](https://www.matthewswong.com/id/blog/tanstack-query-nextjs-app-router/)
- [shadcn/ui: Komponen Copy-Paste sebagai Sebuah Arsitektur](https://www.matthewswong.com/id/blog/shadcn-ui-component-architecture/)
- [Optimasi INP: Core Web Vital yang Menggantikan FID](https://www.matthewswong.com/id/blog/web-vitals-inp-optimization-2026/)
- [Streaming dan Suspense di Next.js: Loading UI yang Terasa Cepat](https://www.matthewswong.com/id/blog/nextjs-streaming-suspense-patterns/)
- [Zustand vs Redux Toolkit: Memilih State React di 2026](https://www.matthewswong.com/id/blog/zustand-vs-redux-toolkit-state/)
- [Form Type-Safe dengan React Hook Form dan Zod](https://www.matthewswong.com/id/blog/react-hook-form-zod-type-safe-forms/)
- [Gambar Open Graph Dinamis dengan Next.js ImageResponse](https://www.matthewswong.com/id/blog/nextjs-dynamic-og-image-generation/)
- [Server Actions Next.js di Produksi: Form, Validasi, Keamanan](https://www.matthewswong.com/id/blog/nextjs-server-actions-production/)
- [React Server Components: Mental Model yang Akhirnya Masuk Akal](https://www.matthewswong.com/id/blog/react-server-components-mental-model/)
- [Self-Hosting Web Font untuk Performa: next/font yang Benar](https://www.matthewswong.com/id/blog/self-hosting-web-fonts-performance/)
- [Design Token dengan Tailwind: Theme yang Selamat dari Rebrand](https://www.matthewswong.com/id/blog/design-tokens-tailwind-theme/)
- [Apa yang Sebenarnya Dilakukan next/image: srcset, AVIF, dan Cache](https://www.matthewswong.com/id/blog/nextjs-image-optimization-internals/)
- [SEO Teknis untuk Developer: Canonical, hreflang, JSON-LD](https://www.matthewswong.com/id/blog/technical-seo-checklist-developers/)
- [Membangun Landing Page Produksi yang Meraih Skor 100 di Core Web Vitals](https://www.matthewswong.com/id/blog/production-landing-page-core-web-vitals/)
- [Struktur Proyek TypeScript untuk Aplikasi Dunia Nyata: Apa yang Benar-Benar Berhasil](https://www.matthewswong.com/id/blog/typescript-project-structure-real-world/)
- [Alur Kerja Figma ke Next.js: Cara Saya Menerjemahkan Desain ke Komponen](https://www.matthewswong.com/id/blog/figma-to-nextjs-component-workflow/)
- [Next.js i18n dengan next-intl: Panduan Lengkap dari Seseorang yang Benar-Benar Menggunakannya](https://www.matthewswong.com/id/blog/nextjs-i18n-next-intl-guide/)
- [Struktur Proyek Next.js yang Skalabel dengan App Router](https://www.matthewswong.com/id/blog/nextjs-project-structure-scalable/)
- [Cara Membangun SaaS dalam 30 Hari dengan Next.js dan Tailwind](https://www.matthewswong.com/id/blog/build-saas-30-days-nextjs-tailwind/)
- [Membangun REST API Type-Safe dengan NestJS dan Prisma](https://www.matthewswong.com/id/blog/type-safe-api-nestjs-prisma/)
- [SEO-First Next.js: Checklist Lengkap untuk 2026](https://www.matthewswong.com/id/blog/seo-first-nextjs-checklist/)
- [React Query vs SWR: Mana yang Digunakan di 2026](https://www.matthewswong.com/id/blog/react-query-vs-swr/)
- [Real User Monitoring: Mengapa Data Lab Menipu dan Data Lapangan Menang](https://www.matthewswong.com/id/blog/real-user-monitoring-web-performance/)
- [Optimisasi Gambar di Next.js: WebP, AVIF, dan Pengaturan yang Benar-benar Saya Kirim](https://www.matthewswong.com/id/blog/image-optimization-nextjs-webp-avif/)
- [Caching Next.js di 2025: ISR, SSR, dan Kapan Menggunakan Masing-masing](https://www.matthewswong.com/id/blog/nextjs-caching-isr-ssr-strategy/)
- [Connection Pooling Database di NestJS: PgBouncer dan Mengapa Anda Membutuhkannya](https://www.matthewswong.com/id/blog/database-connection-pooling-nestjs/)
- [PostgreSQL Full-Text Search Tanpa Elasticsearch: Yang Saya Gunakan di Proyek ERP](https://www.matthewswong.com/id/blog/postgresql-full-text-search-no-elasticsearch/)
- [Cursor vs Offset Pagination: Kesenjangan Performa 17x di Skala](https://www.matthewswong.com/id/blog/cursor-vs-offset-pagination/)
- [API Versioning di NestJS: Strategi yang Benar-benar Saya Kirim](https://www.matthewswong.com/id/blog/api-versioning-nestjs-strategy/)
- [GraphQL vs REST di 2025: Mana yang Dipilih untuk Proyek Berikutnya?](https://www.matthewswong.com/id/blog/graphql-vs-rest-2025/)
- [OpenAPI dan Swagger di NestJS: Dokumen yang Dihasilkan Otomatis dan Selalu Akurat](https://www.matthewswong.com/id/blog/openapi-swagger-nestjs/)
- [Variabel Environment dan Secrets di Next.js: Apa yang Salah dan Cara Memperbaikinya](https://www.matthewswong.com/id/blog/environment-variables-secrets-nextjs/)
- [E2E Testing Aplikasi Next.js dengan Playwright: Setup, Pola, dan Integrasi CI](https://www.matthewswong.com/id/blog/e2e-testing-playwright-nextjs/)
- [Audit Aksesibilitas untuk Aplikasi Next.js: Mengotomatiskan Kepatuhan WCAG](https://www.matthewswong.com/id/blog/accessibility-audit-nextjs/)
- [Manajemen Dependensi npm dan Audit Keamanan: Yang Benar-benar Saya Lakukan](https://www.matthewswong.com/id/blog/npm-dependency-management-audit/)
- [Security Headers di Next.js: Konfigurasi yang Benar-benar Saya Kirim](https://www.matthewswong.com/id/blog/security-headers-nextjs-configuration/)
- [Dark Mode di Next.js: Sadar Sistem, Bebas Kedip, dan Implementasi yang Saya Kirim](https://www.matthewswong.com/id/blog/dark-mode-nextjs-system-aware/)
- [Menguji Aplikasi Next.js dengan Vitest dan Jest: Perbandingan Praktis](https://www.matthewswong.com/id/blog/nextjs-testing-vitest-jest/)
- [Storybook untuk Dokumentasi Komponen: Membangun Design System yang Hidup](https://www.matthewswong.com/id/blog/storybook-component-documentation/)
- [Migrasi Next.js App Router: Pelajaran dari Proyek Nyata](https://www.matthewswong.com/id/blog/nextjs-app-router-migration-lessons/)
- [Tailwind CSS vs CSS Modules: Mana yang Harus Digunakan di 2025?](https://www.matthewswong.com/id/blog/tailwindcss-vs-css-modules/)
- [Prisma vs TypeORM di NestJS: ORM Mana yang Harus Dipilih?](https://www.matthewswong.com/id/blog/prisma-vs-typeorm-nestjs-comparison/)
- [NextAuth vs Clerk: Autentikasi di Aplikasi Next.js 2025](https://www.matthewswong.com/id/blog/nextauth-vs-clerk-comparison/)
- [WebSockets di NestJS: Membangun Fitur Real-Time di Produksi](https://www.matthewswong.com/id/blog/websockets-nestjs-realtime/)
- [Upload File ke S3 di Next.js: Pola Produksi](https://www.matthewswong.com/id/blog/file-upload-s3-nextjs-production/)
- [Resend vs Nodemailer: Email Transaksional di 2025](https://www.matthewswong.com/id/blog/resend-vs-nodemailer-email/)
- [Next.js API Routes vs NestJS: Memilih Backend di 2025](https://www.matthewswong.com/id/blog/nextjs-api-routes-vs-nestjs/)
- [TypeScript Strict Mode di Produksi: Mengapa Ini Tidak Bisa Ditawar](https://www.matthewswong.com/id/blog/typescript-strict-mode-production/)
- [React Server Components: Kapan dan Bagaimana Menggunakannya di Next.js](https://www.matthewswong.com/id/blog/react-server-components-usage/)
- [Middleware Next.js: Kasus Penggunaan Nyata Melampaui Dokumentasi](https://www.matthewswong.com/id/blog/nextjs-middleware-real-use-cases/)
- [Framer Motion vs Animasi CSS: Kapan Menggunakan Masing-masing](https://www.matthewswong.com/id/blog/framer-motion-vs-css-animations/)
- [Monorepo dengan Turborepo: Menjalankan Next.js dan NestJS Bersama](https://www.matthewswong.com/id/blog/monorepo-turborepo-setup/)
- [Rate Limiting API di NestJS dengan Redis: Panduan Produksi](https://www.matthewswong.com/id/blog/api-rate-limiting-nestjs-redis/)
- [Pola Penanganan Error Next.js: Dari error.tsx ke Produksi](https://www.matthewswong.com/id/blog/nextjs-error-handling-patterns/)
- [Integrasi API BPJS untuk Developer Indonesia: Panduan Praktis](https://www.matthewswong.com/id/blog/bpjs-api-integration/)

---

- HTML version: https://www.matthewswong.com/id/blog/category/web-dev/
- English: https://www.matthewswong.com/en/blog/category/web-dev/
- Site index for agents: https://www.matthewswong.com/llms.txt
- Sitemap: https://www.matthewswong.com/sitemap.xml
- API description (OpenAPI): https://www.matthewswong.com/openapi.json