diff --git a/demo/nextjs/app/accept-invitation/[id]/page.tsx b/demo/nextjs/app/accept-invitation/[id]/page.tsx
index b2a01478..658ab6fb 100644
--- a/demo/nextjs/app/accept-invitation/[id]/page.tsx
+++ b/demo/nextjs/app/accept-invitation/[id]/page.tsx
@@ -11,19 +11,16 @@ import {
 } from "@/components/ui/card";
 import { CheckIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { Skeleton } from "@/components/ui/skeleton";
 import { client, organization } from "@/lib/auth-client";
 import { InvitationError } from "./invitation-error";
 import { Invitation } from "@/lib/auth-types";
 
-export default function InvitationPage({
-	params,
-}: {
-	params: {
+export default function InvitationPage() {
+	const params = useParams<{
 		id: string;
-	};
-}) {
+	}>();
 	const router = useRouter();
 	const [invitationStatus, setInvitationStatus] = useState<
 		"pending" | "accepted" | "rejected"
diff --git a/demo/nextjs/app/page.tsx b/demo/nextjs/app/page.tsx
index c31de30d..0e157cbd 100644
--- a/demo/nextjs/app/page.tsx
+++ b/demo/nextjs/app/page.tsx
@@ -1,5 +1,4 @@
 import { SignInButton, SignInFallback } from "@/components/sign-in-btn";
-import { headers } from "next/headers";
 import { Suspense } from "react";
 
 export default async function Home() {
diff --git a/demo/nextjs/components/sign-in-btn.tsx b/demo/nextjs/components/sign-in-btn.tsx
index 69eee846..302bb155 100644
--- a/demo/nextjs/components/sign-in-btn.tsx
+++ b/demo/nextjs/components/sign-in-btn.tsx
@@ -49,9 +49,9 @@ function checkOptimisticSession(headers: Headers) {
 	return !!guessIsSignIn;
 }
 
-export function SignInFallback() {
+export async function SignInFallback() {
 	//to avoid flash of unauthenticated state
-	const guessIsSignIn = checkOptimisticSession(headers());
+	const guessIsSignIn = checkOptimisticSession(await headers());
 	return (
 		<Link
 			href={guessIsSignIn ? "/dashboard" : "/sign-in"}