Six forms, the biggest has nine fields. I keep starting react-hook-form + a resolver, then remembering the action has to validate anyway, then wondering why I'm writing it twice. Two weeks until I need this in front of people and I am one person. What do you actually do here?
Decide per form, not per app. Four fields, submit-and-see: plain action. A twenty-field wizard with cross-field rules and a live total: react-hook-form, because sending a round trip on every keystroke to validate "end date after start date" is miserable. You have neither of those, you have nine fields.
The controller matters more than people budget for. An MPPT controller versus a cheap PWM one is a real difference on a panel this size, especially in weak light. Don't spend on the panel and then throttle it with a £15 box.
And check the controller's input voltage range against the panel's open-circuit voltage in the cold, which is when that voltage is at its highest.
I'd skip the folding panel and put a fixed one on the roof. Folding kit means remembering it, deploying it, securing it against theft and stowing it again, and after one season I stopped bothering entirely. The panel you never think about is the one that actually charges your battery.
Two weeks: ship the server-only version. You will redo the form UI once real people use it anyway, and you will redo it with actual complaints instead of guesses about which fields confuse them.
Secondhand folding panels: check the blocking diodes and put a meter on it in real sun before you hand over money. The hinges and the cabling die long before the cells do.
Your 100 Ah battery is the constraint that'll bite first if it's lead-acid, since you can realistically use about half of it. Worth confirming which chemistry you have before you spend anything on generation.
One practical thing: put the schemas in lib/schemas.ts with no 'use server' at the top. If you export them from the same file as the actions you end up either importing a server module into a client component or duplicating the schema, and both of those get ugly fast.
next-safe-action and Conform both sit in the middle and are genuinely nice. Being honest though: they are another dependency and another set of docs to read, and at nine fields you will finish faster without them.
Went with plain useActionState and a shared schema file. Forty minutes for all six forms including the error rendering. Noting it here in case someone finds this later wondering whether the simple version is really enough at this size — it is.
Whatever you pick, validate the same schema in a test that posts garbage to the action directly. It is the only test in this area that has ever caught anything for me.
@listener_lena · 3mo ago · 2 replies
Server first, always, because the action is a public endpoint and client validation is a UX feature. One schema in a plain file both sides can import,
safeParsein the action, errors back throughuseActionState:The field error shape maps straight onto your inputs by name. For nine fields that is the whole implementation. Add react-hook-form later if a form gets long enough that a round trip per validation feels bad.
Reply
Report
@query_quinn · 3mo ago
Worth knowing that flatten-style output only gives you the top level. If you have nested objects or arrays of line items, go straight to the tree/issue list and key errors by path — trying to flatten a nested schema is where people give up and reach for a library.
Reply
Report