RainerWieland/spawner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wrap useSearchParams in Suspense boundary for verify pages

Browse Source 
- Extract VerifySignupContent and VerifyLoginContent components
- Wrap components in Suspense boundary to avoid static generation errors
- Add loading spinner fallback during hydration
- Fixes 'useSearchParams() should be wrapped in a suspense boundary' error in Next.js 14
This commit is contained in:
XPS\Micro 2026-01-31 17:44:51 +01:00
parent 13082f97b1
commit ff22add424
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/verify-login/page.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/hooks/use-auth";
import {
@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
export default function VerifyLoginPage() {
function VerifyLoginContent() {
const router = useRouter();
const searchParams = useSearchParams();
const { verifyLogin } = useAuth();
@ -121,3 +121,17 @@ export default function VerifyLoginPage() {
</div>
);
}
export default function VerifyLoginPage() {
return (
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center bg-muted/50 p-4">
<Loader2 className="h-12 w-12 animate-spin text-primary" />
</div>
}
>
<VerifyLoginContent />
</Suspense>
);
}

18
frontend/src/app/verify-signup/page.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/hooks/use-auth";
import {
@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
export default function VerifySignupPage() {
function VerifySignupContent() {
const router = useRouter();
const searchParams = useSearchParams();
const { verifySignup } = useAuth();
@ -121,3 +121,17 @@ export default function VerifySignupPage() {
</div>
);
}
export default function VerifySignupPage() {
return (
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center bg-muted/50 p-4">
<Loader2 className="h-12 w-12 animate-spin text-primary" />
</div>
}
>
<VerifySignupContent />
</Suspense>
);
}