feat: connect to api

2026-04-12 11:41:52 +02:00 · 2026-04-12 11:41:52 +02:00 · 34a1c9ab19
parent 2b8c9af978
commit 34a1c9ab19
17 changed files with 501 additions and 67 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@ -2,4 +2,30 @@
 # This is NOT the Next.js you know

 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+
+# Guide d'Architecture : Approche Hybride Next.js + TanStack Query
+
+Ce document définit les standards pour l'intégration de données via l'architecture hybride (Server-Side Prefetching + Client-Side Hydration).
+
+## 1. Vision Globale
+L'objectif est de supprimer les états de chargement (spinners) au premier chargement tout en conservant la puissance du cache de TanStack Query sur le client.
+
+**Flux de données :**
+1. **Serveur :** Récupère les données (`prefetchQuery`).
+2. **Transfert :** Sérialise le cache et l'envoie au client (`dehydrate`).
+3. **Client :** Réhydrate le cache et prend le relais pour l'interactivité.
+
+## 2. Structure de Dossiers Recommandée
+```text
+src/
+├── app/
+│   ├── providers.tsx       # Configuration du QueryClientProvider
+│   └── posts/
+│       ├── page.tsx        # Server Component (Prefetching)
+│       └── posts-list.tsx  # Client Component (Display + Logic)
+├── hooks/
+│   └── queries/            # Centralisation des query keys et fonctions fetch
+└── lib/
+    └── query-client.ts     # Configuration singleton du client
+```
 <!-- END:nextjs-agent-rules -->
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}
--- a/bun.lock
+++ b/bun.lock
@ -5,12 +5,15 @@
    "": {
      "name": "next-starter",
      "dependencies": {
+        "@tanstack/react-query": "^5.99.0",
+        "js-cookie": "^3.0.5",
        "next": "16.2.3",
        "react": "19.2.4",
        "react-dom": "19.2.4",
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4",
+        "@types/js-cookie": "^3.0.6",
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
@ -216,10 +219,16 @@

    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.2.2", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.2.2", "@tailwindcss/oxide": "4.2.2", "postcss": "^8.5.6", "tailwindcss": "4.2.2" } }, "sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ=="],

+    "@tanstack/query-core": ["@tanstack/query-core@5.99.0", "", {}, "sha512-3Jv3WQG0BCcH7G+7lf/bP8QyBfJOXeY+T08Rin3GZ1bshvwlbPt7NrDHMEzGdKIOmOzvIQmxjk28YEQX60k7pQ=="],
+
+    "@tanstack/react-query": ["@tanstack/react-query@5.99.0", "", { "dependencies": { "@tanstack/query-core": "5.99.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-OY2bCqPemT1LlqJ8Y2CUau4KELnIhhG9Ol3ZndPbdnB095pRbPo1cHuXTndg8iIwtoHTgwZjyaDnQ0xD0mYwAw=="],
+
    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],

    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],

+    "@types/js-cookie": ["@types/js-cookie@3.0.6", "", {}, "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ=="],
+
    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],

    "@types/json5": ["@types/json5@0.0.29", "", {}, "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="],
@ -580,6 +589,8 @@

    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],

+    "js-cookie": ["js-cookie@3.0.5", "", {}, "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="],
+
    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],

    "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
--- a/package.json
+++ b/package.json
@ -9,12 +9,15 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@tanstack/react-query": "^5.99.0",
+    "js-cookie": "^3.0.5",
    "next": "16.2.3",
    "react": "19.2.4",
    "react-dom": "19.2.4"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
+    "@types/js-cookie": "^3.0.6",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Providers from "@/providers";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@ -27,7 +28,9 @@ export default function RootLayout({
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <Providers>{children}</Providers>
+      </body>
    </html>
  );
 }
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@ -0,0 +1,79 @@
+'use client'
+
+import { useState } from 'react'
+import { useLogin } from '@/hooks/queries/auth'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const login = useLogin()
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    login.mutate({ email, password }, {
+      onSuccess: () => {
+        router.push('/')
+      }
+    })
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Connectez-vous à votre compte
+          </h2>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="-space-y-px rounded-md shadow-sm">
+            <div>
+              <input
+                type="email"
+                required
+                className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                placeholder="Adresse email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div>
+              <input
+                type="password"
+                required
+                className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                placeholder="Mot de passe"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {login.isError && (
+            <div className="text-red-500 text-sm text-center">
+              {(login.error as any).message}
+            </div>
+          )}
+
+          <div>
+            <button
+              type="submit"
+              disabled={login.isPending}
+              className="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
+            >
+              {login.isPending ? 'Connexion...' : 'Se connecter'}
+            </button>
+          </div>
+        </form>
+        <div className="text-center">
+          <Link href="/register" className="text-indigo-600 hover:text-indigo-500 text-sm">
+            Pas encore de compte ? S&apos;inscrire
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -0,0 +1,71 @@
+'use client'
+
+import { useUser, useLogout } from '@/hooks/queries/auth'
+import Link from 'next/link'
+
+export default function Home() {
+  const { data: user, isLoading } = useUser()
+  const logout = useLogout()
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-lg">Chargement...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4">
+      <main className="w-full max-w-2xl bg-white p-8 rounded-lg shadow-md text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-8">
+          Bienvenue sur Next Starter
+        </h1>
+
+        {user ? (
+          <div className="space-y-6">
+            <div className="flex flex-col items-center">
+              {user.avatar_url && (
+                <img
+                  src={user.avatar_url.startsWith('http') ? user.avatar_url : `http://localhost:8003/storage/${user.avatar_url}`}
+                  alt={user.name}
+                  className="w-24 h-24 rounded-full object-cover mb-4 border-2 border-indigo-500"
+                />
+              )}
+              <p className="text-xl font-medium">Bonjour, {user.name} !</p>
+              <p className="text-gray-600">{user.email}</p>
+            </div>
+            
+            <button
+              onClick={() => logout.mutate()}
+              disabled={logout.isPending}
+              className="px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors disabled:opacity-50"
+            >
+              {logout.isPending ? 'Déconnexion...' : 'Se déconnecter'}
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <p className="text-lg text-gray-600 mb-6">
+              Connectez-vous pour accéder à toutes les fonctionnalités.
+            </p>
+            <div className="flex justify-center space-x-4">
+              <Link
+                href="/login"
+                className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
+              >
+                Se connecter
+              </Link>
+              <Link
+                href="/register"
+                className="px-6 py-2 border border-indigo-600 text-indigo-600 rounded-md hover:bg-indigo-50 transition-colors"
+              >
+                S&apos;inscrire
+              </Link>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@ -0,0 +1,114 @@
+'use client'
+
+import { useState } from 'react'
+import { useRegister } from '@/hooks/queries/auth'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function RegisterPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    password_confirmation: '',
+    avatar: null as File | null,
+  })
+  const register = useRegister()
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    register.mutate(formData, {
+      onSuccess: () => {
+        router.push('/')
+      }
+    })
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Créez votre compte
+          </h2>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="-space-y-px rounded-md shadow-sm">
+            <div>
+              <input
+                type="text"
+                required
+                className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                placeholder="Nom complet"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              />
+            </div>
+            <div>
+              <input
+                type="email"
+                required
+                className="relative block w-full appearance-none rounded-none border-x border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                placeholder="Adresse email"
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              />
+            </div>
+            <div>
+              <input
+                type="password"
+                required
+                className="relative block w-full appearance-none rounded-none border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                placeholder="Mot de passe"
+                value={formData.password}
+                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              />
+            </div>
+            <div>
+              <input
+                type="password"
+                required
+                className="relative block w-full appearance-none rounded-none rounded-b-md border-x border-b border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                placeholder="Confirmer le mot de passe"
+                value={formData.password_confirmation}
+                onChange={(e) => setFormData({ ...formData, password_confirmation: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Avatar (Optionnel)</label>
+            <input
+              type="file"
+              accept="image/*"
+              className="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
+              onChange={(e) => setFormData({ ...formData, avatar: e.target.files?.[0] || null })}
+            />
+          </div>
+
+          {register.isError && (
+            <div className="text-red-500 text-sm text-center">
+              {(register.error as any).message}
+            </div>
+          )}
+
+          <div>
+            <button
+              type="submit"
+              disabled={register.isPending}
+              className="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
+            >
+              {register.isPending ? 'Inscription...' : "S'inscrire"}
+            </button>
+          </div>
+        </form>
+        <div className="text-center">
+          <Link href="/login" className="text-indigo-600 hover:text-indigo-500 text-sm">
+            Déjà un compte ? Se connecter
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/hooks/queries/auth.ts
+++ b/src/hooks/queries/auth.ts
@ -0,0 +1,77 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { apiFetch } from '@/lib/api-client'
+import Cookies from 'js-cookie'
+import { User, AuthResponse } from '@/types/auth'
+
+export const authKeys = {
+  all: ['auth'] as const,
+  user: () => [...authKeys.all, 'user'] as const,
+}
+
+export function useUser() {
+  return useQuery<User | null>({
+    queryKey: authKeys.user(),
+    queryFn: () => apiFetch('/auth/me'),
+    retry: false,
+    enabled: typeof window !== 'undefined' && !!Cookies.get('token'),
+  })
+}
+
+export function useLogin() {
+  const queryClient = useQueryClient()
+
+  return useMutation<AuthResponse, Error, any>({
+    mutationFn: (credentials: any) =>
+      apiFetch('/auth/login', {
+        method: 'POST',
+        body: JSON.stringify(credentials),
+      }),
+    onSuccess: (data) => {
+      Cookies.set('token', data.token, { expires: 30, sameSite: 'lax', secure: process.env.NODE_ENV === 'production' })
+      queryClient.setQueryData(authKeys.user(), data.user)
+    },
+  })
+}
+
+export function useRegister() {
+  const queryClient = useQueryClient()
+
+  return useMutation<AuthResponse, Error, any>({
+    mutationFn: (data: any) => {
+        const formData = new FormData();
+        Object.keys(data).forEach(key => {
+            if (data[key] !== null && data[key] !== undefined) {
+                formData.append(key, data[key]);
+            }
+        });
+        
+        return apiFetch('/auth/register', {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'Content-Type': 'undefined',
+            }
+        })
+    },
+    onSuccess: (data) => {
+      Cookies.set('token', data.token, { expires: 30, sameSite: 'lax', secure: process.env.NODE_ENV === 'production' })
+      queryClient.setQueryData(authKeys.user(), data.user)
+    },
+  })
+}
+
+export function useLogout() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: () =>
+      apiFetch('/auth/logout', {
+        method: 'POST',
+      }),
+    onSuccess: () => {
+      Cookies.remove('token')
+      queryClient.setQueryData(authKeys.user(), null)
+      queryClient.clear()
+    },
+  })
+}
--- a/src/lib/api-client.ts
+++ b/src/lib/api-client.ts
@ -0,0 +1,41 @@
+import Cookies from 'js-cookie';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
+
+export async function apiFetch(endpoint: string, options: RequestInit = {}) {
+  const token = typeof window !== 'undefined' ? Cookies.get('token') : null;
+
+  const headers: Record<string, string> = {
+    'Accept': 'application/json',
+    ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+  };
+
+
+  // Only set Content-Type if it's NOT FormData
+  if (!(options.body instanceof FormData)) {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  // Convert HeadersInit to a plain object
+  const optionsHeaders = Object.fromEntries(new Headers(options.headers).entries());
+
+  // Override headers from options if provided
+  const finalHeaders: Record<string, string> = { ...headers, ...optionsHeaders };
+
+  // Delete Content-Type if set to 'undefined' to let the browser handle it (for FormData)
+  if (finalHeaders['Content-Type'] === 'undefined') {
+    delete finalHeaders['Content-Type'];
+  }
+
+  const response = await fetch(`${API_URL}${endpoint}`, {
+    ...options,
+    headers: finalHeaders,
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.message || 'An error occurred');
+  }
+
+  return response.json();
+}
--- a/src/lib/query-client.ts
+++ b/src/lib/query-client.ts
@ -0,0 +1,35 @@
+import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+      dehydrate: {
+        // include pending queries in dehydration
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === 'pending',
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+export function getQueryClient() {
+  if (typeof window === 'undefined') {
+    // Server: always make a new query client
+    return makeQueryClient()
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}
--- a/src/providers/index.tsx
+++ b/src/providers/index.tsx
@ -0,0 +1,12 @@
+'use client'
+
+import { QueryProvider } from './query-provider'
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryProvider>
+      {/* Ajoutez d'autres providers ici si besoin (ThemeProvider, etc.) */}
+      {children}
+    </QueryProvider>
+  )
+}
--- a/src/providers/query-provider.tsx
+++ b/src/providers/query-provider.tsx
@ -0,0 +1,14 @@
+'use client'
+
+import { QueryClientProvider } from '@tanstack/react-query'
+import { getQueryClient } from '@/lib/query-client'
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  const queryClient = getQueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
+}
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@ -0,0 +1,13 @@
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  avatar_url: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AuthResponse {
+  user: User;
+  token: string;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -19,7 +19,7 @@
      }
    ],
    "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
    }
  },
  "include": [