问题

Your provided content:

"My NextJS 13 app isn't building and is returning a type error but it is completely working on development environment.

The type error is shown in this file:

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}

The file path is app/api/auth/[...nextauth]/route.ts.

This is the error message shown in the console:

.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 ...

I have provided the translated content.

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}

.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 ...

答案1

得分: 10

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

导入NextAuth和AuthOptions来自"next-auth";
导入GoogleProvider来自"next-auth/providers/google";

/* 你不应该在API route.ts / route.js文件中导出authOptions。
这是错误的原因!! */

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方法)

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}

答案2

得分: 1

I was building an app with NextAuth recently and as I recall they still suggest you using 'pages' folder to handle all api requests. So you can try to:

1. create pages/api/auth folder in src directory
2. create file called [...nextauth].ts inside of it
3. create a file that would hold authOptions somewhere in your project, for example in features/lib
4. export your options from this file:
   export const authOptions: AuthOptions = {...}
   and import them in your route to consume:
   export default NextAuth(authOptions);

Alternatively, you can configure your Next project to forget about TS errors when building as noted here:

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

Cheers!

[1]: https://github.com/vercel/next.js/blob/canary/docs/api-reference/next.config.js/ignoring-typescript-errors.md

<details>
<summary>英文:</summary>

I was building an app with NextAuth recently and as I recall they still suggest you using &#39;pages&#39; folder to handle all api requests. So you can try to:

1) create pages/api/auth folder in src directory
2) create file called [...nextauth].ts inside of it
3) create a file that would hold authOptions somewhere in your project, for example in features/lib
4) export your options from this file:

export const authOptions: AuthOptions = {...}

and import them in your route to consume:

export default NextAuth(authOptions);

Alternatively, you can configure your Next project to forget about TS errros when building as noted here: 
[1]

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

Cheers!


  [1]: https://github.com/vercel/next.js/blob/canary/docs/api-reference/next.config.js/ignoring-typescript-errors.md

</details>



# 答案3
**得分**: 1

你在使用NextJS的route.ts文件时，不允许导出任意对象。你只能导出命名为GET、POST、PATCH等的对象。因为你正在导出authOptions，所以构建失败了。

如果你需要在应用的其他部分使用authOptions，你需要将它移动到除了route.ts之外的文件中。如果你不需要在应用的其他部分使用authOptions，只需删除导出语句，然后应该能够构建成功。

<details>
<summary>英文:</summary>

You are not allowed to export any arbitrary object when using a route.ts file in NextJS. You can only export objects named GET, POST, PATCH, etc. Since you are exporting authOptions, the build is failing. 

If you need authOptions in another part of your app, you will need to move into a file other than route.ts. If you don&#39;t need authOptions in another part of your app, just get rid of the export and it should build. 

</details>



# 答案4
**得分**: 1

这对我有用！

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

```javascript
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 将返回错误。链接到文档。

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

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

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

答案5

得分: 0

我认为问题出在你的导入部分，请尝试这样更改：

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

这意味着将AuthOption更改为NextAuthOptions并将import NextAuth from "next-auth/next"更改为import NextAuth from "next-auth/next";

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}