typescript - 模組 '"@clerk/nextjs"' 沒有匯出的成員 'auth'

我正在我的 Next 應用中實作 Clerk Js 認證。

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


const Navbar = async () => {
    const {userId} = await auth();
    const isAuth = !!userId
  return (

然而，我在終端機和瀏覽器上收到一個錯誤，顯示：模組 '"@clerk/nextjs"' 沒有匯出的成員 'auth'.ts(2305)。

我已經從匯入中刪除了 auth，改為從/import { auth } from '@clerk/nextjs/dist/types/server'; 匯入，這樣就沒有錯誤了。

保存時，我又遇到了一個 TypeScript 錯誤：找不到模組：套件路徑 ./dist/types/server 未從套件中導出。

這可能是什麼原因造成的，我該如何解決。我已經安裝了 "@clerk/nextjs": "^5.2.2"。

這裡是完整的程式碼：

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

這是我從 Clerk 文件中獲取的 middleware.ts 代碼：

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

export default clerkMiddleware();

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

我匯入了 import { UserButton, auth, useAuth } from '@clerk/nextjs'; 並期望能成功使用它來驗證使用者：

const Navbar = async () => {
    const {userId} = await auth();
    const isAuth = !!userId

答案＃1

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

從 @clerk/nextjs/server 導入，它已經從 @clerk/nextjs 改變，以減少包大小

答案＃2

我之前也遇到過類似的問題。你可能想使用：

1. ClerkProvider 元件
2. 這個更高階元件的任何子元件都可以使用 Clerk 特定的 hooks，例如 useAuth，以及像 <Signup> 這樣的元件，以讓你的開發更方便

3. 除非使用，否則這些客戶端便利功能 將無法運作：

   • 在 <ClerkProvider> 的子代組件中
   • 你需要在任何使用（clerk）hooks 的組件的檔案頂部放置 'use client'，因為它們純粹是客戶端功能。
4. 正如上面的人提到的，正確的導入是 import { auth } from "@clerk/nextjs/server"

伺服器端/後端的實作略有不同。