Nico's Blog

Validate HTTP request with Zod

hi@nico.fyi (Nico Prananta) — Mon, 10 Nov 2025 00:00:00 GMT

I got tired of writing if-else statements to validate the HTTP request like this: ```tsx:route.ts showLineNumbers export const GET = async (request: Request) => { const { searchParams } = new URL(request.url) const name = searchParams.get('name') if (!name) { return NextResponse.json({ error: 'Name is required' }, { status: 400 }) } return NextResponse.json({ name }) } ``` It got annoying fast when there are more parameters, headers, and body to validate. Multiply that by the number of routes and you'll end up with a lot of repetitive code. So I made [zod-request](https://github.com/nicnocquee/zod-request), a library that allows you to validate the HTTP request with Zod. Here's an example of how to use it in a Next.js Route handler: ```tsx:route.ts showLineNumbers import { z } from "zod"; import { requestSchema, searchParamsSchema, bodySchema, headersSchema, httpMethodSchema, } from "@nicnocquee/zod-request"; // Create the schema for the request const sch

Quick look into the useEffectEvent

hi@nico.fyi (Nico Prananta) — Thu, 02 Oct 2025 00:00:00 GMT

React just released the new version 19.2.0 which brings several new features including the new [useEffectEvent](https://react.dev/reference/react/useEffectEvent) hook. The doc says that it is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an Effect Event. Thanks to a quick chat with [Dan Abramov](https://bsky.app/profile/nico.fyi/post/3m27vhlzno22y), I got to realize that my understanding of the hook was initially incorrect. At first I thought it's a way to create a "stable" function that always "sees" the latest state and props. But Dan explained that it actually creates an "unstable" function. It is basically a way to create a function that - always "sees" the latest state and props - doesn't cause an Effect that contains the function to re-run even though the function is "unstable" Let's take a look at this example below which I adopted from the React doc. We have a `notify` function (line 32-34) that is created by wrappi

Cancel action or modify payload before useActionState

hi@nico.fyi (Nico Prananta) — Sun, 24 Aug 2025 00:00:00 GMT

Just updated my open source React hook [useResettableActionState](https://github.com/nicnocquee/use-resettable-action-state). At the beginning, I made it to allow me to [reset the state after submitting the form using useActionState](/blog/reset-state-from-react-useactionstate). Now it also allows you to cancel the action or modify the payload before calling the server action. ## Cancelling the action Before submitting a form, you may want to cancel the action if the entered values are not valid. For example, when updating a user's password, you may want to cancel the action if the user fails to repeat the new password correctly. In this case, you can provide a function to the new `beforeAction` argument. Code example: ```tsx:app/page.tsx showLineNumbers {10-15} 'use client'; import { doSomething } from './actions'; import { useResettableActionState } from 'use-resettable-action-state'; export default function Form({ initialState }: { initialState: { password: string | null, error

Taming React Component

hi@nico.fyi (Nico Prananta) — Sun, 17 Aug 2025 00:00:00 GMT

As a project grows, the codebase inevitably becomes more complex. This is where the concept of clean code comes in. Clean code is a set of principles and practices that help developers write code that is easy to understand, maintain, and extend. In React, the complexity of a component is often caused by these factors: the number of props, the number of states, and the number of effects. In this post, I'll focus on the issue of states and effects. ## React's Two Towers I'm pretty sure this is not a new concept, but I've come to realize that a React component can be seen as having two parts: **the user interface and the business logic**. Consider the following simple component: ```tsx:component.tsx showLineNumbers {4-13, 16-21} import { useState, useEffect } from 'react' const Component = () => { const [count, setCount] = useState(0) const [name, setName] = useState('') useEffect(() => { console.log('count', count) }, [count]) useEffect(() => { console.log('name

How to use multiple Prisma schemas in a Next.js monorepo

hi@nico.fyi (Nico Prananta) — Mon, 21 Jul 2025 00:00:00 GMT

Monorepos have come a long way since the days of Lerna. When I tried them before, it was painful. Lots of things were not working as expected. But now, it's a lot better. I've been using [Turborepo](https://turborepo.com) for a while now and it's been great. It got me to the point where I always want to start a new project with it. However, there are still some things that don't just work. One of those things is having [Prisma as a shared package in a monorepo](https://www.prisma.io/docs/guides/turborepo#1-create-your-monorepo-using-turborepo). When a Next.js app in the monorepo uses the shared Prisma package, you'll run into runtime errors when deployed to serverless environments like Vercel or Netlify. ![Netlify Prisma Monorepo Next Error](/static/images/articles/netlify-prisma-monorepo-next-error.png) ``` This is likely caused by a bundler that has not copied "libquery_engine-rhel-openss1-3.0.x.so.node" next to the resulting bundle. Ensure that "libquery_engine-rhel-openss1-3.0.

Introducing DataQueue

hi@nico.fyi (Nico Prananta) — Tue, 15 Jul 2025 00:00:00 GMT

There are so many ways to run a long-running process in the background when you use modern React frameworks like Next.js, Remix, etc. You can spin your own Redis and use BullMQ as shown in [this guest post](/blog/long-running-jobs-nextjs-redis-bull), or use a managed service like Trigger.dev. But that means adding additional technology stack to your project and, more often than not, you need to pay for the service. Even rolling your own Redis is not free because you need to pay for the storage. In my projects at the company where I work, we needed to defer a relatively long-running task to a background job to keep the user experience smooth. Since we already use PostgreSQL for our database, I decided to use it as the storage for the background job queue. So I made an open source library called [DataQueue](https://dataqueue.dev) to handle this. It's a background job queue for Node.js and PostgreSQL with type-safe support with TypeScript. ![](https://docs.dataqueue.dev/_next/image?ur

How to test React Server Component

hi@nico.fyi (Nico Prananta) — Sun, 06 Jul 2025 00:00:00 GMT

Ever since Next.js supported React Server Components, I've been using them in my projects. I really enjoy using them because it just makes sense. Every component that needs data from the server doesn't need to fetch the data from the browser. Less code, less complexity, fewer bugs. But even after years of being released to the public, neither the Next.js team nor the React team has provided a way to test React Server Components. Not even LLMs know how to do it, which is understandable because they cannot actually think. But luckily, Next.js and React are open source, and I wasn't the only one who wanted to test React Server Components. I found this [single gist](https://gist.github.com/sroebert/a04ca6e0232a4a60bc50d7f164f101f6) by [Steven Robert](https://gist.github.com/sroebert) that can be used to test React Server Components. It's basically this: ```typescript // From https://gist.github.com/sroebert/a04ca6e0232a4a60bc50d7f164f101f6 import type { PropsWithChildren, ReactElement

How to take screenshots of your statically exported Next.js site in GitHub Actions workflow

hi@nico.fyi (Nico Prananta) — Tue, 17 Jun 2025 00:00:00 GMT

Our [company's website](https://hyperjump.tech/en?utm_source=nico.fyi&utm_medium=blog) is hosted in [GitHub pages](https://github.com/hyperjumptech/hyperjump.tech). It is a statically exported Next.js app. We still do pull requests and code reviews. But the problem is we don't have the luxury of having preview deployments like when we use Vercel or Netlify. Nevertheless, we still want to be able to see how the website looks like before merging a pull request. So I added a GitHub Actions workflow to take screenshots of the website. It is a simple workflow that runs on every pull request. First we need a script to find all pages after the Next.js app is built, then we use [Puppeteer](https://pptr.dev) to take screenshots of each page. ```javascript:take-screenshots.js showLineNumbers {18, 51-69, 108} const puppeteer = require("puppeteer"); const fs = require("fs"); const path = require("path"); const OUT_DIR = path.join(process.cwd(), "screenshots"); const SERVER_URL = "http://local

Stop mocking Prisma in tests - Part 1

hi@nico.fyi (Nico Prananta) — Mon, 16 Jun 2025 00:00:00 GMT

One of my pet peeves with testing in web development is mocking. So many devs tend to be purists who insist that the unit under test should be the only thing being tested, and that's why they mock everything. In projects that use Prisma or any other ORM, developers mock the ORM client when the function under test needs database access. Let's take a look at a simple example: a login process. We may have a function like this: ```typescript:login.ts export const login = async (email: string, password: string) => { const user = await prisma.user.findUnique({ where: { email }, }) if (!user) { throw new Error('User not found') } // In real life, we would compare the stored hashed password with the provided password's hash if (user.password !== password) { throw new Error('Invalid password') } return user } ``` A test for this function might look like this: ```typescript:login.test.ts showLineNumbers {6-15, 34, 40-42} // src/auth/login.test.ts import { desc

Multiple Async Local Storage

hi@nico.fyi (Nico Prananta) — Sun, 15 Jun 2025 00:00:00 GMT

In the last post, I wrote about [Async Local Storage](/blog/async-local-storage-to-prevent-props-drilling) and how it can be used to prevent prop drilling in Next.js Route Handlers because it acts like context in React. In React, you can have multiple contexts to keep the code modular instead of having a single huge context. With a little bit of a trick, it can also be done in async local storage. Let's say we have a route handler that can accept a `sort` query parameter and an `id` path parameter. These `sort` and `id` parameters are used in some functions to fetch data from a database. In Next.js, the search parameters and path parameters are only exposed in the route handler. Using async local storage, we can create a context for the search parameters and path parameters, and make it available to any functions that need them. In the previous post, we already created a context for the user. Now, we will create a context for the request, which is very similar to the user context.

Use Async Local Storage to prevent props drilling in Next.js Route handlers

hi@nico.fyi (Nico Prananta) — Mon, 09 Jun 2025 00:00:00 GMT

When a private API endpoint is called, the handler should check if the request came from an authorized user before doing anything else. Usually the function that checks the request returns a user object if the request is authorized. Then this user object can be used by other functions in the handler. When there are multiple functions in the handler, passing the user object as a parameter to each function is tedious. Not to mention when there are nested functions that need to access the user object. This props drilling is already cumbersome with just single object. Imagine when there are multiple objects that need to be passed around. This is where [Async Local Storage](https://nodejs.org/api/async_context.html) comes in. It's like React Context but for Node.js functions. It allows you to store data in a "store" that is accessible to all functions, callbacks, and promise chains within the same execution context. It's relatively easy to use. First we create a new Async Local Storage

How to handle date and time correctly in your fullstack JS web app

hi@nico.fyi (Nico Prananta) — Sat, 07 Jun 2025 00:00:00 GMT

Handling date and time correctly in your fullstack JS web app is pretty tricky and can cause a subtle bug. ## The problem This just happened to me. I got a report from my team mate that our website displayed the wrong date and time. In our backend, the admin who resides in the Switzerland entered June 18th, 2025 and time 22:00 from our dashboard. But on the website where the date was displayed, it was displayed as May 19th, 2025. The bug was in the API end point where the date and time was stored in the database in UTC, i.e., 2025-06-18T22:00:00Z. Which is wrong because the admin intended to enter June 18th, 2025 at 22:00 in the local time of Switzerland. When another API end point was called to get the date and time, it was displayed and formatted using the user's browser's timezone. This is why the date was displayed as May 19th, 2025 when the user is in Switzerland. ## The solution There are two ways to handle this. I can either convert the date and time to UTC in the user's b

Is Vibe Coding the Future?

hi@nico.fyi (Nico Prananta) — Mon, 05 May 2025 00:00:00 GMT

I recently stumbled upon the term "vibe coding" through TikTok videos. It refers to using AI tools to generate code and drag-and-drop automation tools to handle business logic in apps. This trend leaves me with mixed feelings. While it's impressive to see people rapidly creating apps and generating significant income, **it's concerning that many don't understand the underlying code**. Tools like Cursor, Copilot, Supermaven, and N8N have made app creation accessible to anyone, regardless of coding knowledge. As an experienced developer, I find myself hesitant to fully embrace these AI tools because I'm particular about code quality. My experiments with AI app builders like v0 and Bolt.new often result in code that doesn't meet my standards and contains TypeScript errors requiring manual fixes. Meanwhile, those new to development seem unbothered by these issues as long as their apps function. Some even claimed that they have made tens of thousands of dollars from the apps the AI built

How to deploy Bluesky Later to DigitalOcean Droplet

hi@nico.fyi (Nico Prananta) — Tue, 18 Feb 2025 00:00:00 GMT

A few days ago I wrote about how to [deploy Bluesky Later on your own server using Coolify](/blog/how-to-deploy-blueskylater-using-coolify). While I recommend it to start using Bluesky Later in your own server, it is possible to run it without Coolify. In this post, I will show you how to run Bluesky Later on a DigitalOcean Droplet using Docker. First, you need to have a DigitalOcean account. If you don't have one, you can create one [here](https://m.do.co/c/1a4db88dc63c). Then create a new Droplet using the [Docker image](https://marketplace.digitalocean.com/apps/docker) which you can find in the DigitalOcean Marketplace. For the Droplet size and type, I recommend using the "Basic" type with "Regular (Disk type: SSD)" CPU option, and the lowest price spec ($6/month). Once the Droplet is created, enter the server using SSH. Then you need to install docker-compose first: ```bash apt install docker-compose ``` Next, create a `docker-compose.yml` file in the root directory of the ser

How to automatically update GitHub project on new release

hi@nico.fyi (Nico Prananta) — Thu, 13 Feb 2025 00:00:00 GMT

## Back story In the company I work for, we use [GitHub Projects](https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects) to track our work. It's very simple and easy to use and has great integration with GitHub repositories and Issues. But it lacks a feature that would be really useful: **automatically update the project when a new release is published**. In our team, we create a new release every time we publish a new version of our software. When a release is created, it automatically creates a new commit in a release branch which triggers a production deployment in Vercel. When creating a new release, I usually simply set the new tag and use the "Generate release notes" feature to automatically get the release notes from the diff between the previous release and the new one. The generated release notes include the links to pull requests and their authors. This is great because everyone in the company can see what has been de

How to deploy Bluesky Later on your own server using Coolify

hi@nico.fyi (Nico Prananta) — Wed, 12 Feb 2025 00:00:00 GMT

A few months ago I released an open source project called [Bluesky Later](https://blueskylater.com) which is a web app that allows you to schedule Bluesky posts. The app has two modes: Browser mode and Self-hosted mode. In Browser mode, the app runs in the browser and doesn't need any server to run. In Self-hosted mode, the app runs on a server and you can schedule posts from anywhere. I have created a docker-compose file so that anyone can easily run Bluesky Later on their own server or computer. In the docker-compose file, all parts of the app are included: a Postgres database, the API server, the frontend, and the cron. So you can run `docker-compose up` and everything will be up and running in a few minutes. I am using the app on my own server but I don't run the `docker-compose up` command directly. Instead, I use [Coolify](https://coolify.io) to deploy the app. Coolify is a very cool project and [I've been writing about it several times](https://nico.fyi/tags/coolify). Instal

Send E-mail after Creating a New Release in GitHub

hi@nico.fyi (Nico Prananta) — Tue, 28 Jan 2025 00:00:00 GMT

In the company I work for, there are some team members who wanted to be notified when a new release is deployed to production. Since we use GitHub, I can easily set up a step in our GitHub Actions workflow to send an e-mail to the team member when a new release is created. ```yml:deploy.yml {20-43} showLineNumbers name: Deploy to production websites on: workflow_dispatch: release: types: [created] jobs: deploy: runs-on: ubuntu-latest steps: - name: Cancel Previous Runs uses: styfle/cancel-workflow-action@0.9.1 - name: Checkout uses: actions/checkout@v3 with: fetch-depth: 0 - name: Updating release run: | echo "Release the new version" # Do something like push to Vercel - name: Send email uses: dawidd6/action-send-mail@v3 with: server_address: smtp.fastmail.com server_port: 465 username: ${{ secrets.FASTMAIL_EMAIL }} password:

Be careful with useSyncExternalStore

hi@nico.fyi (Nico Prananta) — Sun, 17 Nov 2024 00:00:00 GMT

A few articles ago I wrote about using [useSyncExternalStore to write, read, and react to changes in the local storage](/blog/ssr-friendly-local-storage-react-custom-hook). I even created my own useLocalStorage hook in the same article. But the hook has one flaw. You can only read and write string values because local storage only stores strings. So I gave it a try to store an object in local storage. My first attempt was like this. ```typescript:app/use-local-storage.ts showLineNumbers const useLocalStorage = (key: string, initialValue: T) => { const data = useSyncExternalStore( (onChange) => { window.addEventListener("storage", onChange); return () => { window.removeEventListener("storage", onChange); }; }, () => { const data = localStorage.getItem(key); return data ? JSON.parse(data) : initialValue; }, () => initialValue ); }; ``` But to my surprise, this code caused an infinite render loop. This happened because

How to generate subtitles from video using LLM in a single command

hi@nico.fyi (Nico Prananta) — Thu, 14 Nov 2024 00:00:00 GMT

This post is just a quick reminder of how to generate subtitles from video using [subtitles-generator](https://github.com/avivharuzi/subtitles-generator) in a single command. ```shell npx subtitles-generator -i /path/to/video.mp4 -m base.en ``` It works pretty well. The first time you run it, it would take a while to download the model. But after that, it's super fast. It's also super easy to use. Since I don't use it often, I put this up in my blog so I can easily find it again.

Bluesky later: Schedule Bluesky post in the future for FREE

hi@nico.fyi (Nico Prananta) — Tue, 12 Nov 2024 00:00:00 GMT

Unless you have been living under a rock for the past few days, you surely have heard about the US election. Due to the result, many people I follow on Twitter have moved to [Bluesky](https://bsky.app) for reasons I'll let you figure out yourself - it's not hard to understand. While I created an account on Bluesky a while back, I haven't been really active on it. Not only because there weren't many people there, but it also lacked some features like GIFs! But that's no longer the case. And since I've been thinking of leaving Twitter due to the annoying billionaire, I decided to hang out more on Bluesky and cancelled my Twitter Pro account. So far it has been a nice experience. These are the features I like the most: - I can use my domain nico.fyi as my handle! 🤯 - The starter pack created by the community is really helpful to get started. ❤️ - No ads! 🎉 - API is free! 😋 But there's one thing I'm missing. I want to schedule posts for the future because I don't want to flood my f

Implementing Exclusive Relationships in PostgreSQL and Prisma

hi@nico.fyi (Nico Prananta) — Sat, 02 Nov 2024 00:00:00 GMT

Recently we needed to implement a system where a user can do the following by themselves: - Request for a first-aid card replacement. - Cancel their course enrollment. - Reschedule their course enrollment. And then our admins would like to be able to see the self-service actions that the user has performed with the following information: - Name - Course name - Type of action - Date - Paid amount My co-worker first implemented the model in Prisma something like this: ```prisma:prisma/schema.prisma {11-13} showLineNumbers enum SelfServiceActionType { REQUEST_FIRST_AID_CARD_REPLACEMENT CANCEL_COURSE_ENROLLMENT RESCHEDULE_COURSE_ENROLLMENT } model SelfServiceAction { id Int @id @default(autoincrement()) type SelfServiceActionType participantId Int certificateId Int? courseId Int? newCourseId Int? paidAt DateTime? paidAmount Float? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } ``` While there's

Instructions for v0 and GPT to generate high quality React code

hi@nico.fyi (Nico Prananta) — Thu, 31 Oct 2024 00:00:00 GMT

I've been using LLMs for the past few months and I can't imagine going back to the old way of writing code. At the beginning, I tried Copilot but didn't like it because it actually slowed me down. The generated code frequently missed parentheses, brackets, etc. So I gave it up. Then I tried [Supermaven](https://supermaven.com). It blew my mind. Not only is it fast in showing code suggestions, but it also generates the code that I need. It's like it can read my mind. But it actually only reads the files across the project. I feel so productive with it. And what I like the most is that **it generates the code that I want**. It's like having a jetpack that can boost me to the finish line. It's different from using ChatGPT where I _ask_ it to create something for me. With Supermaven, I know what I want to write and it will generate it for me. Then came along [v0](https://v0.dev) by Vercel. It wasn't great. The generated components weren't very good. I just didn't have the knack for writ

On-the-fly feature flag in Next.js with Google Sheets

hi@nico.fyi (Nico Prananta) — Wed, 16 Oct 2024 00:00:00 GMT

Feature flags are a great way to manage feature toggles in your application. They allow you to enable or disable certain features. There are several common reasons why you might want to use feature flags: - You want to release a new feature to a subset of your users. - You want to test a new feature before releasing it to all users. - You want to disable a feature for a specific user or group of users. **Feature flags are also useful when you or your team ships to production frequently and you want to make sure that you don't accidentally deploy a feature that is not ready.** By using feature flags, you can hide unfinished features from your users until they are ready to be released. For example, maybe the UI of your app is ready but the backend is not. You can use feature flags to hide corresponding UI until the backend is ready. There are several ways you can implement global feature flags that affect the entire application: - **You can set the flags during build time**: You sto

Running Long Jobs with Queues in Next.js using Bull and Redis

hi@nico.fyi (Nico Prananta) — Fri, 11 Oct 2024 00:00:00 GMT

ℹ️ This is a guest post by my awesome fellow dev in [Hyperjump](https://hyperjump.tech/en?utm_source=nico.fyi&utm_medium=blog) Technology, [Denny Pradipta](https://dennypradiptablog.vercel.app).

When building web apps with Next.js, handling long-running tasks like data processing or sending emails can be tricky. You don’t want to keep your users waiting while the server completes the job, right? This is where background processing comes in handy. In this article, I will share how we handle long processes in [our uptime monitoring tool called Neo Sense](https://console.neosense.id?utm_source=nico.fyi&utm_medium=referral&utm_campaign=blogpost) using [Bull](https://github.com/OptimalBits/bull)—a powerful queue system built on top of Redis. Bull makes it easy to offload tasks to background workers, keeping your app fast and responsive. Plus, Redis helps manage the queue efficiently. ## Prerequisit

How to prevent re-render in React with Tailwind CSS

hi@nico.fyi (Nico Prananta) — Thu, 10 Oct 2024 00:00:00 GMT

Recently I was tasked with updating a minor change in [Hyperjump Technology's website](https://hyperjump.tech/en?utm_source=nico.fyi&utm_medium=blog). But I thought it was a good chance to completely rewrite the website from scratch using Next.js because previously it was just a bunch of HTML and CSS files (I was lazy 😂). The good thing was we already used Tailwind CSS for the styling. So I simply just needed to copy the HTML to the new Next.js-powered website. In the old website, there is a sticky navigation bar on the top of the page which has transparent background when the scoll position is at the top. But when user scrolls down, the background becomes white. It was implemented as follows: ```html:index.html showLineNumbers ``` ```javascript:main.js {7,10} showLineNumbers var header = document.getElementById("header"); document.addEventListener("scroll", function () { /*A

Code based routing in Next.js

hi@nico.fyi (Nico Prananta) — Sun, 06 Oct 2024 00:00:00 GMT

Some people seem to hate the file-based routing in Next.js. They prefer to use code-based routing instead. And with [Remix, a.k.a, React Router 7](https://x.com/remix_run/status/1841926043080523813) releasing a new config based routing, many people seem to be excited about it. But many don't seem to know that it has been possible to do code-based routing in Next.js. You just have to use the [optional catch-all segments of the dynamic routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) and library like [path-to-regexp](https://github.com/pillarjs/path-to-regexp). First, create a file in `app/[[...paths]]/page.tsx`: ```typescript:app/[[...paths]]/page.tsx {6-9, 26-36} showLineNumbers import UserIdPage from "@/page-components/user-id"; import UsersPage from "@/page-components/users"; import { match } from "path-to-regexp"; // define your routes here const routes = [ { matcher: match("/users/:userId"), component: UserIdPa

SSR-friendly Custom React Hook for Local Storage Read and Write

hi@nico.fyi (Nico Prananta) — Sun, 29 Sep 2024 00:00:00 GMT

import { Alert } from '@/components/ui/alert' Update: Use my [useLocalStorage hook](https://github.com/nicnocquee/use-local-storage) for convenience. There are hundreds of [custom React hooks to access the local storage](https://www.npmjs.com/search?q=use-local-storage) out there. But I was tempted to create my own using [useSyncExternalStore](/blog/use-sync-external-store-in-react) since I figured it's the proper hooks for this kind of use case. Now I'm sure there are already a package that does exactly what I want, but I wanted to create it by myself, for the sake of learning. This was my first attempt. ```jsx:app/use-local-storage.ts showLineNumbers const useLocalStorage = ( key: string, initialValue: string ) => { const data = useSyncExternalStore( (onChange) => { window.addEventListener("storage", onChange); return () => { window.removeEventListener("storage", onChange); }; }, () => { cons

How to manipulate search params in Next.js easily

hi@nico.fyi (Nico Prananta) — Sat, 28 Sep 2024 00:00:00 GMT

In Next.js App Router, you can get the current URL's query string by using [`useSearchParams` hook](https://nextjs.org/docs/app/api-reference/functions/use-search-params). When called, **it returns read-only version of the URLSearchParams**. That means, if you to set a new value to the search params, you need to create a new search params string by merging the current search params with the new value like this: ```jsx {2,5,10-11} showLineNumbers 'use client'; import { useSearchParams, useRouter } from 'next/navigation' const Component = () => { const searchParams = useSearchParams(); const router = useRouter(); const createQueryString = useCallback( (name: string, value: string) => { const params = new URLSearchParams(searchParams.toString()) params.set(name, value) return params.toString() }, [searchParams] ) return (

How to reset the state of useActionState in React

hi@nico.fyi (Nico Prananta) — Tue, 24 Sep 2024 00:00:00 GMT

I wrote before about how easy it is to create [infinite scroll with server action and useActionState in Next.js](/blog/infinite-scroll-with-server-action-and-use-action-state). `useActionState` is that hook that I'm so glad that it's created to replace the confusing and less capable `useFormState` hook. But there's one thing that is still bugging me. The `useActionState` hook doesn't have a way to reset the state. It's kinda weird that the state cannot be reseted easily. Imagine I have a form that allows user to submit something. When the submission completes successfully, they will see some message from the server. But then I want them to be able to reset the form and fill the fields with another information. When they reset the form, the message from the server should not be shown anymore. For example, ```typescript:app/products/page.tsx showLineNumbers "use client"; import { useRef, useActionState } from "react"; import { doSomething } from "./actions"; export default function F

How to protect Next.js App Router's page with authorization check

hi@nico.fyi (Nico Prananta) — Mon, 23 Sep 2024 00:00:00 GMT

If you haven't read it, Next.js has updated their docs [Authentication and Authorization](https://nextjs.org/docs/app/building-your-application/authentication). One of the most important gems in the docs, in my opinion, is the [Authorization Check](https://nextjs.org/docs/app/building-your-application/authentication#authorization-check) section. Since there are a lot of parts that are involved when a request is made to a server such as middleware, layout, page, etc, it's great to finally have an official guide on how to perform authorization checks. In this post I'm going to share a practical way to check authorization when a user visits a page. But before that, you should know the three important take aways from the docs: - Perform _only_ optimistic authorization checks in the middleware. It's a fancy way of saying that you should do checks that doesn't require any database or other external APIs because it can cause performance issues since middleware runs on every request by defa

How to create infinite scroll with server action and useActionState in Next.js

hi@nico.fyi (Nico Prananta) — Sun, 22 Sep 2024 00:00:00 GMT

Let's imagine we want to show a list of posts. At the bottom of the list, we want to show a button that allows the user to load more posts. Before [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) and [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations), we would have to - store the posts in a state using `useState` - fetch the posts from an API endpoint using `fetch` - store the loading state in a state using `useState` - create the API end point But Server Actions and [`useActionState`](https://react.dev/reference/react/useActionState) simplify all of this. First, let's create a page component that [starts the work of getting the posts from the database and stream the promise to the client](http://localhost:3000/blog/simplify-data-fetching-with-rsc-suspense-and-use-api-in-next-js) as shown in the following code: ```typescript:app/infinite-scroll/page.tsx {6,11}

How to deploy a single file website to Vercel

hi@nico.fyi (Nico Prananta) — Sun, 15 Sep 2024 00:00:00 GMT

Vercel is well known for deploying Next.js apps. But it is less known that it also supports [deploying projects from other frameworks](https://vercel.com/docs/frameworks/more-frameworks) like Angular, Solid, Svelte, and many more. Something even more obscure is that you can deploy a single file website to Vercel. The secret is to use Vercel's Serverless functions. All you have to do is create a file in a directory called `api`, e.g., `api/hello.js`. In this file, you need to export a `GET` function that will be called by Vercel when the user visits the `/api/hello` endpoint. ```typescript:api/hello.js export function GET(request) { return new Response(`Hello from ${process.env.VERCEL_REGION}`); } ``` ## Serving HTML To show a website in this end point, we need to return a HTML response instead of text response as shown in the example above. ```typescript:api/hello.js export async function GET() { const html = `

Interesting behaviour of useTransition in Next.js

hi@nico.fyi (Nico Prananta) — Tue, 10 Sep 2024 00:00:00 GMT

One of the very common user interaction in a web application is calling an API end point where data mutation is performed when a button is clicked. Since it performs a mutation, **usually we don't want the user to be able to click the button again until the mutation is completed**. Otherwise there will be inconsistency in the user's data. For example, user needs to click a button to spend some points. But if the button is clicked again before the points are spent, the points will be deducted again. The common way to solve this little problem in React is to use `useState` to store the loading state of the API call. Then we can use the `disabled` prop to disable the button until the loading state is `false`. ```typescript:do-something.tsx {3,6,10,13,22} showLineNumbers "use client"; import { useState } from "react"; export default function DoSomething() { const [isPending, setIsPending] = useState(false); return (