Client component

Les client components sont les composant qui vont être rendu côté client.

"use client"
 
import { useState } from 'react'
 
const NewTodoForm = () => {
  const [state, setState] = useState('')
  return (
    <div>
      <form>
        <input type="text" value={state} onChange={(e) => setState(e.target.value)} />
      </form>
    </div>
  )
}
 
export default NewTodoForm

Dans ce cas on utilise une fonction qui va impacter le cycle de rendu (useState) il faut donc spécifier à Next.js que c’est un client component en ajoutant 'use client' à la première ligne.
Cela ne veut pas dire que le composant ne va pas être rendu côté serveur. Il est aussi important de noter que la communication entre un server component et un client component est possible mais elle est limité par des types sérializable.