fix: wrap useSearchParams in Suspense boundary for Next.js 14 compatibility

- Added Suspense boundary to verify-success/page.tsx
- Added Suspense boundary to verify-error/page.tsx
- Fixes build error: useSearchParams() should be wrapped in a suspense boundary
- Added Loader2 fallback UI for both pages
This commit is contained in:
XPS\Micro 2026-01-31 10:46:58 +01:00
parent 1b44bb3d10
commit 63a396955e
3 changed files with 34 additions and 3 deletions

5
.gitignore vendored
View File

@ -168,6 +168,11 @@ junit.xml
# Kann bei Bedarf auskommentiert werden um es zu behalten
CLAUDE.md
# AGENTS.md - Guide fuer agentic coding assistants
# Wird von AI-Assistenten zum Verstaendnis der Codebase verwendet
# Sollte nicht gepusht werden
AGENTS.md
# ============================================================
# Misc
# ============================================================

View File

@ -1,5 +1,6 @@
"use client";
import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
@ -10,9 +11,9 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { XCircle, RefreshCw, Mail } from "lucide-react";
import { XCircle, RefreshCw, Mail, Loader2 } from "lucide-react";
export default function VerifyErrorPage() {
function VerifyErrorContent() {
const searchParams = useSearchParams();
const reason = searchParams.get("reason");
@ -67,3 +68,15 @@ export default function VerifyErrorPage() {
</div>
);
}
export default function VerifyErrorPage() {
return (
<Suspense fallback={
<div className="flex min-h-screen items-center justify-center bg-muted/50 px-4">
<Loader2 className="h-12 w-12 animate-spin text-primary" />
</div>
}>
<VerifyErrorContent />
</Suspense>
);
}

View File

@ -1,5 +1,6 @@
"use client";
import { Suspense } from "react";
import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
@ -13,7 +14,7 @@ import {
} from "@/components/ui/card";
import { CheckCircle2, Container, Loader2 } from "lucide-react";
export default function VerifySuccessPage() {
function VerifySuccessContent() {
const router = useRouter();
const searchParams = useSearchParams();
const token = searchParams.get("token");
@ -78,3 +79,15 @@ export default function VerifySuccessPage() {
</div>
);
}
export default function VerifySuccessPage() {
return (
<Suspense fallback={
<div className="flex min-h-screen items-center justify-center bg-muted/50 px-4">
<Loader2 className="h-12 w-12 animate-spin text-primary" />
</div>
}>
<VerifySuccessContent />
</Suspense>
);
}