chore: the hanko-elements can be used in nextjs without dynamic imports

frontend/examples/nextjs/components/HankoAuth.tsx

@@ -1,5 +1,5 @@
 import { Hanko, register } from "@teamhanko/hanko-elements";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 const api = process.env.NEXT_PUBLIC_HANKO_API!;
@@ -10,17 +10,19 @@ interface Props {
 
 function HankoAuth({ setError }: Props) {
   const router = useRouter();
-  const hankoClient = useMemo(() => new Hanko(api), []);
+  const [hankoClient, setHankoClient] = useState<Hanko>();
 
   const redirectToTodos = useCallback(() => {
     router.replace("/todo").catch(setError);
   }, [router, setError]);
 
+  useEffect(() => setHankoClient(new Hanko(api)), []);
+
   useEffect(() => {
     register(api).catch(setError);
   }, [setError]);
 
-  useEffect(() => hankoClient.onAuthFlowCompleted(() => {
+  useEffect(() => hankoClient?.onAuthFlowCompleted(() => {
     redirectToTodos()
   }), [hankoClient, redirectToTodos]);
 

frontend/examples/nextjs/pages/index.tsx

@@ -1,11 +1,8 @@
 import type { NextPage } from "next";
-import dynamic from "next/dynamic";
 import styles from "../styles/Todo.module.css";
 import React, { useState } from "react";
+import HankoAuth from "../components/HankoAuth";
 
-const HankoAuth = dynamic(() => import("../components/HankoAuth"), {
-  ssr: false,
-});
 
 const Home: NextPage = () => {
   const [error, setError] = useState<Error | null>(null);

frontend/examples/nextjs/pages/profile.tsx

@@ -1,25 +1,17 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 import styles from "../styles/Todo.module.css";
 
-import { SessionExpiredModal } from "../components/SessionExpiredModal";
 import { Hanko } from "@teamhanko/hanko-elements";
+import { SessionExpiredModal } from "../components/SessionExpiredModal";
+import HankoProfile from "../components/HankoProfile";
 
-const hankoAPI = process.env.NEXT_PUBLIC_HANKO_API!;
-const HankoProfile = dynamic(() => import("../components/HankoProfile"), {
-  ssr: false,
-});
+const api = process.env.NEXT_PUBLIC_HANKO_API!;
 
 const Profile: NextPage = () => {
   const router = useRouter();
   const [hankoClient, setHankoClient] = useState<Hanko>();
-
-  useEffect(() => {
-    import("@teamhanko/hanko-elements").then(({ Hanko }) => setHankoClient(new Hanko(hankoAPI)));
-  }, []);
-
   const modalRef = useRef<HTMLDialogElement>(null);
   const [error, setError] = useState<Error | null>(null);
 
@@ -49,6 +41,7 @@ const Profile: NextPage = () => {
     }
   }, [hankoClient, redirectToLogin]);
 
+  useEffect(() => setHankoClient(new Hanko(api)), []);
 
   useEffect(() => hankoClient?.onUserLoggedOut(() => {
     redirectToLogin();