Next.js의 라우팅 시스템

Next.js의 App Router에서는 디렉토리 구조가 그대로 URL 경로로 매핑됩니다.

app/
├── page.tsx           -> / (홈페이지)
├── login/
│   └── page.tsx       -> /login
├── dashboard/
│   ├── page.tsx       -> /dashboard
│   └── settings/
│       └── page.tsx   -> /dashboard/settings

NextAuth

• Oauth Provider 를 제공해 주어 Oauth 인증 방식의 로그인 서비스를 쉽게 구현 할 수 있어 핵심 로직에 집중할 수 있습니다.
• Next의 라우팅 관련 설정

API 라우트 구성하기

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

const handler = NextAuth({
		// 이렇게 코드를 구성하면 에러가 발생합니다. 
		// 추후 필요한 부분에 값읋 넣고 필요없는 부분을 제거해주면 됩니다. 
    providers: [ ... ],
    callbacks:{...},
    pages:{...}
})
    
export { handler as GET, handler as POST }

NextAuth는 Naver, Kakao, ID & PW 등 로그인 방식에 따라 provider 를 제공한다.

NextAuth에서 기본 제공하는 로그인 방식

// /app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth/next'
import CredentialsProvider from 'next-auth/providers/credentials'

const handler = NextAuth({
    providers: [
      // ID, PW 로그인 방식
        CredentialsProvider({
            name: 'Credentials',
            credentials: {
                username: { label: 'Username', type: 'text', placeholder: 'jaehan' },
                password: { label: 'Password', type: 'password' },
            },
            async authorize(credentials, req) {
                const user = { id: '1', name: 'J Smith', email: '[email protected]' }

                if (user) {
                    return user
                } else {
                    return null

                }
            },
        }),
    ],
})

export { handler as GET, handler as POST }

위와 같이 코드를 작성하고 나면 NextAuth에서 기본 제공하는 로그인 폼을 확인할 수 있다.

http://localhost:3000/api/auth/signin