💭

【NextAuth認証のビルド時に出るcheckFieldsエラーの解消】

2023/11/13に公開

Next.js

NextAuthを組みこんだアプリケーションをVercelでデプロイした所
下記のエラーが出て成功しなかったため解消法をメモしておきます

【エラー文】

when i running build command , i get this error

.next/types/app/api/auth/[...nextauth]/route.ts:8:13
Type error: Type 'OmitWithTag<typeof import("C:/Desktop/sample/app/api/auth/[...nextauth]/route"), "POST" | "GET" | "PUT" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | ... 6 more ... | "PATCH", "">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'handler' 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 ...

参考ページ

authOptionsの箇所でエラーが発生している

src\app\api\auth\[...nextauth]\route.ts

import NextAuth from 'next-auth'
import GithubProvider from 'next-auth/providers/github'
import GoogleProvider from 'next-auth/providers/google'
import { PrismaClient } from "@prisma/client"
import { PrismaAdapter } from "@auth/prisma-adapter"

const prisma = new PrismaClient()

export const authOptions = {
    secret: process.env.NEXTAUTH_SECRET,
    adapter: PrismaAdapter(prisma),
    providers: [
      GithubProvider({
        clientId: process.env.GITHUB_CLIENT_ID ?? '',
        clientSecret: process.env.GITHUB_CLIENT_SECRET ?? '',
      }),
      GoogleProvider({
          clientId: process.env.Google_CLIENT_ID ?? '',
          clientSecret: process.env.Google_CLIENT_SECRET ?? '',
        }),
    ],
   }
   
const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

【エラー解消方法】

authOptionsを別ファイルで定義しインポートする事で解消された。
【authOptionsを定義】

src\lib\AuthOption.jsx

import GithubProvider from 'next-auth/providers/github'
import GoogleProvider from 'next-auth/providers/google'
import { PrismaClient } from "@prisma/client"
import { PrismaAdapter } from "@auth/prisma-adapter"

const prisma = new PrismaClient()

export const authOptions = {
    secret: process.env.NEXTAUTH_SECRET,
    adapter: PrismaAdapter(prisma),
    providers: [
      GithubProvider({
        clientId: process.env.GITHUB_CLIENT_ID ?? '',
        clientSecret: process.env.GITHUB_CLIENT_SECRET ?? '',
      }),
      GoogleProvider({
          clientId: process.env.Google_CLIENT_ID ?? '',
          clientSecret: process.env.Google_CLIENT_SECRET ?? '',
        }),
    ],
   }

【authOptionsをインポートする】

src\app\api\auth\[...nextauth]\route.ts

import NextAuth from 'next-auth'
import { authOptions } from "@/lib/AuthOption"
 
const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

【エラー文】

参考ページ

【エラー解消方法】

Discussion