我的 Next Js 应用程序未构建并返回类型错误，我该如何修复？

Question

我的 NextJS 13 应用程序未构建并返回类型错误，但它完全可以在开发环境中运行

\n

该文件中显示类型错误

\n

import NextAuth, { AuthOptions } from "next-auth";\nimport GoogleProvider from "next-auth/providers/google"\n\nexport const authOptions: AuthOptions = {\n    providers: [\n        GoogleProvider({\n            clientId: process.env.GOOGLE_ID as string,\n            clientSecret: process.env.GOOGLE_SECRET as string,\n        }),\n    ],\n}\n\nconst handler = NextAuth(authOptions);\n\nexport { handler as GET, handler as POST}\n

\n

文件路径是 app/api/auth/[...nextauth]/route.ts

\n

这是控制台 \xe2\xac\x87\xef\xb8\x8f 中显示的错误消息

\n

.next/types/app/api/auth/[...nextauth]/route.ts:8:13\nType error: Type 'OmitWithTag<typeof import("D:/4 - Coding/Training/NextAuth/next-auth-new/app/api/auth/[...nextauth]/route"), "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | ... 9 more ... | "PATCH", "">' does not satisfy the constraint '{ [x: string]: never; }'.\n  Property 'authOptions' is incompatible with index signature.\n    Type 'AuthOptions' is not assignable to type 'never'.\n\n   6 |\n   7 | // Check that the entry is a valid entry\n>  8 | checkFields<Diff<{\n     |             ^\n   9 |   GET?: Function\n  10 |   HEAD?: Function\n  11 |   OPTIONS?: Function\n- info Linting and checking validity of types ...\n

\n

我不知道从哪里开始，因为我是 NextJs 前端的新手，\n尝试用 google 搜索错误，但它没有返回任何相关答案，吟游诗人 AI 也没有帮助

\n

Answer 1

对我来说，问题出export const authOptions在route.ts

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google"

/* You shouldn't export authOptions in API route.ts / route.js file.
 This is the cause of error!! */

export const authOptions: AuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID as string,
            clientSecret: process.env.GOOGLE_SECRET as string,
        }),
    ],
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

只需单独的authOptions文件，然后将其导入authOptions到您的[...nextauth]/route.ts.

另请参阅： https: //nextjs.org/docs/app/building-your-application/routing/router-handlers#supported-http-methods（仅允许导出 HTTP 方法）

Answer 2

这对我有用！

将 authOptions 移动到不同的文件夹中

import { AuthOptions } from "next-auth";
import GoogleProvider from 'next-auth/providers/google';

export const authOptions: AuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID as string,
            clientSecret: process.env.GOOGLE_SECRET as string,
        }),
    ],
}

并导入到route.ts

import { authOptions } from '@/lib/authOptions';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

这是因为您只能导出 HTTP 方法（GET、HEAD、POST、PUT、DELETE等）。如果调用不受支持的方法，Next.js 将返回错误。文档链接。

Answer 3

我最近正在使用 NextAuth 构建一个应用程序，我记得他们仍然建议您使用“pages”文件夹来处理所有 api 请求。所以你可以尝试：

1. 在src目录下创建pages/api/auth文件夹
2. 在其中创建名为 [...nextauth].ts 的文件
3. 创建一个在项目中的某个位置保存 authOptions 的文件，例如在 features/lib 中
4. 从此文件导出您的选项：

export const authOptions: AuthOptions = {...}

并将它们导入到您的消费路线中：

export default NextAuth(authOptions);

或者，您可以将 Next 项目配置为在构建时忘记 TS 错误，如下所示：链接

module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}

干杯!