Ôn tập: Server Actions

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 33 trên 47.

Thử thách

Trung bình

Tóm tắt chương: sổ lưu bút bên dưới không lưu gì và không bao giờ cập nhật. Hãy xây dựng toàn bộ quy trình: biểu mẫu → hành động → trang mới.

Trong app/actions.js, đặt 'use server' ở dòng đầu tiên của tệp, rồi gọi revalidatePath('/') sau khi lưu (nhập hàm này từ 'next/cache').
Trong app/page.jsx, nhập addGuest từ './actions' và bọc ô nhập cùng nút trong <form> có id="guest-form" và action={addGuest}.
Đặt name="name" cho ô nhập: đó là khóa mà hành động đọc bằng formData.get('name').

Tự làm thử

import './globals.css';

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

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

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gì Thư mục app Trang đầu tiên Ôn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phần Đọc lỗi Dòng 'use client'Giữ phần client nhỏ gọn Máy chủ bên trong client Tóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt động Điều hướng bằng code Lọc bằng URL Bộ xử lý tuyến đường Ôn tập: Điều hướng

3Bố cục và siêu dữ liệu

Bố cục gốc Điều hướng dùng chung Bố cục lồng nhau Siêu dữ liệu trang Siêu dữ liệu động Ôn tập: bố cục

6Server Actions

Server Action là gì Biểu mẫu có thể hoạt động Đọc dữ liệu biểu mẫu Làm mới trangÔn tập: Server Actions