Next.jsのSSRフォームが送信できない：原因と3つの解決策（CSR/Server Actions/Remix的PE）

123456789"use client";

import dynamic from "next/dynamic";
import { LoginFormSkeleton } from "./login-form-skeleton";

export const LoginForm = dynamic(
  () => import("./login-form").then((m) => m.LoginForm),
  { ssr: false, loading: LoginFormSkeleton }
);

123456789101112131415161718192021222324252627import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function LoginFormSkeleton() {
  return (
    <Card className="w-full max-w-sm animate-pulse">
      <CardHeader>
        <CardTitle>
          <span className="inline-block h-5 w-20 rounded bg-foreground/10 dark:bg-foreground/20" />
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          <div className="grid gap-2">
            <div className="h-4 w-24 rounded bg-foreground/10 dark:bg-foreground/20" />
            <div className="h-10 w-full rounded-md bg-foreground/10 dark:bg-foreground/20" />
          </div>
          <div className="grid gap-2">
            <div className="h-4 w-20 rounded bg-foreground/10 dark:bg-foreground/20" />
            <div className="h-10 w-full rounded-md bg-foreground/10 dark:bg-foreground/20" />
            <div className="h-3 w-40 rounded bg-foreground/10 dark:bg-foreground/20" />
          </div>
          <div className="h-10 w-full rounded-md bg-foreground/10 dark:bg-foreground/20" />
        </div>
      </CardContent>
    </Card>
  );
}

12345678910111213141516171819202122"use server";

import { redirect } from "next/navigation";
import { z } from "zod";

const LoginSchema = z.object({
  email: z.string().min(1).email(),
  password: z.string().min(8).max(128),
});

export async function login(formData: FormData) {
  const email = String(formData.get("email") ?? "");
  const password = String(formData.get("password") ?? "");

  const parsed = LoginSchema.safeParse({ email, password });
  if (!parsed.success) {
    redirect("/login?error=1");
  }

  // Demo only: replace with real auth/session handling as needed.
  redirect("/login?success=1");
}

1234567891011<form
  action={action}
  method="post"
  // Disable native H5 validation after hydration; rely on RHF instead
  noValidate={mounted}
  onSubmit={onSubmit}
  className="grid gap-4"
>
  {/* ...inputs... */}
  <SubmitButton />
</form>

123456789function SubmitButton() {
  const { pending } = useFormStatus();
  const disabled = pending; // Always active unless submitting
  return (
    <Button type="submit" disabled={disabled} aria-busy={pending} className="w-full">
      {pending ? "送信中..." : "ログイン"}
    </Button>
  );
}

1234567891011121314151617181920212223242526272829"use server";

import { redirect } from "next/navigation";
import { validate } from "@/components/login-form/validation";

export type LoginState = {
  errors: { email?: string; password?: string } | null;
  values: { email: string; password: string };
};
export async function login(_prevState: LoginState, formData: FormData): Promise<LoginState> {
  const values = {
    email: String(formData.get("email") || ""),
    password: String(formData.get("password") || ""),
  };
  const result = validate(values);

  if (!result.ok) {
    return {
      errors: {
        email: result.fieldErrors?.email,
        password: result.fieldErrors?.password,
      },
      values: { email: values.email, password: "" },
    };
  }
  // Simulate async work; replace with real auth
  await new Promise((r) => setTimeout(r, 200));
  redirect("/login?success=1");
}

123456789101112131415161718192021222324252627282930313233343536373839import { z } from "zod";

export const LoginSchema = z.object({
  email: z
    .string({ required_error: "メールアドレスを入力してください" })
    .trim()
    .min(1, "メールアドレスを入力してください")
    .email("正しいメールアドレスを入力してください"),
  password: z
    .string({ required_error: "パスワードを入力してください" })
    .min(8, "8文字以上で入力してください")
    .max(128, "128文字以内で入力してください"),
});

export type LoginValues = z.infer<typeof LoginSchema>;
export type FieldErrors = Partial<Record<keyof LoginValues, string>>;

export type ActionState = {
  ok: boolean;
  message?: string;
  fieldErrors?: FieldErrors;
  values?: Partial<LoginValues>;
};
export function validate(values: Partial<LoginValues>): {
  ok: boolean;
  fieldErrors?: FieldErrors;
  data?: LoginValues;
} {
  const result = LoginSchema.safeParse(values);
  if (!result.success) {
    const fieldErrors = Object.fromEntries(
      Object.entries(result.error.flatten().fieldErrors).flatMap(([k, v]) =>
        v && v.length > 0 ? [[k, v[0] as string]] : []
      )
    ) as FieldErrors;
    return { ok: false, fieldErrors };
  }
  return { ok: true, data: result.data };
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879"use client";
import * as React from "react";
import { useActionState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { validate } from "@/components/login-form/validation";
import type { LoginState } from "@/components/login-form/login-action";
const initialState: LoginState = {
  errors: null,
  values: { email: "", password: "" },
};

export function LoginForm({ action }: { action: (prev: LoginState, formData: FormData) => Promise<LoginState> }) {
  const [state, formAction, isPending] = useActionState<LoginState, FormData>(action as any, initialState);
  const [clientErrors, setClientErrors] = React.useState<{ email?: string; password?: string } | null>(null);
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    const formData = new FormData(e.currentTarget);
    const email = String(formData.get("email") || "");
    const password = String(formData.get("password") || "");
    const result = validate({ email, password });
    if (!result.ok) {
      e.preventDefault();
      setClientErrors({ email: result.fieldErrors?.email, password: result.fieldErrors?.password });
    } else {
      setClientErrors(null);
    }
  };
  const emailError = clientErrors?.email ?? state.errors?.email;
  const passwordError = clientErrors?.password ?? state.errors?.password;
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>ログイン</CardTitle>
      </CardHeader>
      <CardContent>
        <form action={formAction} method="POST" onSubmit={handleSubmit} className="grid gap-4" noValidate>
          <div className="grid gap-2">
            <Label htmlFor="email">メールアドレス</Label>
            <Input
              name="email"
              type="text"
              inputMode="email"
              autoComplete="email"
              placeholder="you@example.com"
              defaultValue={state.values.email}
              className={emailError ? "border-red-500 focus-visible:ring-red-500/30" : undefined}
            />
            {emailError && (
              <p id="email-error" className="text-sm text-red-600" aria-live="polite">
                {emailError}
              </p>
            )}
          </div>
          <div className="grid gap-2">
            <Label htmlFor="password">パスワード</Label>
            <Input
              name="password"
              type="password"
              autoComplete="current-password"
              className={passwordError ? "border-red-500 focus-visible:ring-red-500/30" : undefined}
            />
            {passwordError ? (
              <p id="password-error" className="text-sm text-red-600" aria-live="polite">
                {passwordError}
              </p>
            ) : (
              <p className="text-xs text-foreground/70">8文字以上で入力してください</p>
            )}
          </div>
          <Button type="submit" disabled={isPending} aria-busy={isPending} className="w-full">
            {isPending ? "送信中..." : "ログイン"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}