Nr 06 Mutations Forms

title: "Next.js vs Remix — Mutations and Forms: API Routes vs Actions" description: "Compare form handling and mutations in Next.js and Remix: API routes, Server Actions, and Remix actions with progressive enhancement." weight: 16 date: 2026-06-28 lastmod: 2026-06-28 tags: [frameworks, react]

Mutations and form handling differ fundamentally between Next.js and Remix. Remix builds forms into the framework with progressive enhancement. Next.js provides API routes and Server Actions.

What You'll Learn

You will understand how each framework handles form submissions, mutations, validation, and progressive enhancement.

Why It Matters

Forms are the primary way users create and update data. The form handling approach affects development speed, user experience, and application reliability.

Real-World Use

DodaZIP's admin panel uses Remix actions for all form submissions because forms work reliably even on slow office networks without JavaScript.

flowchart LR
    subgraph Next[Next.js Mutations]
        A1[API Routes] --> B1[Separate endpoint]
        A2[Server Actions] --> B2[Form action prop]
        B1 --> C1[JavaScript required]
        B2 --> C2[JS-enhanced forms]
    end
    subgraph Remix[Remix Mutations]
        D1[Actions] --> E1[Per-route handler]
        E1 --> F1[Works without JS]
        E1 --> F2[Progressively enhanced]
    end
    style Next fill:#121212,color:#fff
    style Remix fill:#1a1a2e,color:#fff

Next.js API Routes

API routes are the traditional way to handle mutations in Next.js.

// pages/api/users.js — Pages Router API route
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;
    const user = await db.users.create({ name, email });
    res.status(201).json(user);
  } else if (req.method === 'GET') {
    const users = await db.users.findAll();
    res.status(200).json(users);
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Expected output: A REST API endpoint at /api/users. POST creates a user and returns 201. GET lists users. Other methods return 405.

Next.js Server Actions

Server Actions in the App Router handle mutations directly from forms.

async function createUser(formData) {
  'use server';
  const name = formData.get('name');
  const email = formData.get('email');
  await db.users.create({ name, email });
  revalidatePath('/users');
  return { success: true };
}

export default function CreateUserForm() {
  return (
    <form action={createUser}>
      <input name="name" required />
      <input name="email" type="email" required />
      <button type="submit">Create</button>
    </form>
  );
}

Expected output: A form that submits to the createUser Server Action. The form requires JavaScript for the best experience but can work with progressive enhancement.

Remix Actions

Remix actions are route-level handlers that process form submissions and return data.

// app/routes/users.create.jsx
import { Form, useActionData } from '@remix-run/react';

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || name.length < 2) {
    return { errors: { name: 'Name must be at least 2 characters' } };
  }
  if (!email || !email.includes('@')) {
    return { errors: { email: 'Invalid email' } };
  }

  await db.users.create({ name, email });
  return { success: true };
}

export default function CreateUser() {
  const actionData = useActionData();
  return (
    <Form method="post">
      <input name="name" />
      {actionData?.errors?.name && <p>{actionData.errors.name}</p>}
      <input name="email" type="email" />
      {actionData?.errors?.email && <p>{actionData.errors.email}</p>}
      <button type="submit">Create</button>
    </Form>
  );
}

Expected output: The form submits to the action even without JavaScript. Errors display per field. Success returns to the user list. The form works with or without JavaScript enabled.

Progressive Enhancement Comparison

Remix forms work without JavaScript because they use standard HTML form submission with method="post". When JavaScript loads, the form progressively enhances with client-side navigation and validation.

Next.js Server Actions require a JavaScript runtime on the client. Without JavaScript, the form does not submit.

Validation Patterns

Next.js validates in the Server Action using standard JavaScript or libraries like Zod.

Remix validates in the action function and returns structured errors that the component renders via useActionData.

Common Mistakes

1. Creating separate API routes for every form: Server Actions in Next.js and actions in Remix eliminate the need for separate API endpoints for form handling.

2. Not returning validation errors from actions: Always return structured error objects. Throw errors only for unexpected server failures.

3. Forgetting to revalidate in Next.js Server Actions: After a mutation, call revalidatePath or revalidateTag to update the cached page.

4. Not using the Form component in Remix: Remix provides a Form component that enhances the standard HTML form. Use it instead of plain form elements.

5. Handling mutations in loaders: Loaders are for reading data. Use actions or Server Actions for mutations. Never mutate data in a loader.

Practice Questions

1. What is the Remix equivalent of a Next.js API route?

Remix actions. Both handle mutations, but actions integrate directly with the route and form system.

2. How do Server Actions differ from API routes in Next.js?

Server Actions are functions called directly from forms without creating a separate API endpoint. API routes are HTTP endpoints called via fetch.

3. Why do Remix forms work without JavaScript?

Remix uses standard HTML form submission. The browser natively sends the form data to the action route.

4. How do you handle form validation in Remix?

Validate form data in the action function and return validation errors. The component renders the errors via useActionData.

5. What is the purpose of revalidatePath in Next.js Server Actions?

It invalidates the cache for a specific route, causing Next.js to re-fetch data on the next request.

Challenge

Build a user registration form with name, email, and password fields. Implement validation (name required, valid email, password 8+ chars) in both Next.js Server Action and Remix action. Compare the code.

Frequently Asked Questions

Mini Project

Build a comment system with a form to add comments. Implement in both frameworks with full validation, error handling, and revalidation after submission.

What's Next

Compare Caching Strategies in Next.js and Remix for optimizing data fetching performance.