NextJS

NextJS est un Framework FullStack basé sur ReactJS, côté serveur et côté client.

• Composants client
• Service HTTP
• Next-auth

NodeJS requis

Création du projet :

npx create-next-app@latest

Eventuellement avec le support typeScript :

npx create-next-app@latest --ts

Démarrage du serveur

cd my-next-app
npm run dev

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

app/layout.jsx correspond au main layout, et permet de définir la structure de base des pages.

Création d'un mock de service backend :

// 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);
}

Accessible immédiatement sur http://localhost:3000/api/projets

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>
  )
}

Structure :

app/events/[id]/page.tsx

Code :

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>
  )
}

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
        }
    }
}