문제 상황
Next.js App Router로 마이그레이션을 진행하면서, next-auth의 authOptions를 사용하는 API 라우트에서 타입 에러가 발생했다.
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.이 에러는 Next.js의 라우트 파일 구조와 export 규칙을 따르지 않기 때문에 발생한다고 한다.
왜 authOptions가 같은 파일에 작성되면 안 되는지?
API 라우트 파일은 HTTP 메소드 핸들러를 export하는데 집중해야 하는데 authOptions 객체가 API 라우트에서 export되는 함수와 직접적인 관련이 없기 때문이라고 한다.
추가적인 설정이나 옵션 객체는 별도의 파일로 분리하여 관리하는 것이 더 좋다고 한다.
Next.js 13의 App Router에서 API 라우트는 기본적으로 export된 함수들로 정의된다. 아래 처럼 단일 handler 함수를 export하는 게 아니라, HTTP 메소드별로 분리된 함수들을 export해야 한다.
POST와 GET 메소드가 있는 경우
export async function GET(req: Request) {
// GET 메소드에 대한 처리 로직
}
export async function POST(req: Request) {
// POST 메소드에 대한 처리 로직
}해결 방법
authOptions를 별도의 파일로 분리하고, API 라우트 파일에서는 이를 import하여 사용하는 방식으로 문제를 해결했다.
1. authOptions 분리하기
기존의 authOptions를 src/lib/authOptions.ts 경로로 이동 했다.
// src/lib/authOptions.ts
import { AuthOptions } from 'next-auth';
export const authOptions: AuthOptions = {
// your auth options here
};2. next-auth 설정 파일 수정하기
// src/app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import { authOptions } from "@/lib/authOptions";; // 분리된 authOptions 파일
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };결론
Next.js 13의 App Router에서 발생할 수 있는 authOptions 관련 에러는 설정 객체를 별도의 파일로 분리함으로써, 각 파일의 책임이 분명해졌다.
참고자료
Frontend developer