reactjs - Nextjs 13 build: la ubicación no está definida

He configurado una verificación de autenticación mediante localstorage en una aplicación de Next.js de la siguiente manera:

'use client'

const router = useRouter();
const [auth, setAuth] = useState<string | null>(null);

const checkAuth = () => {
    return localStorage.getItem('auth');
}

useEffect(() => {
        setAuth(checkAuth());
    }, []);

if (!auth) {
        router.push('/admin/login');
        return;
    }

return <div>...</div>

El problema es que cuando construyo el proyecto obtengo el siguiente error: ReferenceError: location no está definido en AdminPage (admin/page.tsx:260:16)

Tenga en cuenta que también he intentado comprobar si el objeto window está indefinido antes de acceder a localstorage, pero el error sigue siendo el mismo. ¿Hay otra manera de comprobar el elemento auth desde localstorage para evitar que los usuarios no conectados accedan a esta página y redirigirlos a la página de inicio de sesión?

Respuesta #1

Necesitas usar la directiva “use client” para los componentes del lado del cliente.

Pon "use client" como la primera línea en el archivo que contiene este componente.

Respuesta #2

Me he encontrado con el mismo problema y, de hecho, lo extraño es que es un componente del cliente...

La "ubicación" (también conocida como useRouter) es accesible desde el documento o la ventana, pero en la "compilación" estás, digamos, en el nodo, y en el entorno de nodo no tienes acceso a la ubicación. Lo mismo ocurre con el localStorage.

No logré encontrar una explicación para este comportamiento, pero una solución es poner tu localStorage y también el router.push dentro de un hook useEffect.

GL