Can I use it with Next.js?

[iemong]

Hi!

Thanks for building this library.
Is it possible to use conform for form validation with server actions in Next.js?

[edmundhung]

I have heard people using it with nextjs but I am also not sure if the current version works well with server action yet as it wasn't the main target

Having said that, the upcoming v1 does support server action and should be out in early January.

[edmundhung]

We have released v1.0.0-rc.0 early this week and working hard on getting all the docs updated. If you don't mind help testing it, feel free to try it out.

You can find a nextjs example using v1.0.0-rc.0 here: https://codesandbox.io/p/devbox/fast-fast-8jwsxk?file=%2Fapp%2Fform.tsx%3A21%2C31-21%2C43

[deadcoder0904]

is there a github repo? the codesandbox is stuck on loading.

i'm close already to get it working. useFormState is throwing some weird error when i add an action:

No overload matches this call.
Overload 1 of 2, '(action: (state: SubmissionResult<string[]>) => SubmissionResult<string[]> | Promise<SubmissionResult<string[]>>, initialState: SubmissionResult<...>, permalink?: string | undefined): [state: ...]', gave the following error.
Argument of type '(formData: FormData) => Promise<SubmissionResult<string[]>>' is not assignable to parameter of type '(state: SubmissionResult<string[]>) => SubmissionResult<string[]> | Promise<SubmissionResult<string[]>>'.
Types of parameters 'formData' and 'state' are incompatible.
Type 'SubmissionResult<string[]>' is missing the following properties from type 'FormData': append, delete, get, getAll, and 7 more.
Overload 2 of 2, '(action: (state: SubmissionResult<string[]>, payload: unknown) => SubmissionResult<string[]> | Promise<SubmissionResult<string[]>>, initialState: SubmissionResult<...>, permalink?: string | undefined): [state: ...]', gave the following error.
Argument of type '(formData: FormData) => Promise<SubmissionResult<string[]>>' is not assignable to parameter of type '(state: SubmissionResult<string[]>, payload: unknown) => SubmissionResult<string[]> | Promise<SubmissionResult<string[]>>'.
Types of parameters 'formData' and 'state' are incompatible.
Type 'SubmissionResult<string[]>' is not assignable to type 'FormData'.ts(2769)

i'm sure i can figure it out if i see some example.

[deadcoder0904]

okay, codesandbox loaded in another browser. i'll test it.

[edmundhung]

Repo: https://github.com/edmundhung/conform/tree/v1/examples/nextjs

[deadcoder0904]

thanks, @edmundhung it works fine. just tested it. love it. makes forms easy & fast.