CodingNic

Creating & Editing Contacts

Adding and Editing Contacts

Creating & Editing Contacts 5 min read

Adding and Editing Contacts

Adding and Editing Contacts

Up to now, app/contacts/new/page.tsx and app/contacts/[id]/edit/page.tsx
are still placeholders, and the “+ Add contact” button in the nav bar leads
nowhere useful.

In this module you’ll meet Server Actions: functions marked
"use server" that a <form> can call directly on submit, with no API
route and no client-side fetch call in between. You’ll write two data
functions (createContact, updateContact), wrap them in Server Actions,
build one form component shared by both the New and Edit pages, and wire
everything together.

This is the biggest module so far — take it one lesson at a time.