NextAuth调用报错：This expression is not callable问题求助

问题场景 #

使用Next.js 13.4.10 + next-auth 4.22.2，在app/api/auth/[...nextauth]/route.ts中按文档编写代码后，出现TypeScript报错：

This expression is not callable.
  Type 'typeof import("e:/Javascript/learnauth2/node_modules/next-auth/next")' has no call signatures.ts(2349)

解决方案 #

核心问题是App Router环境下NextAuth的导入路径错误，需要将NextAuth的导入源从next-auth改为next-auth/next。

修正后的代码 #

import NextAuth from "next-auth/next";
import { type NextAuthOptions } from "next-auth";
import GithubProvider from "next-auth/providers/github";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),

    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: {
          label: "Username",
          type: "text",
          placeholder: "John Smith",
        },
        password: {
          label: "Password",
          type: "password",
          placeholder: "*******",
        },
      },
      async authorize(credentials) {
        // 实际场景中应从数据库获取用户数据
        const user = { id: "1", name: "John", password: "pass" };
        if (
          credentials?.username === user.name &&
          credentials.password === user.password
        ) {
          return user;
        } else {
          return null;
        }
      },
    }),
  ],
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

原因说明 #

next-auth 4.x对Next.js的Pages Router和App Router采用了不同的入口：

• Pages Router下直接从next-auth导入NextAuth函数
• App Router下必须从next-auth/next导入专门适配App Router的handler创建函数，否则会出现类型不匹配的报错

内容的提问来源于stack exchange，提问作者GN Vageesh