Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:framework:nextjs:client-component [2026/04/03 11:40] – créée jcheron
+++ web:framework:nextjs:client-component [2026/04/03 11:52] (Version actuelle) – jcheron
@@ Ligne 1: / Ligne 1: @@
 ====== Composants client ======
+Dès qu'on utilise :
+  * useState
+  * useEffect
+  * interaction utilisateur
+Il faut un composant client et déclarer :
+<sxh ts;gutter:false>
+"use client"
+</sxh>
+Exemple :
+<sxh ts>
+"use client"
+import { useState } from "react"
+export default function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <div>
+      <p>{count}</p>
+      <button onClick={() => setCount(count + 1)}>+1</button>
+    </div>
+  )
+}
+</sxh>
+===== Hooks de base =====
+==== useState ====
+<sxh ts;gutter:false>
+const [value, setValue] = useState("")
+</sxh>
+==== useEffect ====
+<sxh ts>
+useEffect(() => {
+  console.log("monté")
+}, [])
+</sxh>
+==== useRouter (navigation) ====
+<sxh ts>
+"use client"
+import { useRouter } from "next/navigation"
+const router = useRouter()
+router.push("/events")
+</sxh>
+==== useParams (récupérer ID côté client) ====
+<sxh ts>
+import { useParams } from "next/navigation"
+const params = useParams()
+console.log(params.id)
+</sxh>