After coming across a similar issue, I took matters into my own hands and resolved it. I decided to tackle the problem by creating a new file named @/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,
}

Next, I utilized this new file in @/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 };

I made some adjustments in the imports, particularly by changing 'import NextAuth from "next-auth/next"'. Strangely enough, I'm not entirely sure why this solution worked, but it did. Even reverting back to the previous import setup in my route.ts file did not resolve the issue. Only separating the imports in this specific manner seemed to do the trick...

After trying the accepted solution without success in my Next.js 14.0.4 and Next-Auth 5.0.0-beta.5 setup, I decided to come up with my own workaround.

Instead of moving the authOptions elsewhere, all I did was simply export the two handlers.

const handler = NextAuth({
  /* ... your config ... */
});

export const GET = handler.handlers.GET;
export const POST = handler.handlers.POST;

I encountered a similar issue and was able to resolve it by using the phrase "as never" in the following manner:

import NextAuth from 'next-auth';
import { authConfig } from '@/app/lib/authConfig';

export const handler = NextAuth(authConfig) as never;

export { handler as GET, handler as POST };

import CredentialsProvider from 'next-auth/providers/credentials';

export const authConfig = {
    providers: [
        CredentialsProvider({
            name: 'Credentials',
            credentials: {
                username: {
                    label: 'Email Address',
                    type: 'text',
                    placeholder: 'Email address...'
                },
                password: {
                    label: 'Password',
                    type: 'password',
                    placeholder: 'Password...'
                },

            },
            async authorize(credentials, req) {
                // Add your authorization logic here
                
                // return {
                //     name: ...
                //     email: ...
                //    id: ...
                // };
            }
        })
    ]
};

Here is where I handle my route: api/auth/[[...nextauth]]/route.ts

import { authOptions } from "@/lib/auth";
import NextAuth from "next-auth/next";

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

This is my auth configuration in lib/auth.ts

import type { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { prisma } from './client'
import { compare } from "bcrypt";
import { User } from "@prisma/client";
import NextAuth, { getServerSession } from "next-auth";

export const authOptions: NextAuthOptions = {
   session: {
     strategy: "jwt",
   },
   providers: [
     CredentialsProvider({
       name: "Sign in",
       credentials: {
         email: {
           label: "Email",
           type: "email",
           placeholder: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a5b8a1adb0aca580a5b8a1adb0aca5eea3afad">[email protected]</a>",
         },
         password: { label: "Password", type: "password" },
       },
       async authorize(credentials) {
          if (!credentials) {
             return null;
           }
   
           if (!credentials?.email || !credentials.password) {
             return null
           }
   
           const user = await prisma.user.findUnique({
             where: {
               email: credentials.email
             }
           })
   
           if (!user) {
             return null
           }
   
           const isPasswordValid = await compare(
             credentials.password,
             user.password
           )
   
           if (!isPasswordValid) {
             return null
           }
   
           return {
             id: user.id + '',
             email: user.email,
             name: user.name,
             role: user.role,
             avatarUrl: user.avatarUrl
           }
       },
     }),
   ],
   callbacks: {
     jwt: ({token, user, session, trigger}) => {
       // console.log('JWT Callback', { token, user })
       // console.log('JWT Callback', { token, user, trigger, session });
       
       if (trigger === 'update' && session?.user) {
         return {
           ...token,
           name: session.user.name || token.name,
           email: session.user.email || token.email,
           avatarUrl: session.user.avatarUrl || token.avatarUrl,
         }
       }
 
       if(user) {
         const u = user as unknown as User
         return {
           ...token,
           id: u.id,
           role: u.role,
           avatarUrl: u.avatarUrl
         }
       }
       
       return token
     },
     session: ({session, token, user}) => {
       // console.log('Session Callback', { session, token })
       return {
         ...session,
         user: {
           ...session.user,
           id: token.id,
           role: token.role,
           avatarUrl: token.avatarUrl
         }
       }
       
     },
      
   },
   pages: {
    signIn: '/auth/signin',
   },
 
 };
 export const getServerAuthSession = () => getServerSession(authOptions);

This solution resolved my issue