ウェブサイト検索

TypeScript - Next.js 13.4 と NextAuth の型エラー: 'AuthOptions' は型 'never' に割り当てできません

私は現在、Next.js 13.4 のプロジェクトに取り組んでおり、app/ ルーターを使用して 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' を調べてみると、私のコードには何も問題がないように見えます…

この問題を解決する方法について、どんな洞察や提案でもいただければありがたいです。事前に感謝します！

回答 #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 };

インポートを少し変更しました（import NextAuth from "next-auth/next"）。正直なところ、なぜこれが動くのか分かりませんが、動きます…以前のように route.ts 内でインポートを入れ替えても修正されません。分けて書いた場合だけ動きます…

回答 #2

基本的に問題は、NextJs 13.4+ の route.ts ファイルで handlers と一緒に authOptions をエクスポートすることにあります。単に authOptions からエクスポートを削除する だけで問題は解決します。authOptions を分離することでうまくいったのはその理由です :)。

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

関連記事