使用Next.js+TypeScript集成Google Auth0遇UserProvider导出错误

这个错误是因为@auth0/nextjs-auth0的版本差异导致的：

• v1.x版本中，用于Pages Router的用户上下文提供者是UserProvider
• v2.x版本中，该组件被重命名为PagesRouterUserProvider（同时新增了AppRouterUserProvider适配App Router）

你可以根据需求选择以下两种解决方案：

方案一：降级到v1.x版本继续使用原有代码 #

1. 卸载当前安装的包：

npm uninstall @auth0/nextjs-auth0

2. 安装v1.x稳定版本：

npm install @auth0/nextjs-auth0@^1.0.0

3. 你的原有代码无需修改，可直接正常运行。

方案二：升级到v2.x版本并修改代码适配 #

1. 确保安装最新v2.x版本：

npm install @auth0/nextjs-auth0@latest

2. 修改_app.tsx中的导入和组件：

import '../styles/globals.css'
import type { AppProps } from 'next/app'
// 替换原有导入
import { PagesRouterUserProvider } from '@auth0/nextjs-auth0'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    // 替换为PagesRouterUserProvider
    <PagesRouterUserProvider>
      <Component {...pageProps} />
    </PagesRouterUserProvider>
  )
}

export default MyApp

额外注意 #

如果你使用的是Next.js 13+的App Router（而非传统Pages Router），则需要导入AppRouterUserProvider并在layout.tsx中使用，而非_app.tsx。

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