Clerk Next.js v5.2.2中auth导入报错问题求助

问题描述 #

在Next.js应用中使用@clerk/nextjs v5.2.2版本集成认证时，遇到两个导入错误：

• 从@clerk/nextjs导入auth时，报错：Module '@clerk/nextjs' has no exported member 'auth'.ts(2305)
• 改为从@clerk/nextjs/dist/types/server导入auth时，报错：Module not found: Package path ./dist/types/server is not exported from package

用户提供的Navbar组件代码：

import Link from 'next/link';
import React from 'react';
import { UserButton, useAuth } from '@clerk/nextjs';
import { auth } from '@clerk/nextjs/dist/types/server';

const Navbar = async () => {
    const {userId} = await auth();
    const isAuth = !!userId
  return (
    <div>
        <ul className=' flex justify-between m-10 items-center'>
            <div>
                <Link href="/">
                    <li>Home</li>
                </Link>
            </div>
            <div className='flex gap-10'>
                {!isAuth ? (
                <>
                <Link href="/sign-in">
                    <li>Login</li>
                </Link>
                <Link href="/sign-up">
                    <li>Signup</li>
                </Link>          
                </>
                ):
                <>
                <Link href="/sign-up">
                    <li>Profile</li>
                </Link>
                <li><UserButton/></li>
                </>
                )}
            </div>
        </ul>
    </div>
  )
}

export default Navbar

middleware.ts代码：

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = {
  matcher: ["/((?!.*\..*|_next).*)", "/", "/(api|trpc)(.*)", "/(.*)"],
};

解决方案 #

Clerk v5.x版本对API路径做了拆分，按以下步骤修正即可：

1. 修正auth的导入路径 #

在服务端组件中，auth函数必须从@clerk/nextjs/server导入，而非原路径或内部dist目录：

import { auth } from '@clerk/nextjs/server';

2. 调整Navbar组件代码 #

移除无用的useAuth客户端钩子，同时修正登录后跳转路径的错误：

import Link from 'next/link';
import React from 'react';
import { UserButton } from '@clerk/nextjs';
import { auth } from '@clerk/nextjs/server';

const Navbar = async () => {
    const { userId } = await auth();
    const isAuth = !!userId;
  return (
    <div>
        <ul className='flex justify-between m-10 items-center'>
            <div>
                <Link href="/">
                    <li>Home</li>
                </Link>
            </div>
            <div className='flex gap-10'>
                {!isAuth ? (
                <>
                <Link href="/sign-in">
                    <li>Login</li>
                </Link>
                <Link href="/sign-up">
                    <li>Signup</li>
                </Link>          
                </>
                ):
                <>
                <Link href="/profile">
                    <li>Profile</li>
                </Link>
                <li><UserButton/></li>
                </>
                )}
            </div>
        </ul>
    </div>
  )
}

export default Navbar

3. 保留middleware配置 #

你的middleware.ts配置符合Clerk v5.x要求，无需修改。

关键说明 #

• Clerk v5.x将服务端API（如auth、clerkMiddleware）统一放在@clerk/nextjs/server路径下，客户端组件API（如UserButton、useAuth）仍从@clerk/nextjs导入。
• 异步组件在Next.js中默认是服务端组件，可直接调用auth()；若为客户端组件，需使用useAuth()钩子获取用户信息。

内容的提问来源于stack exchange，提问作者Koza