nextjs - 💡(How to fix) Fix Form + useActionState example from React 19 docs causes error when using Next [7 comments, 4 participants]

I expected the component to work in Next the same as it had in React's documentation. However, when visiting a Next route containing that example, the error below appears, indicating that useActionState can only be used within client components. That seems to contradict the React docs for that example, which explicitly require that the "<form> be rendered by a Server Component" for progressive enhancement to occur. Ecmascript file had an error This could instead be an issue with the React docs rather than with Next, but the CodeSandbox example in the docs (you can access it directly via the "fork" link) indeed appears to be a server component (it doesn't contain the "use client" directive), so I'm currently assuming this is particular to Next.

TL;DR

Adding the "use client" directive to the file or its parent is likely the fix to resolve the error related to useActionState in a Next.js application.

Guidance

• The error message indicates that useActionState can only be used within client components, suggesting a mismatch between the component's rendering context and its requirements.
• To resolve this, add the "use client" directive at the top of the page.jsx file to ensure it's treated as a client component.
• Verify that the component functions as expected after adding the directive by checking for the absence of the error message and the correct behavior of the form submission.
• If issues persist, review the React documentation and Next.js guidelines for server and client components to ensure proper implementation.

Example

// page.jsx
'use client';
import { useActionState } from "react";
import { signUpNewUser } from "./api";

export default function Page() {
  // Component code here
}

Notes

The solution assumes that the component is intended to be a client component. If the component needs to be a server component for specific reasons (like SEO or static site generation), an alternative approach might be necessary, such as rearchitecting the component to not rely on useActionState or using a different state management solution compatible with server components.

Recommendation

Apply the workaround by adding the "use client" directive to the affected file, as this directly addresses the error message's suggestion and aligns with Next.js documentation for using client components.