Forem: Mattia Malonni

Supercharge Your Next.js Forms with next-form-action and useActionState

Mattia Malonni — Wed, 18 Jun 2025 16:12:15 +0000

React 19 and Next.js 15 are bringing radical changes to how we build modern web apps, especially with Server Actions and the new useActionState hook. But working with forms can still feel verbose, repetitive, and error-prone. That's why I built next-form-action: a lightweight, type-safe utility to streamline form handling in full-stack React apps.

In this post, I'll show you how next-form-action makes working with forms using useActionState dramatically simpler and more scalable.

The Problem: Boilerplate and Scattered Logic

Here's what a typical login form looks like using useActionState without any helper library:

'use client'

import { useActionState } from 'react'
import { redirect } from 'next/navigation'

async function login(prevState, formData) {
  const email = formData.get('email') as string
  const password = formData.get('password') as string

  if (!email || !password) {
    return { success: false, message: 'Email and password are required' }
  }

  try {
    const user = await authenticate(email, password)
    redirect('/dashboard')
  } catch {
    return { success: false, message: 'Invalid credentials' }
  }
}

export default function LoginForm() {
  const [state, formAction, isPending] = useActionState(login, { success: true, message: '' })

  return (
    <form action={formAction} className="space-y-4">
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      {state.message && <p className="text-red-500">{state.message}</p>}
      <button disabled={isPending}>{isPending ? 'Logging in…' : 'Login'}</button>
    </form>
  )
}

It's not bad, but:

You have to manually manage state shape
You handle errors and redirects manually
You miss lifecycle events like onSubmit or onSuccess
Reusability and DX could be better

The Solution: `next-form-action`

With next-form-action, you encapsulate the logic cleanly into an action + hook pair. Here's the same login form, refactored using the library:

Step 1: Define Your Action

// actions/login.ts
import { createAction, error, success } from 'next-form-action'

export const loginAction = createAction('login', async (state, formData) => {
  const email = formData.get('email') as string
  const password = formData.get('password') as string

  if (!email || !password) {
    error('Email and password are required')
  }

  try {
    const user = await authenticate(email, password)
    success('Login successful!', { redirect: '/dashboard' })
  } catch {
    error('Invalid credentials')
  }
})

✨ Highlights:

Built-in redirect() support via success()

Simplified error management using error()

Step 2: Use in the Component

'use client'

import { useAction } from 'next-form-action'
import { loginAction } from './actions/login'

export default function LoginForm() {
  const { Form, FormError, isPending } = useAction(loginAction)

  return (
    <Form className="space-y-4">
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <FormError className="text-red-500" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Logging in…' : 'Login'}
      </button>
    </Form>
  )
}

✅ Zero boilerplate. Type safety. Redirects handled. Better separation of concerns.

🧠 Built-in FormError handles dynamic error display based on action response.

Key Features

✅ Type-safe form actions with full TS support
🎣 Hooks-based API with built-in Form, FormError, and lifecycle callbacks
⚙️ Built-in error/redirect/refresh support
- redirect('/path') works natively inside actions
- notFound() automatically triggers Next.js 404
- Refresh current page with { refresh: true }
📦 Lightweight & framework-native – no runtime deps, no magic
🧩 Perfect for App Router and Server Actions

Real-World Use Cases

next-form-action shines in real-world apps where:

✅ You want reliable forms with built-in error handling and automatic error display
🔄 You want clean, declarative redirects and refresh behavior after actions
📊 You want to plug into analytics or logging via onFormSubmit / onFormError
📦 You want to reduce boilerplate and unify form structure across your app

Requirements

React 19+
Next.js 15+ with App Router
TypeScript 5+

Try It Now

Install it with your favorite package manager:

npm install next-form-action

Explore the docs and source:

Final Thoughts

Modern full-stack React deserves ergonomic form handling. next-form-action brings the DX you expect from tools like react-hook-form, while embracing the new world of useActionState and Server Actions.

If you're building anything with React 19 or Next.js 15, give it a shot — and say goodbye to fragile forms and verbose logic.

If you liked this, consider starring the repo, or sharing the library with someone working on Next.js forms. ❤️

How to validate Node + Express requests with Joi middleware

Mattia Malonni — Tue, 14 May 2024 09:29:23 +0000

Validating inputs is one of the most important things you should do as a backend developer. No matter what language or framework you use, you must not trust user inputs, ever.

And when it comes to Node, there are a ton of libraries out there that enables you to achieve this result. One of them is, precisely, Joi.

In this article i would like to make use of my new middleware express-joi-validations to present a new way to validate user inputs in Express.

Suppose you have an endpoint for registering new user on /signup route, you would have something like this:

import express from 'express';
const app = express();

app.post('/signup', (request, response) => {
  const { username, email, password } = request.body;
});

If you now want to validate that username, email and password meets your sing-up criteria, instead of using a bunch of if statements, you can use Joi with the help of express-joi-validations middleware.

The output would be something like this:

import express from 'express';
import { Joi, validateBody } from 'express-joi-validations';

const app = express();

const userSignUp = Joi.object({
  username: Joi.string().required().trim().alphanum().min(3).max(30),
  email: Joi.string().required().trim().email(),
  password: Joi.string().required().min(8),
});

app.post('/api/users', validateBody(userSignUp), (request, response) => {

  const errors = request.validationErrors.body;
  if (errors) {
    response.status(400).json({ error: 'Invalid user inputs' })
  }

  const { username, email, password } = request.validationValues.body;
});

As you can see, express-joi-validations exposes the method validateBody that you can use to validate the payload of the body and the validated data will be in the request.validationValues.body field.
If the input does not meet your criteria, the request.validationErrors.body field will be populated with an array of Joi errors that you can use to be more specific on what went wrong.

In addition to the validateBody method, you can use also the validateHeader method to validate request headers:

import { Joi, validateHeaders } from 'express-joi-validations';

const userToken = Joi.object({
  authorization: Joi.string().required().regex(/^Bearer [A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_.+/=]*$/),
});

app.get('/api/secret', validateHeaders(userToken), (request, response) => {
  // this area is restricted to registered users only
});

or the validateParams and validateQuery to validate url:

import { Joi, validateParams, validateQuery } from 'express-joi-validations';

// GET /posts/507f1f77bcf86cd799439011

const postId = Joi.object({
  id: Joi.string().hex().length(24),
});

app.get('/posts/:id', validateParams(postId), (request, response) => {
  const post = Post.findById(request.validationValues.params.id)
});

// GET /posts?page=2

const postQuery = Joi.object({
  page: Joi.optional().number().integer().min(1).default(1),
});

app.get('/posts', validateQuery(postQuery), (request, response) => {
  const posts = Post.findAll({ page: request.validationValues.query.page })
});

In addition to these helper methods, you can use the more generic validate to combine multiple validations together:

import { Joi, validate } from 'express-joi-validations';

app.put('/posts/:id', validate({ headers: userToken, params: postId, body: postBody }), (request, response) => {
  // Validation errors will be in request.validationErrors
  // Validation values will be in request.validationValues
});

That's it for this article.
For a better customization of the middleware, please refer to the official GitHub repository: https://github.com/mattiamalonni/express-joi-validations
For any question feel free to ask in the comments section below or in DM.