Learn how to integrate Corbado into your Next.js pages router application.
Corbado cannot be rendered on the server-side when using the pages router.
This page covers how you can integrate Corbado using lazy loading through
next/dynamic.
Lazy loading means our components will only be loaded once they are needed,
after the initial page load. In general, this improves performance.But it also prevents our components from being rendered on the server-side, which is
currently only possible in the Next.js app router.First create, your authentication component
as the default export of a separate file.
This may look something like this:
Copy
Ask AI
import { CorbadoAuth } from "@corbado/react";import { useRouter } from "next/navigation";export default function Authentication() { const router = useRouter(); const onLoggedIn = () => { //post login actions can be performed here. router.push("/profile"); }; return <CorbadoAuth onLoggedIn={onLoggedIn} />;}
You can now achieve lazy loading by importing your component using next/dynamic:
Copy
Ask AI
import dynamic from "next/dynamic";const Auth = dynamic(() => import("./_components/auth"), {ssr: false});export default function Home() { return ( <Auth /> );}
You have to apply this pattern to every component that uses either Corbado components or hooks.