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

Question

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

此文件中显示类型错误

import NextAuth, { 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,
        }),
    ],
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

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

这是控制台中显示的错误消息⬇️

.next/types/app/api/auth/[...nextauth]/route.ts:8:13
Type 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; }'.
  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
- info Linting and checking validity of types ...

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

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

在NextJS中使用route.ts文件时，不允许导出任何任意对象。您只能导出名为 GET、POST、PATCH 等的对象。由于您正在导出 authOptions，因此构建失败。

如果您在应用程序的其他部分需要 authOptions，则需要移至除route.ts 之外的文件中。如果您的应用程序的其他部分不需要 authOptions，只需删除导出即可构建它。

Answer 4

我最近正在使用 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 错误，如下所示：link

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

干杯！

Answer 5

我认为问题是你的进口尝试这个：

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

export const authOptions: NextAuthOptions = {
    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}

因此意味着将

AuthOption

更改为

NextAuthOptions

和

import NextAuth from "next-auth/next";

Answer 6

我正在使用 Next js 14.0，错误来自 api 路由。也就是说，从 api 路由导出某些函数或变量时应该是 GET、POST、PUT、DELETE 方法和其他此类 CRUD 操作，因此这就是类型错误所以解决方案是从其他文件导出 authOptions 例如：@lib/auth.ts

type TEntry = typeof import('../../../../../../app/api/auth/[...nextauth]/route.js')

// Check that the entry is a valid entry
checkFields<Diff<{
  GET?: Function
  HEAD?: Function
  OPTIONS?: Function
  POST?: Function
  PUT?: Function
  DELETE?: Function
  PATCH?: Function
  config?: {}
  generateStaticParams?: Function
  revalidate?: RevalidateRange<TEntry> | false
  dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
  dynamicParams?: boolean
  fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache'
  preferredRegion?: 'auto' | 'global' | 'home' | string | string[]
  runtime?: 'nodejs' | 'experimental-edge' | 'edge'
  maxDuration?: number
  
}, TEntry, ''>>()

这里 TEntry 是从您要导出的函数或变量中获取的。所以它应该是这种类型，否则它将返回错误类型