问题：
我正在使用 Next.js 并使用 Clerk 与 Convex 客户端一起进行身份验证。我遇到了这个错误：
错误：Clerk：在静态模式下调用 useAuth()，将此组件包装在
中，以使身份验证数据在服务器端渲染期间可用。<ClerkProvider dynamic>
我尝试按照错误提示将组件包装在
<ClerkProvider dynamic>"use client"这是我的设置：
提供者和布局设置:
我使用
ConvexProviderWithClerkClerkProvideruseAuth下面是我的
ConvexClientProviderimport { ClerkProvider, useAuth } from "@clerk/nextjs";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ConvexReactClient } from "convex/react";
interface ConvexClientProviderProps {
children: React.ReactNode;
}
const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!;
const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL!;
const convex = new ConvexReactClient(convexUrl);
export const ConvexClientProvider = ({ children }: ConvexClientProviderProps) => {
return (
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<ConvexProviderWithClerk useAuth={useAuth} client={convex}>
{children}
</ConvexProviderWithClerk>
</ClerkProvider>
);
};
根布局组件:
这是我的
RootLayoutConvexClientProviderimport { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { ConvexClientProvider } from "@/providers/convex-client-provider";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<ConvexClientProvider>{children}</ConvexClientProvider>
</body>
</html>
);
}
我尝试过的事情：
"use client"RootLayoutConvexClientProviderConvexClientProvider<ClerkProvider dynamic>您需要从“@clerk/clerk-react”导入ClerkProvider,useAuth；
从“@clerk/clerk-react”导入 { ClerkProvider, useAuth };
凸文档中提到了这一点： https://docs.convex.dev/auth/clerk