# Thoughts & Stories: Web Dev

> Sharing my experiences, learnings, and adventures in tech and beyond.

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

- [How to Build an Accessible Website in Next.js (Beginners)](https://www.matthewswong.com/en/blog/cara-membuat-website-accessible-nextjs/)
- [How to Run the Node Test Runner in Next.js for Beginners](https://www.matthewswong.com/en/blog/cara-menjalankan-node-test-runner-nextjs/)
- [How Next.js Caching Works: Static, Dynamic and Revalidate](https://www.matthewswong.com/en/blog/cara-kerja-caching-rendering-nextjs-static-dynamic/)
- [How to Improve Core Web Vitals in Next.js for Beginners](https://www.matthewswong.com/en/blog/cara-meningkatkan-core-web-vitals-nextjs/)
- [How to Build Next.js Middleware: Matcher, Redirect, Rewrite](https://www.matthewswong.com/en/blog/cara-membuat-middleware-nextjs/)
- [How to Build an API in Next.js with Route Handlers (route.ts)](https://www.matthewswong.com/en/blog/cara-membuat-api-nextjs-route-handlers/)
- [How to Add SEO Metadata in the Next.js App Router for Beginners](https://www.matthewswong.com/en/blog/cara-membuat-seo-metadata-nextjs-app-router/)
- [How to Build a Playwright Smoke Test in GitHub Actions](https://www.matthewswong.com/en/blog/cara-smoke-test-playwright-github-actions/)
- [Server vs Client Components in Next.js: A Beginner Guide](https://www.matthewswong.com/en/blog/perbedaan-server-component-client-component-nextjs/)
- [Next.js Standalone Docker Image Size: A Real Dockerfile](https://www.matthewswong.com/en/blog/nextjs-standalone-docker-image-size/)
- [Claude Code Plugin for Next.js: Skill, Hook, Subagent](https://www.matthewswong.com/en/blog/claude-code-plugin-nextjs-stack-toolkit/)
- [Claude Code Artifacts: Publish a Page From a Session](https://www.matthewswong.com/en/blog/claude-code-artifacts-publishing-guide/)
- [Answer Engine Optimization (AEO): Get Cited by AI Search](https://www.matthewswong.com/en/blog/answer-engine-optimization-ai-search/)
- [Speculation Rules API: Instant Prerender and Prefetch in Chrome](https://www.matthewswong.com/en/blog/speculation-rules-api-prerendering/)
- [JavaScript Temporal API: The Modern Replacement for Date](https://www.matthewswong.com/en/blog/javascript-temporal-api-guide/)
- [Next.js 16: Migrate middleware.ts to proxy.ts](https://www.matthewswong.com/en/blog/nextjs-16-proxy-ts-migration/)
- [Next.js Cache Components and the use cache Directive](https://www.matthewswong.com/en/blog/nextjs-cache-components-use-cache/)
- [Next.js Hydration Errors: Causes and How to Fix Them](https://www.matthewswong.com/en/blog/nextjs-hydration-errors-fix/)
- [Securing Next.js Server Actions: Auth, IDOR & Zod Validation](https://www.matthewswong.com/en/blog/nextjs-server-actions-security/)
- [Astro 5 Server Islands & Content Layer API: What's New](https://www.matthewswong.com/en/blog/astro-5-server-islands-content-layer/)
- [Svelte 5 Runes: $state, $derived, $effect Reactivity](https://www.matthewswong.com/en/blog/svelte-5-runes-reactivity/)
- [HTMX and the Hypermedia-Driven Application Approach](https://www.matthewswong.com/en/blog/htmx-hypermedia-driven-apps/)
- [Tailwind CSS v4: Oxide Engine and CSS-First Config](https://www.matthewswong.com/en/blog/tailwind-css-v4-oxide-engine/)
- [React Compiler: Automatic Memoization Without useMemo](https://www.matthewswong.com/en/blog/react-compiler-automatic-memoization/)
- [Biome vs ESLint + Prettier: One Rust Toolchain to Replace Two](https://www.matthewswong.com/en/blog/biome-vs-eslint-prettier-toolchain/)
- [Rolldown: Vite's Rust Bundler Replacing Rollup](https://www.matthewswong.com/en/blog/vite-rolldown-rust-bundler/)
- [Debouncing and Throttling in React the Right Way](https://www.matthewswong.com/en/blog/debouncing-throttling-react-hooks-guide/)
- [React Server Components vs Islands Architecture](https://www.matthewswong.com/en/blog/react-server-components-vs-islands-architecture/)
- [TanStack Router: Fully Type-Safe Routing in React](https://www.matthewswong.com/en/blog/tanstack-router-type-safe-routing/)
- [Valibot vs Zod: Bundle Size and Tree-Shaking](https://www.matthewswong.com/en/blog/valibot-vs-zod-bundle-size/)
- [Web Workers in React: Offload the Main Thread with Comlink](https://www.matthewswong.com/en/blog/web-workers-offload-main-thread-react/)
- [What Changed in Zod 4: Performance, Mini, and Migration](https://www.matthewswong.com/en/blog/zod-4-schema-validation-performance/)
- [Next.js Partial Prerendering: Static Shell, Dynamic Holes](https://www.matthewswong.com/en/blog/nextjs-partial-prerendering-ppr/)
- [Server-Sent Events in Next.js: Simpler Than WebSockets](https://www.matthewswong.com/en/blog/server-sent-events-nextjs-streaming/)
- [React 19 use() and Actions: The New Async Model](https://www.matthewswong.com/en/blog/react-19-use-hook-actions-guide/)
- [TanStack Query in the Next.js App Router: Prefetch and Hydrate](https://www.matthewswong.com/en/blog/tanstack-query-nextjs-app-router/)
- [shadcn/ui: Copy-Paste Components as an Architecture](https://www.matthewswong.com/en/blog/shadcn-ui-component-architecture/)
- [Optimizing INP: The Core Web Vital That Replaced FID](https://www.matthewswong.com/en/blog/web-vitals-inp-optimization-2026/)
- [Streaming and Suspense in Next.js: Loading UI That Feels Fast](https://www.matthewswong.com/en/blog/nextjs-streaming-suspense-patterns/)
- [Zustand vs Redux Toolkit: Choosing React State in 2026](https://www.matthewswong.com/en/blog/zustand-vs-redux-toolkit-state/)
- [Type-Safe Forms with React Hook Form and Zod](https://www.matthewswong.com/en/blog/react-hook-form-zod-type-safe-forms/)
- [Dynamic Open Graph Images with Next.js ImageResponse](https://www.matthewswong.com/en/blog/nextjs-dynamic-og-image-generation/)
- [Next.js Server Actions in Production: Forms, Validation, Security](https://www.matthewswong.com/en/blog/nextjs-server-actions-production/)
- [React Server Components: The Mental Model That Finally Clicks](https://www.matthewswong.com/en/blog/react-server-components-mental-model/)
- [Self-Hosting Web Fonts for Performance: next/font Done Right](https://www.matthewswong.com/en/blog/self-hosting-web-fonts-performance/)
- [Design Tokens with Tailwind: A Theme That Survives a Rebrand](https://www.matthewswong.com/en/blog/design-tokens-tailwind-theme/)
- [What next/image Actually Does: srcset, AVIF, and the Cache](https://www.matthewswong.com/en/blog/nextjs-image-optimization-internals/)
- [Technical SEO for Developers: Canonical, hreflang, JSON-LD](https://www.matthewswong.com/en/blog/technical-seo-checklist-developers/)
- [Building a Production Landing Page That Scores 100 on Core Web Vitals](https://www.matthewswong.com/en/blog/production-landing-page-core-web-vitals/)
- [TypeScript Project Structure for Real-World Apps: What Actually Works](https://www.matthewswong.com/en/blog/typescript-project-structure-real-world/)
- [My Figma to Next.js Component Workflow](https://www.matthewswong.com/en/blog/figma-to-nextjs-component-workflow/)
- [Next.js i18n with next-intl: A Complete Guide From Someone Who Actually Uses It](https://www.matthewswong.com/en/blog/nextjs-i18n-next-intl-guide/)
- [Scalable Next.js Project Structure with App Router](https://www.matthewswong.com/en/blog/nextjs-project-structure-scalable/)
- [How to Build a SaaS in 30 Days with Next.js and Tailwind](https://www.matthewswong.com/en/blog/build-saas-30-days-nextjs-tailwind/)
- [Building Type-Safe REST APIs with NestJS and Prisma](https://www.matthewswong.com/en/blog/type-safe-api-nestjs-prisma/)
- [SEO-First Next.js: The Complete Checklist for 2026](https://www.matthewswong.com/en/blog/seo-first-nextjs-checklist/)
- [React Query vs SWR: Which to Use in 2026](https://www.matthewswong.com/en/blog/react-query-vs-swr/)
- [Real User Monitoring: Why Lab Data Lies and Field Data Wins](https://www.matthewswong.com/en/blog/real-user-monitoring-web-performance/)
- [Image Optimization in Next.js: WebP, AVIF, and the Settings I Actually Ship](https://www.matthewswong.com/en/blog/image-optimization-nextjs-webp-avif/)
- [Next.js Caching in 2025: ISR, SSR, and When to Use Each](https://www.matthewswong.com/en/blog/nextjs-caching-isr-ssr-strategy/)
- [Database Connection Pooling in NestJS: PgBouncer and Why You Need It](https://www.matthewswong.com/en/blog/database-connection-pooling-nestjs/)
- [PostgreSQL Full-Text Search Without Elasticsearch: What I Use in ERP Projects](https://www.matthewswong.com/en/blog/postgresql-full-text-search-no-elasticsearch/)
- [Cursor vs Offset Pagination: The 17x Performance Gap at Scale](https://www.matthewswong.com/en/blog/cursor-vs-offset-pagination/)
- [API Versioning in NestJS: The Strategy I Actually Ship](https://www.matthewswong.com/en/blog/api-versioning-nestjs-strategy/)
- [GraphQL vs REST in 2025: Which One for Your Next Project?](https://www.matthewswong.com/en/blog/graphql-vs-rest-2025/)
- [OpenAPI and Swagger in NestJS: Auto-Generated Docs That Stay Accurate](https://www.matthewswong.com/en/blog/openapi-swagger-nestjs/)
- [Environment Variables and Secrets in Next.js: What Goes Wrong and How to Fix It](https://www.matthewswong.com/en/blog/environment-variables-secrets-nextjs/)
- [E2E Testing Next.js Apps with Playwright: Setup, Patterns, and CI Integration](https://www.matthewswong.com/en/blog/e2e-testing-playwright-nextjs/)
- [Accessibility Audit for Next.js Apps: Automating WCAG Compliance](https://www.matthewswong.com/en/blog/accessibility-audit-nextjs/)
- [npm Dependency Management and Security Auditing: What I Actually Do](https://www.matthewswong.com/en/blog/npm-dependency-management-audit/)
- [Security Headers in Next.js: The Config I Actually Ship](https://www.matthewswong.com/en/blog/security-headers-nextjs-configuration/)
- [Dark Mode in Next.js: System-Aware, Flicker-Free, and the Implementation I Ship](https://www.matthewswong.com/en/blog/dark-mode-nextjs-system-aware/)
- [Testing Next.js Apps with Vitest and Jest: A Practical Comparison](https://www.matthewswong.com/en/blog/nextjs-testing-vitest-jest/)
- [Storybook for Component Documentation: Building a Living Design System](https://www.matthewswong.com/en/blog/storybook-component-documentation/)
- [Next.js App Router Migration: Lessons from a Real Project](https://www.matthewswong.com/en/blog/nextjs-app-router-migration-lessons/)
- [Tailwind CSS vs CSS Modules: Which Should You Use in 2025?](https://www.matthewswong.com/en/blog/tailwindcss-vs-css-modules/)
- [Prisma vs TypeORM in NestJS: Which ORM Should You Choose?](https://www.matthewswong.com/en/blog/prisma-vs-typeorm-nestjs-comparison/)
- [NextAuth vs Clerk: Authentication in Next.js Apps in 2025](https://www.matthewswong.com/en/blog/nextauth-vs-clerk-comparison/)
- [WebSockets in NestJS: Building Real-Time Features in Production](https://www.matthewswong.com/en/blog/websockets-nestjs-realtime/)
- [File Upload to S3 in Next.js: The Production Pattern](https://www.matthewswong.com/en/blog/file-upload-s3-nextjs-production/)
- [Resend vs Nodemailer: Transactional Email in 2025](https://www.matthewswong.com/en/blog/resend-vs-nodemailer-email/)
- [Next.js API Routes vs NestJS: Choosing Your Backend in 2025](https://www.matthewswong.com/en/blog/nextjs-api-routes-vs-nestjs/)
- [TypeScript Strict Mode in Production: Why It's Non-Negotiable](https://www.matthewswong.com/en/blog/typescript-strict-mode-production/)
- [React Server Components: When and How to Use Them in Next.js](https://www.matthewswong.com/en/blog/react-server-components-usage/)
- [Next.js Middleware: Real Use Cases Beyond the Docs](https://www.matthewswong.com/en/blog/nextjs-middleware-real-use-cases/)
- [Framer Motion vs CSS Animations: When to Use Each](https://www.matthewswong.com/en/blog/framer-motion-vs-css-animations/)
- [Monorepo with Turborepo: Running Next.js and NestJS Together](https://www.matthewswong.com/en/blog/monorepo-turborepo-setup/)
- [API Rate Limiting in NestJS with Redis: A Production Guide](https://www.matthewswong.com/en/blog/api-rate-limiting-nestjs-redis/)
- [Next.js Error Handling Patterns: From error.tsx to Production](https://www.matthewswong.com/en/blog/nextjs-error-handling-patterns/)
- [BPJS API Integration for Indonesian Developers: A Practical Guide](https://www.matthewswong.com/en/blog/bpjs-api-integration/)

---

- HTML version: https://www.matthewswong.com/en/blog/category/web-dev/
- Bahasa Indonesia: https://www.matthewswong.com/id/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