[Next] SNS별로 동적라우팅(Dynamic Routes) 지정하기

같은 화면구성에 같은 API쓸 예정이어서

페이지를 따로 만들 필요가 없어서 모든 SNS 로그인을 Oauth.tsx파일로 하기로 했다.

그러다보니 sns별로 코드를 서버단으로 보내줘야되는데, 

이때 라우트를 이용해서 담아서 보내줌

근데 Redirect URI를 변경해야하니 조금 달라서 겸사겸사 기록해놓는다

 

 

[] 대괄호를 사용해서 폴더를 만들고 그 안에 oauth.ts 파일을 만듦 (next13이후 부터는 oauth폴더에 page.tsx파일로)

oauth.ts파일은 컴포넌트 페이지로 바로 이동된다.

 

기존의 NEXT_PUBLIC_OAUTH_REDIRECT는 http://localhost:3000/login/oauth인데,

뒤에oauth를 빼주고 redirect URI를 재설정해줬다

 

WebLogin.tsx

const loginWithKakao = (snsType: string | null) => {
    Kakao.Auth.authorize({
        redirectUri: `${process.env.NEXT_PUBLIC_OAUTH_REDIRECT}/${snsType}/oauth`,
        scope: "profile_nickname",
    });
};

...

	<button onClick={() => loginWithKakao("kakao")} type="button"> ....

 

(당연히 kakao developers에도 주소를 바꾸어주어야하고, 서버단에도 말해줘야함)

 

이렇게 해주고 카카오 로그인 버튼을 눌러보았더니 아주 잘 불러오는 모습을 볼 수 있었다!

 

Oauth.tsx

const snsIdentifierCodes = {
    kakao: "~~501",
    naver: "~~502",
    google: "~~503",
};

 

코드를 변수로 지정해주고, (타입생략)

 

const { code: authCode, sns: snsType } = router.query;

 

router.query.를 이용해서 불러올 수 있다.

 

그래서 snsCode: snsIdentifierCodes[snsType] 이런식으로 쓰면 됨!