Next.js 13.4 和 NextAuth 类型错误：“AuthOptions”不可分配给类型“never”

Question

我目前正在开发 Next.js 13.4 项目，并尝试使用应用程序/路由器设置 NextAuth。但是，我遇到了似乎无法解决的类型错误。

这是我的 Route.ts 文件：

import NextAuth, { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

export const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.CLIENT_ID as string,
      clientSecret: process.env.CLIENT_SECRET as string,
    }),
  ],
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

这是运行“npm run build”时的错误消息：

- info Linting and checking validity of types ...Failed to compile.

.next/types/app/api/auth/[...nextauth]/route.ts:8:13
Type error: Type 'OmitWithTag<typeof import("C:/Users/Luk/Documents/Workspace/zerotwo-dash/src/app/api/auth/[...nextauth]/route"), "GET" | "POST" | "HEAD" | "OPTIONS" | "PUT" | "DELETE" | "PATCH" | "config" | ... 6 more ... | "runtime", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'authOptions' is incompatible with index signature.
    Type 'AuthOptions' is not assignable to type 'never'.

   6 |
   7 | // Check that the entry is a valid entry
>  8 | checkFields<Diff<{
     |             ^
   9 |   GET?: Function
  10 |   HEAD?: Function
  11 |   OPTIONS?: Function

我真的不知道这里发生了什么...当在 nextauth 的 github 页面上查找“AuthOptions”时，我发现我的代码没有任何问题。

对于如何解决此问题的任何见解或建议，我将不胜感激。提前致谢！

Answer 1

好吧我自己解决了。对于遇到同样问题的人，我创建了一个新文件@/utils/authOptions.ts：

import { NextAuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

export const authOptions: NextAuthOptions = {
    providers: [
        DiscordProvider({
            clientId: process.env.CLIENT_ID as string,
            clientSecret: process.env.CLIENT_SECRET as string,
        }),
    ],
    session: {
        strategy: "jwt",
    },
    secret: process.env.NEXTAUTH_SECRET,
}

并在 @/api/auth/[...nextauth]/route.ts 中使用它：

import { authOptions } from "@/utils/authOptions";
import NextAuth from "next-auth/next";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

我稍微更改了导入（从“next-auth/next”导入 NextAuth），我不知道为什么这会起作用，但它确实......即使像以前一样更改我的 Route.ts 中的导入也无法修复它。只要就这样分开就好了……

Answer 2

基本上，问题在于使用 nextJs 13.4+ 的 Route.ts 文件中的处理程序导出 authOptions，只需从 authOptions 中删除导出即可。这就是分离 authOptions 起作用的原因:)。

路线.ts -->

import NextAuth, { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

// Here we removed the export
const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.CLIENT_ID as string,
      clientSecret: process.env.CLIENT_SECRET as string,
    }),
  ],
  session: {
    strategy: "jwt",
  },`enter code here`
  secret: process.env.NEXTAUTH_SECRET,
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

如果我们想要 authOptions 在其他地方，我们可以这样做 --->

import NextAuth, { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

// Here we removed the export
const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.CLIENT_ID as string,
      clientSecret: process.env.CLIENT_SECRET as string,
    }),
  ],
  session: {
    strategy: "jwt",
  },`enter code here`
  secret: process.env.NEXTAUTH_SECRET,
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST, authOptions }