first

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vercel

app/Competences/[slug]/page.tsx

@@ -1,5 +1,10 @@
-import ContentSectionCompetencesContainer from "../../components/ContentSectionCompetencesContainer";
-
-export default function CompetencePage({ params }: { params: { slug: string } }) {
-  return <ContentSectionCompetencesContainer collection="competences" slug={params.slug} />;
-}
+import ContentSectionCompetencesContainer from "../../components/ContentSectionCompetencesContainer";
+
+export default function CompetencePage({ params }: { params: { slug: string } }) {
+  // Vérifie que le paramètre `slug` est bien défini
+  if (!params?.slug) {
+    return <div>Erreur : Slug introuvable.</div>;
+  }
+
+  return <ContentSectionCompetencesContainer collection="competences" slug={params.slug} />;
+}

app/portfolio/[slug]/page.tsx

@@ -1,7 +1,51 @@
-import ContentSection from "../../components/ContentSection"; // Importation du composant ContentSection
+"use client";
 
-// Composant principal de la page de détail du projet
-export default function Page({ params }: { params: { slug: string } }) {
-  // Rendu du composant ContentSection avec les paramètres de la collection et du slug
-  return <ContentSection collection="projects" slug={params.slug} />;
-}
+import { useParams } from "next/navigation";
+import ContentSection from "../../components/ContentSection";
+import { useEffect, useState } from "react";
+
+export default function Page() {
+  const params = useParams();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null); // ✅ Ajout du typage string | null
+  const slug = typeof params.slug === "string" ? params.slug : "";
+
+  useEffect(() => {
+    if (!params?.slug) return;
+
+    async function fetchData() {
+      try {
+        const response = await fetch(`http://localhost:1337/api/projects?filters[slug][$eq]=${params.slug}&populate=*`);
+        const jsonData = await response.json();
+
+        if (!jsonData?.data || jsonData.data.length === 0) {
+          setError("❌ Erreur : Projet introuvable.");
+        } else {
+          setData(jsonData.data);
+        }
+      } catch (err) {
+        setError("❌ Erreur de chargement des données.");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [params.slug]);
+
+  if (!params?.slug) {
+    return <div className="text-red-500 text-center">❌ Erreur : Slug introuvable.</div>;
+  }
+
+  if (loading) {
+    return <div className="text-blue-500 text-center">⏳ Chargement...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500 text-center">{error}</div>;
+  }
+
+  return params.slug ? <ContentSection collection="projects" slug={slug} /> : <div className="text-red-500 text-center">❌ Erreur : Slug introuvable.</div>;
+
+}

next.config.ts

@@ -2,10 +2,8 @@
 const nextConfig = {
   // Active le mode strict de React pour signaler des erreurs potentielles
   reactStrictMode: true,
-  
-  // Activer les fonctionnalités expérimentales nécessaires (par exemple appDir pour les layouts de l'application)
   experimental: {
-    appDir: true,
+    appDir: true, // ✅ Assurez-vous que cette ligne est bien présente
   },
 
   // Gestion des réécritures d'URL pour proxy local vers le backend