1. 문제 발생

Next.js 프로젝트를 배포하는 중 아래와 같은 에러가 발생했다.

src/app/api/auth/[...nextauth]/route.ts
Type error: Route "src/app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route.
"authOptions" is not a valid Route export field.

아래는 src/app/api/auth/[...nextauth]/route.ts 의 코드다.

import { addUser } from "@/app/service/user"
import NextAuth, { NextAuthOptions } from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export const authOptions : NextAuthOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_OAUTH_ID || '',
      clientSecret: process.env.GOOGLE_OAUTH_SECRET || '',
    }),
    // ...add more providers here
  ],
  callbacks : {
    async signIn({user : {id, name, image, email}}){
      if(!email){
        return false
      }
      addUser({
        id, 
        name : name || '', 
        image, 
        email, 
        username : email?.split('@')[0],
      })
      return true
    },
    async session({session, token}) {
      const user = session?.user;
      if(user) {
        session.user = {
          ...user,
          username : user.email?.split('@')[0] || '',
          id : token.id as string,
        }
      }
      return session
    },
    async jwt({token, user}){
      if(user){
        token.id = user.id;
      }
      return token;
    }
  },
  pages : {
    signIn : '/auth/signin',
  },
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

이에 관한 내용이 https://github.com/vercel/next.js/discussions/50511 이 곳에서 활발하게 오갔다.

2. 문제 해결

Next 13버전까지는 문제가 없고, 14버전부터 발생한 문제라고 하며,

여기서 많은 좋아요를 받은 글에서 export const authOptions : NextAuthOptions 이 authOptions를 export 하지 않도록 수정하면 잘 동작한다고 했다.

하지만 이렇게 되면 authOptions 를 import 하는 다른 곳에서 문제가 발생했다.

https://github.com/vercel/next.js/issues/50870

Hi, you can move authOptions into a different file, (eg.: auth.ts) and import it from there, to make this go away.

I'm working on a new version of NextAuth.js (I'm the maintainer) which won't have this issue. In any case, Next.js behaves as expected here, so I'm closing this issue.

위의 링크에서는 위의 답변을 남겼다.

authOptions 를 다른 파일로 가져오면 문제가 없다고 한다.

결국 처음 봤던 답변도 맞는셈이었다.

그래서 authOptions를 분리해주었다.

// src/app/auth/authOptions.ts
import { NextAuthOptions } from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { addUser } from "@/app/service/user"

export const authOptions : NextAuthOptions = {
    // Configure one or more authentication providers
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_OAUTH_ID || '',
        clientSecret: process.env.GOOGLE_OAUTH_SECRET || '',
      }),
      // ...add more providers here
    ],
    callbacks : {
      async signIn({user : {id, name, image, email}}){
        if(!email){
          return false
        }
        addUser({
          id, 
          name : name || '', 
          image, 
          email, 
          username : email?.split('@')[0],
        })
        return true
      },
      async session({session, token}) {
        const user = session?.user;
        if(user) {
          session.user = {
            ...user,
            username : user.email?.split('@')[0] || '',
            id : token.id as string,
          }
        }
        return session
      },
      async jwt({token, user}){
        if(user){
          token.id = user.id;
        }
        return token;
      }
    },
    pages : {
      signIn : '/auth/signin',
    },
}

// src/app/api/auth/[...nextauth]/route.ts
import { authOptions } from "@/app/auth/authOptions";
import NextAuth from "next-auth"


const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };