Différences

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

--- web:framework:nextjs [2024/04/08 08:33] – jcheron
+++ web:framework:nextjs [2026/04/08 07:25] (Version actuelle) – jcheron
@@ Ligne 1: / Ligne 1: @@
 ====== NextJS======
 NextJS est un Framework FullStack basé sur ReactJS, côté serveur et côté client.
+===== Sommaire =====
+  * [[web:framework:nextjs:client-component|]]
+  * [[web:framework:nextjs:http-service|]]
+  * [[web:framework:nextjs:nextauth|]]
 ===== Installation =====
 [[https://nodejs.org/en/download/|NodeJS]] requis
@@ Ligne 28: / Ligne 35: @@
 <html><div class="imageB"></html>{{:web:framework:pasted:20240408-083105.png?600}}<html></div></html>
+=== Layout ===
+**app/layout.jsx** correspond au main layout, et permet de définir la structure de base des pages.
+==== Routes api ====
+Création d'un mock de service backend :
+<sxh ts>
+// app/api/projets/route.js
+export async function GET() {
+  const projets = [
+    { id: 1, titre: "Todo App", description: "Gérer ses tâches", techno: "React" },
+    { id: 2, titre: "Blog", description: "Écrire des articles", techno: "Next.js" },
+  ];
+  return Response.json(projets);
+}
+</sxh>
+Accessible immédiatement sur http://localhost:3000/api/projets
 ==== Recupération de données ====
@@ Ligne 33: / Ligne 60: @@
 === Côté serveur ===
-== Server Side Rendering ==
+== Page avec SSR ==
 <WRAP info round>
@@ Ligne 39: / Ligne 66: @@
 </WRAP>
-<sxh javascript>
+<sxh ts>
+export default async function EventsPage() {
+  const res = await fetch("http://localhost:8080/events")
+  const events = await res.json()
-export default function Home({data}) {
   return (
-    <>
+    <div>
-        <UIList objects={data}/>
+      <h1>Liste des événements</h1>
-    </ >
+      {events.map((e: any) => (
+        <div key={e.id}>{e.name}</div>
+      ))}
+    </div>
   )
 }
+</sxh>
-export async function getServerSideProps() {
+== Variables dans l'url ==
-    const res = await fetch(API_URL)
-    const data = await res.json()
+Structure :
-    return {
+<sxh bash;gutter:false>
-        props: {
+app/events/[id]/page.tsx
-            data
+</sxh>
-        }
-    }
+Code :
+<sxh ts;gutter:false>
+type Props = {
+  params: { id: string }
+}
+export default async function EventDetail({ params }: Props) {
+  const res = await fetch(`http://localhost:8080/events/${params.id}`)
+  const event = await res.json()
+  return (
+    <div>
+      <h1>{event.name}</h1>
+      <p>{event.description}</p>
+    </div>
+  )
 }
 </sxh>
+URL : ''/events/42''
 == Static Site Generation ==