NextJS

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

• Composants client
• 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.

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

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