Recap: Server Actions

Part of the Next.js Essentials section of Coddy's React journey — lesson 33 of 47.

Challenge

Medium

Chapter recap: the guestbook below saves nothing and never updates. Build the whole flow: form → action → fresh page.

In app/actions.js, mark the file with 'use server' as its first line, and after the save call revalidatePath('/') (imported from 'next/cache').
In app/page.jsx, import addGuest from './actions' and wrap the input and button in a <form> with id="guest-form" and action={addGuest}.
Give the input name="name": that's the key the action reads with formData.get('name').

Try it yourself

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

All lessons in Next.js Essentials

1Why Next.js

What Next.js Adds The App Folder Your First Page Recap: Why Next.js

4Server & Client

Two Kinds of Component Reading the Error The 'use client' Line Keep Client Parts Small Server Inside Client Recap: Server & Client

7Client Navigation

The Active Link Programmatic Routing Filtering with the URL Route Handlers Recap: Navigation

3Layouts & Metadata

The Root Layout Shared Navigation Nested Layouts Page Metadata Dynamic Metadata Recap: Layouts

6Server Actions

What Is a Server Action Forms That Act Reading Form Data Refreshing the PageRecap: Server Actions