fix: wrap useSearchParams in Suspense boundary for verify pages
- 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:
parent
13082f97b1
commit
ff22add424
|
|
@ -1,6 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { Suspense, useEffect, useState } from "react";
|
||||||
import { useRouter, useSearchParams } from "next/navigation";
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import {
|
import {
|
||||||
|
|
@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
|
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
|
||||||
|
|
||||||
export default function VerifyLoginPage() {
|
function VerifyLoginContent() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const { verifyLogin } = useAuth();
|
const { verifyLogin } = useAuth();
|
||||||
|
|
@ -121,3 +121,17 @@ export default function VerifyLoginPage() {
|
||||||
</div>
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { Suspense, useEffect, useState } from "react";
|
||||||
import { useRouter, useSearchParams } from "next/navigation";
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import {
|
import {
|
||||||
|
|
@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
|
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
|
||||||
|
|
||||||
export default function VerifySignupPage() {
|
function VerifySignupContent() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const { verifySignup } = useAuth();
|
const { verifySignup } = useAuth();
|
||||||
|
|
@ -121,3 +121,17 @@ export default function VerifySignupPage() {
|
||||||
</div>
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user