Các thành phần phía máy khách trong framework NextJS

Bây giờ hãy chuyển đổi thành phần phía máy chủ của chúng ta thành thành phần phía máy khách. Để làm điều này, hãy viết chỉ thị 'use client' ở đầu file thành phần:

'use client';

export default function Test() {
	return <h1>hello, user!</h1>;
}

Bây giờ chúng ta sẽ có thể sử dụng các trạng thái (state), được tạo thông qua useState. Hãy tạo một state làm ví dụ và hiển thị nội dung của nó trong giao diện:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

Hãy tạo một thành phần phía máy khách với hai trường nhập liệu (input) và một nút bấm. Cho phép nhập các số vào các trường nhập liệu. Khi nhấn vào nút, hãy hiển thị tổng của các số đã nhập vào một đoạn văn (paragraph).

Hãy bỏ chỉ thị 'use client'. Hãy đảm bảo rằng trong trường hợp này NextJS sẽ báo lỗi vì không thể sử dụng state bên trong các thành phần phía máy chủ.