Componentes do Cliente no Framework NextJS
Agora vamos converter nosso componente
de servidor em um componente do cliente. Para isso,
escreva a diretiva 'use client'
no início do arquivo do componente:
'use client';
export default function Test() {
return <h1>Olá, usuário!</h1>;
}
Agora teremos acesso aos estados,
criados via useState.
Vamos criar um estado como exemplo
e exibir seu conteúdo no markup:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('usuário');
return <h1>Olá, {name}!</h1>;
}
Crie um componente do cliente com dois inputs e um botão. Permita que números sejam inseridos nos inputs. Ao clicar no botão, exiba a soma dos números inseridos em um parágrafo.
Remova a diretiva 'use client'.
Certifique-se de que, neste caso, o NextJS
retornará um erro devido à impossibilidade
de usar estados dentro de componentes de servidor.
