Web developer blog
RSS FeedWelcome to my blog! Here I will be sharing my thoughts and experiences about web development. The plan is to write a post whenever I solve a problem that I want to remember, or when I learn something new. I hope you find something useful here.
Featured
Handling Form Validation Errors and Resets with useActionState
Published:With React 19 RC announced, the `useActionState` hook is a powerful tool for creating a state based on the result of an action, typically useful with form submissions. However, there are unclear usage patterns and some gotchas that can make it hard to work with. In this blog post, we'll create a validated form using the hook, and we'll see how we can handle form resets and errors with it.
Creating a Reusable SubmitButton with useFormStatus
Published:With React 19 on the horizon, the `useFormStatus` hook is a powerful tool for handling form submissions. It will allow us to create a submit button that can be used across multiple forms, while it handles the form state for us. In this blog post, we'll create a reusable SubmitButton with `useFormStatus`.
Utilizing useOptimistic() Across the Component Tree in Next.js
Published:The React Canary (soon to be React 19) hook useOptimistic is a powerful tool for building fast and responsive UIs. It allows you to update the UI optimistically while waiting for the server to respond. In this blog post, I'll show you how to use useOptimistic across the component tree in Next.js.
Recent Posts
Implementing Feature Flagging with the Next.js App Router
Published:In this blog post, I will show you how to implement a simple version of feature flagging with the Next.js App Router.
Rebuilding "Remix Contacts" in Next.js 14 with Transitions, Server Actions and Prisma
Published:Remix Contacts is Remix's official tutorial. In this post, we'll rebuild it in Next.js 14 using React Server Components, Server Actions, Transitions and Prisma, and compare the two approaches.
Implementing React Hook Form with Next.js 14 and Server Actions
Published:React Hook Form is a popular library for building interactive forms in React. In this blog post, I'll explain how to use React Hook Form with Next.js 14 and Server Actions.
Running Tests with RTL and Vitest on Async and Internationalized React Server Components in Next.js App Router
Published:Considering the relatively new React Server Components (RSC) and Next.js App Router, there is not a lot of documentation on how to test them. In this blog post, I'll explain a method I found to work for running tests with Vitest and RTL (React Testing Library) on React Server Components that utilizes internationalization (i18n) via the next-international package.