Next.js+Clerk+Convex集成报错：useAuth()静态模式调用问题求助

云上老周

2026-6-16

Next.js + Clerk + Convex 认证报错问题

遇到如下错误：

错误信息：Clerk: useAuth() 在静态模式下被调用，请将组件包裹在中，以便在服务端渲染期间提供认证数据。

已尝试按照提示用<ClerkProvider dynamic>包裹组件，并在文件顶部添加"use client"，但仍报错。以下是当前配置：

当前配置

1. Convex客户端Provider配置

使用ConvexProviderWithClerk搭配ClerkProvider传递useAuth进行认证，代码如下：

import { 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>
    );
};

2. RootLayout布局配置

用ConvexClientProvider包裹整个应用，代码如下：

import { 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>
    );
}