fix: viewport metadata (Next.js 15), lazy auth client init (location SSR error), force-dynamic dashboard

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
 
@@ -7,7 +7,6 @@ const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
 export const metadata: Metadata = {
   title: "EduEasy",
   description: "Plataforma educativa infantil",
-  viewport: "width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover",
   appleWebApp: {
     capable: true,
     statusBarStyle: "default",
@@ -15,6 +14,13 @@ export const metadata: Metadata = {
   },
 }
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  viewportFit: "cover",
+}
+
 export default function RootLayout({
   children,
 }: {

app/parent/auth/login/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import { useRouter } from "next/navigation"
-import { authClient } from "@/lib/auth-client"
+import { getAuth } from "@/lib/auth-client"
 
 export default function LoginPage() {
   const [email, setEmail] = useState("")
@@ -16,7 +16,14 @@ export default function LoginPage() {
     setLoading(true)
     setError("")
 
-    const { error: err } = await authClient.signIn.email({
+    const auth = getAuth()
+    if (!auth) {
+      setError("Error de inicialización")
+      setLoading(false)
+      return
+    }
+
+    const { error: err } = await auth.signIn.email({
       email,
       password,
     })

app/parent/auth/pairing/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from "react"
-import { authClient } from "@/lib/auth-client"
+import { getAuth } from "@/lib/auth-client"
 import { useRouter } from "next/navigation"
 import { GatoMascota } from "@/components/child/gato-mascota"
 
@@ -10,7 +10,8 @@ export default function PairingPage() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState("")
   const [paired, setPaired] = useState(false)
-  const { data: session } = authClient.useSession()
+  const auth = getAuth()
+  const { data: session } = auth?.useSession() ?? { data: null }
   const router = useRouter()
 
   const handlePairing = async (e: React.FormEvent) => {

app/parent/configuracion/page.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import { authClient } from "@/lib/auth-client"
+import { getAuth } from "@/lib/auth-client"
 import { useRouter } from "next/navigation"
 
 export default function ConfigPage() {
-  const { data: session } = authClient.useSession()
+  const auth = getAuth()
+  const { data: session } = auth?.useSession() ?? { data: null }
   const router = useRouter()
 
   return (

app/parent/dashboard/page.tsx

@@ -1,16 +1,21 @@
 "use client"
 
+import { useEffect } from "react"
 import { useRouter } from "next/navigation"
-import { authClient } from "@/lib/auth-client"
+import { getAuth } from "@/lib/auth-client"
 
 export default function ParentDashboard() {
-  const { data: session } = authClient.useSession()
+  const auth = getAuth()
+  const { data: session } = auth?.useSession() ?? { data: null }
   const router = useRouter()
 
-  if (!session) {
-    router.push("/parent/auth/login")
-    return null
-  }
+  useEffect(() => {
+    if (session === null) {
+      router.push("/parent/auth/login")
+    }
+  }, [session, router])
+
+  if (!session) return null
 
   return (
     <div className="min-h-dvh p-6">
@@ -22,7 +27,7 @@ export default function ParentDashboard() {
           </p>
         </div>
         <button
-          onClick={() => authClient.signOut()}
+          onClick={() => auth?.signOut()}
           className="text-sm text-muted-foreground underline"
         >
           Cerrar sesión

app/parent/page.tsx

@@ -2,10 +2,11 @@
 
 import { useEffect } from "react"
 import { useRouter } from "next/navigation"
-import { authClient } from "@/lib/auth-client"
+import { getAuth } from "@/lib/auth-client"
 
 export default function ParentPage() {
-  const { data: session, isPending } = authClient.useSession()
+  const auth = getAuth()
+  const { data: session, isPending } = auth?.useSession() ?? { data: null, isPending: false }
   const router = useRouter()
 
   useEffect(() => {

lib/auth-client.ts

@@ -2,8 +2,18 @@
 
 import { createAuthClient } from "better-auth/react"
 
-export const authClient = createAuthClient({
-  baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
-})
+let client: ReturnType<typeof createAuthClient> | null = null
 
-export const { signIn, signUp, useSession } = authClient
+function initClient() {
+  if (typeof window === "undefined") return
+  if (!client) {
+    client = createAuthClient({
+      baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
+    })
+  }
+  return client
+}
+
+export function getAuth() {
+  return initClient()
+}