React

Somehow it’s already 2026. I’ve been building side projects and working professionally for a little over four years now, mainly focusing on web frontend and backend development. More recently, my day‑to‑day has shifted towards mobile development with React Native due to work needs. Along the way, I’ve gone through several rounds of switching tools and architectures. On top of that, I’ve been relying on AI to write code more and more often, and I now have specific expectations and conventions for how that code should be structured so that humans can still read and maintain it. This article is my attempt to organize and document the development tools and architectures I’ve used from the past up to now.

In the Next.js App Router, Client Components can’t import Server Components directly, so passing live client state (like a search input) into an RSC requires a different pattern. This article shows a practical approach: sync state to the URL via search params, let the Server Component page read the latest value through the searchParams prop, and pass it down to your RSC for data fetching and rendering. It also covers the recommended Next.js APIs (useSearchParams, useRouter) and notes how nuqs can make query-string state management cleaner and type-safe.

Struggling with react-hydration-error in your Next.js app? This article breaks down how Hydration works in React, explains the difference between SSR and CSR in Next.js, and shares three practical solutions to fix Hydration Errors for smoother, error-free rendering.

React Server Components (RSC) are a next‑generation React feature that moves part of rendering to the server, enabling streaming, smaller bundles, better performance, and tighter security in modern Next.js applications.

In 2024, I spent nearly a year refactoring my personal website. Since I first started practicing with Next.js and TypeScript in 2021, this project has accompanied me for three years. At that time, I was unfamiliar with React, and it was also my first time using TypeScript in a project, so I decided to use this project to practice the framework and language, as well as cultivate a writing habit. As my technical skills grew, I began refactoring and transforming the original codebase, which led to the current appearance of the website.