Next.js에서 [...nextauth]는 무슨 뜻일까? - 캐치올 라우트 (Catch-all Route) 완전 정복

Next.js에서 [...nextauth]는 무슨 뜻일까? - 캐치올 라우트(Catch-all Route) 완전 정복

✅ 이 글은 Next.js로 인증 기능을 구현할 때 자주 등장하는 [...nextauth] 폴더 구조가 무엇인지, 왜 사용하는지, 초보자 분들이 이해하기 쉽게 설명한 글입니다.

---

🧩 [...nextauth] 이게 도대체 뭘까?

Next.js에서 인증 기능을 구현하다 보면 아래와 같은 파일 구조를 자주 보게 됩니다:

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

처음 보면 [], ... 기호가 헷갈릴 수 있는데요, 이 구조는 Next.js의 특별한 라우팅 기능을 의미합니다.

---

📦 1. 대괄호([]): 동적 라우트란?

Next.js에서는 파일 이름에 대괄호 []를 사용하면, 경로의 특정 부분을 변수처럼 사용할 수 있게 됩니다.

예시:

/pages/post/[id].tsx

• /post/1
• /post/hello
• /post/abc123

이렇게 다양한 URL에서 id라는 이름으로 값이 들어오게 되고, 코드에서는 params.id로 접근할 수 있어요.

// 예시: /post/[id].tsx
import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  return <div>게시물 ID: {id}</div>;
}

---

🧹 2. 점 세 개(...): 캐치올 라우트란?

이번에는 점 세 개 ...가 들어간 경우를 볼게요:

/pages/docs/[...slug].tsx

이건 "여러 개의 경로 세그먼트를 한꺼번에 받겠다"는 의미예요.

예시 URL:

• /docs → slug는 빈 배열
• /docs/intro → slug = ["intro"]
• /docs/intro/getting-started → slug = ["intro", "getting-started"]

// 예시: /docs/[...slug].tsx
import { useRouter } from 'next/router';

export default function DocsPage() {
  const router = useRouter();
  const { slug } = router.query;

  return <div>문서 경로: {JSON.stringify(slug)}</div>;
}

이처럼 몇 단계가 될지 모르는 경로를 한 번에 받아서 처리할 수 있어요.

---

🔐 3. NextAuth에서 [...nextauth]를 사용하는 이유

인증 기능을 다루는 NextAuth.js는 다음과 같은 다양한 경로를 내부적으로 처리합니다:

• /api/auth/signin → 로그인 화면 호출
• /api/auth/signout → 로그아웃 처리
• /api/auth/callback → 로그인 후 콜백
• /api/auth/session → 세션 정보 조회
• /api/auth/csrf → CSRF 보호용 토큰 발급

이걸 각각의 파일로 만들면 너무 복잡하고 관리가 어려워요. 그래서 이런 구조로 딱! 하나로 관리합니다:

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

이 하나의 파일이 위에 나열한 모든 인증 관련 요청을 알아서 구분해서 처리합니다.

✔ 실제 사용 예시 (NextAuth 설정)

// /api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

const handler = NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
});

export { handler as GET, handler as POST };

• GET, POST 요청 모두 이 파일이 처리해줍니다.
• 내부적으로 signin, callback, session 등 모든 인증 흐름이 이 안에서 관리돼요.

---

✅ 마무리 정리

문법	의미	예시 URL
[id]	하나의 동적 경로 처리	/post/1, /user/abc
[...slug]	여러 단계의 경로 세그먼트 한꺼번에 처리	/docs/intro/a/b/c
[...nextauth]	NextAuth의 모든 인증 API를 처리	/api/auth/signin, 등등

---

🎁 추가 팁

• [...slug] 대신 [[...slug]]를 쓰면 해당 경로가 선택(optional)이 됩니다.
• Next.js App Router(13버전 이상)에서는 route.ts 파일을 통해 API 라우트를 구성합니다.

---

💬 궁금한 점 있으신가요?

Next.js나 인증 관련해서 헷갈리는 부분이 있다면 댓글로 자유롭게 질문해주세요! 😊

이 글이 도움이 되셨다면 공감(❤️)과 구독도 부탁드려요!

---

🔍 태그 (검색용)

#Nextjs #NextAuth #Nextjs라우팅 #인증구현 #캐치올라우트 #와일드카드라우트 #웹개발 #프론트엔드 #React #Nextjs초보자