Upgrade/nextjs 16 direct

.github/workflows/build.yml

@@ -15,7 +15,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [18.x, 20.x]
+                node-version: [20.x, 22.x]
 
         steps:
             - uses: actions/checkout@v3

.github/workflows/sonarcloud.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 10
 
       - name: Install dependencies
         run: pnpm install

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:23-alpine
+FROM node:20-alpine
 
 WORKDIR /usr/src/app
 
 COPY package*.json ./
 
-RUN npm install
+RUN npm install --legacy-peer-deps
 
 COPY . .
 

app/(auth)/auth/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { AnimatedBackground } from "@/components/auth/page-sections/AnimatedBackground";
-import { HeroSection } from "@/components/auth/page-sections/HeroSection";
 import { AuthCard } from "@/components/auth/page-sections/AuthCard";
+import { HeroSection } from "@/components/auth/page-sections/HeroSection";
+import { useEffect, useState } from "react";
 
 export default function Authpage() {
     const [mounted, setMounted] = useState(false);

app/(auth)/reset-password/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { Suspense } from "react";
 import { AuthPageLayout, ResetPasswordForm } from "@/components/auth";
 

app/(dashboard)/layout.tsx

@@ -13,11 +13,13 @@ export const metadata: Metadata = {
     description: "Révise mieux, pas plus.",
 };
 
-export default function RootLayout({
-    children,
-}: Readonly<{ children: React.ReactNode }>) {
+export default async function RootLayout(
+    {
+        children,
+    }: Readonly<{ children: React.ReactNode }>
+) {
     // Récupération de l'état de la sidebar depuis les cookies
-    const cookieStore = cookies();
+    const cookieStore = await cookies();
     const sidebarState = cookieStore.get("sidebar:state")?.value;
     // Default to true (expanded) on first load, respect saved preference
     const defaultOpen = sidebarState ? sidebarState === "true" : true;

app/(dashboard)/library/[id]/metadata.ts

@@ -4,16 +4,17 @@ import { generateCourseMetadata } from "@/lib/seo";
 export async function generateMetadata({
     params,
 }: {
-    params: { id: string };
+    params: Promise<{ id: string }>;
 }): Promise<Metadata> {
     // Simplified approach for now - use generic course metadata
     // TODO: Integrate with actual API when available
+    const { id } = await params;
     return generateCourseMetadata({
         title: "Cours",
         subject: "Matière",
         level: "Niveau",
         description:
             "Accédez à votre cours avec quiz et fiches de révision générés par IA.",
-        courseId: params.id,
+        courseId: id,
     });
 }

app/api/courses/[courseId]/files/route.ts

@@ -2,10 +2,10 @@ import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(
     request: NextRequest,
-    { params }: { params: { courseId: string } }
+    { params }: { params: Promise<{ courseId: string }> }
 ) {
     try {
-        const { courseId } = params;
+        const { courseId } = await params;
         const { searchParams } = new URL(request.url);
         const format = searchParams.get("format");
 

app/globals.css

@@ -294,7 +294,23 @@ body {
 }
 
 [data-sonner-toast] [data-close-button]:hover {
-    background: rgba(59, 130, 246, 0.1);
-    color: #1d4ed8;
+    background: #dbeafe;
+    color: #1e293b;
     transform: scale(1.1);
 }
+
+/* Fade In Up Animation */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fadeInUp {
+    animation: fadeInUp 0.5s ease-out forwards;
+}

components/auth/page-sections/HeroSection.tsx

@@ -17,7 +17,7 @@ export function HeroSection({ mounted }: HeroSectionProps) {
                         <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-75"></span>
                         <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-600"></span>
                     </span>
-                    <span className="text-sm font-semibold bg-gradient-to-r from-blue-600 to-blue-500 bg-clip-text text-transparent">
+                    <span className="text-sm font-semibold text-blue-700">
                         Plateforme d'apprentissage
                     </span>
                 </div>

components/auth/reset-password-form.tsx

@@ -20,7 +20,6 @@ export interface ResetPasswordFormProps {
 }
 
 export function ResetPasswordForm({
-    onSuccess,
     onError,
     onBack,
 }: ResetPasswordFormProps) {
@@ -45,7 +44,7 @@ export function ResetPasswordForm({
 
             if (result.success) {
                 setIsSubmitted(true);
-                onSuccess?.();
+                // Don't call onSuccess() immediately - let user see the confirmation
             } else {
                 const errorMessage = result.error || "Une erreur est survenue";
                 setError("root", { message: errorMessage });