Différences

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

--- web:framework:nextjs [2023/03/22 03:33] – créée 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 18: / Ligne 25: @@
 <sxh bash;gutter:false>
 cd my-next-app
-npx run dev
+npm run dev
+</sxh>
+==== Routage ====
+Avec App router, le routage est basé sur la structure des dossiers à partir de **app**.
+  * Chaque dossier représente un segment de route
+  * Les routes se concrétisent et sont accessibles à partir du moment où elles contiennent le fichier **page.jsx/tsx**
+<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 ====
+=== Côté serveur ===
+== Page avec SSR ==
+<WRAP info round>
+Sollicité côté serveur à chaque requête.
+</WRAP>
+<sxh ts>
+export default async function EventsPage() {
+  const res = await fetch("http://localhost:8080/events")
+  const events = await res.json()
+  return (
+    <div>
+      <h1>Liste des événements</h1>
+      {events.map((e: any) => (
+        <div key={e.id}>{e.name}</div>
+      ))}
+    </div>
+  )
+}
+</sxh>
+== Variables dans l'url ==
+Structure :
+<sxh bash;gutter:false>
+app/events/[id]/page.tsx
+</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 ==
+<sxh javascript>
+export default function Home({data}) {
+  return (
+    <>
+        <UIList objects={data}/>
+    </ >
+  )
+}
+export async function getStaticProps() {
+    const res = await fetch(API_URL)
+    const data = await res.json()
+    return {
+        props: {
+            data
+        }
+    }
+}
 </sxh>