NextAuth.js와 Next.js App Router의 동적 경로 설정

Next.js의 App Router를 사용하여 NextAuth.js 인증 관련 경로를 관리하는 방법을 알아보겠습니다. 이번 포스트에서는 동적 경로(Catch-All Routes)를 활용해 NextAuth.js와 관련된 다양한 인증 요청을 간편하게 처리할 수 있는 방법을 설명합니다.

1. NextAuth.js란?

NextAuth.js는 OAuth 2.0 및 JWT 기반의 인증을 쉽게 구현할 수 있도록 도와주는 인증 라이브러리입니다. Google, GitHub, Facebook과 같은 다양한 OAuth 제공자를 지원하며, 인증 및 세션 관리 기능을 제공합니다.

📖 NextAuth.js 공식 문서

2. Next.js의 App Router와 파일 기반 라우팅

Next.js 13부터는 기존의 pages 디렉토리 대신 App Router를 도입했습니다. 이를 통해 더욱 명확하고 직관적인 파일 기반 라우팅이 가능해졌습니다. NextAuth.js의 인증 경로도 App Router 방식을 통해 설정할 수 있으며, 이 과정에서 동적 경로를 활용할 수 있습니다.

📖 Next.js 13 App Router 공식 문서

3. 동적 경로와 Catch-All 경로란?

동적 경로는 경로에 변수를 삽입해 다양한 URL 요청을 처리할 수 있는 방식입니다. Next.js에서는 [...]를 사용하여 모든 하위 경로를 Catch-All 경로로 처리할 수 있습니다. 예를 들어, /api/auth/[...nextauth]는 /api/auth 하위의 모든 경로를 처리할 수 있게 해줍니다.

📖 Next.js 동적 경로(Dynamic Routes) 공식 문서

4. NextAuth.js와 동적 경로 설정

NextAuth.js는 기본적으로 로그인, 로그아웃, 세션 확인 등 다양한 요청을 처리합니다. 이를 모두 통합적으로 관리하기 위해 동적 경로를 사용하여 하나의 파일에서 처리할 수 있습니다.

파일 구조

app/
  api/
    auth/
      [...nextauth]/
        route.ts

위와 같은 파일 구조를 사용하면, /api/auth 하위에 존재하는 다양한 경로 (/signin, /signout, /session)를 모두 [...nextauth]에서 처리할 수 있습니다.

route.ts 파일 설정

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};

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

이 설정은 NextAuth.js의 모든 인증 관련 경로를 한 곳에서 처리합니다. Google OAuth 제공자를 예시로 추가했으며, 여러 제공자를 지원하는 방식도 쉽게 확장할 수 있습니다.

• 동적 경로 [...nextauth]: /api/auth 하위의 모든 요청을 처리합니다.
• GET, POST 메서드 처리: NextAuth.js의 요청은 보통 GET 또는 POST 메서드를 사용하므로, 이 두 가지 메서드를 처리하도록 설정합니다.

5. 동적 경로의 이점

동적 경로를 활용하면 다음과 같은 이점을 얻을 수 있습니다:

• 중앙 관리: 다양한 경로(/signin, /signout, /session)를 하나의 파일에서 처리할 수 있어 관리가 쉬워집니다.
• 유연성: 하위 경로의 추가 또는 변경이 있을 때 유연하게 대처할 수 있습니다.
• 코드의 간결성: 여러 파일로 나누는 대신, 하나의 파일에서 모든 인증 로직을 처리할 수 있습니다.

6. 결론

Next.js의 App Router와 동적 경로를 활용하여 NextAuth.js의 인증 관련 경로를 효과적으로 관리할 수 있습니다. 동적 경로는 다양한 인증 요청을 하나의 파일에서 처리할 수 있는 강력한 방법입니다. Next.js에서 App Router 방식을 사용하는 경우, 이 방법을 적용하면 인증 경로를 더 직관적이고 간결하게 설정할 수 있습니다.