Next.js中ClerkProvider报错：SWRConfig未导出及类型缺失问题

1. 解决SWRConfig导入错误 #

这个错误是Clerk依赖的SWR版本与你当前安装的SWR版本不匹配导致的，处理方式如下：

• 先卸载当前SWR：npm uninstall swr
• 安装Clerk兼容的SWR版本，比如指定v1.x稳定版：npm install swr@^1.3.0
• 若使用pnpm/yarn，对应命令：pnpm add swr@^1.3.0 / yarn add swr@^1.3.0
• 如果你用的是Clerk最新版本，也可以尝试安装SWR v2.x：npm install swr@latest（部分新版Clerk已适配SWR v2）

2. 解决TypeScript类型错误（缺少routerPush/routerReplace） #

这个问题是因为ClerkProvider需要接收路由相关属性适配Next.js路由系统，分两种场景处理：

App Router（layout.tsx） #

在根布局文件中导入useRouter，手动把路由方法传给ClerkProvider：

import { ClerkProvider } from '@clerk/nextjs'
import { useRouter } from 'next/navigation'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter()

  return (
    <ClerkProvider
      routerPush={router.push}
      routerReplace={router.replace}
    >
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

也可以用Clerk提供的适配器简化配置：

import { ClerkProvider, Nextjs13Adapter } from '@clerk/nextjs'
import { useRouter } from 'next/navigation'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter()

  return (
    <ClerkProvider adapter={Nextjs13Adapter({ router })}>
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

Pages Router（_app.tsx） #

只需把ClerkProvider直接包裹在组件外层即可，无需额外传入路由属性，Clerk会自动适配Pages Router：

import { ClerkProvider } from '@clerk/nextjs'

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  )
}

export default MyApp

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