Next.js Optional catch all routes (옵셔널 라우트)

https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes

Routing: Dynamic Routes | Next.js

Next Docs Dynamic Routes 섹션에서 어렴풋이 보고 넘겼던 적이 있는데, 이번에 인앱 브라우저 환경 관련 SNS 작업을 하면서 적용하게 된 내용을 정리해보려고 합니다.

 

처음엔 SNS 로그인 라우터 설정을 메인페이지로 넘어가서 체크를 했습니다.

이렇게 되면 회원가입을 하지 않은 회원임에도 불구하고 SNS 로그인 시, 메인페이지로 넘어가 그 결과를 보게 됩니다.

가입되지 않은 회원인데 메인페이지로 보내지고 사용자가 다시 로그인 페이지에 접근해야 하는 불편함이 생깁니다.

 

가입한 회원이면 로그인 시, 메인페이지로 가입하지 않은 회원이면 회원가입 페이지로 보내게끔 수정을 해야겠다고 생각했습니다.

 

최초 SNS 로그인을 처리할 때 login/[type.js]로 동적경로(Dynamic Routes)를 설정해두었습니다.

 

이렇게 되면 /login 페이지에 접근 후, 원하는 SNS 버튼을 클릭해 가야하는데 login/[] 뒤에 걸리는 route 설정이 없으면 페이지를 찾을 수 없다고 나오게 됩니다. 

 

(페이지 전환시 로그인 페이지에서 SNS 버튼을 클릭하면 그 SNS (kakao, google 등)를 같이 보내줘야 합니다.)

 

해결 방법이 있지 않을까 Next docs를 참고하면서 Routes 설정을 뒤져보니 역시나 방법이 있었습니다.

Optional catch routes란 설정이 있었고, 선택적으로 경로를 잡을 수 있습니다.

 

Next.js Optional catch routes

• ex) pages/post/[[...slug]].js는 /post, post/a, post/a/b
• apply) pages/[[...type]].js -> /login, login/kakao~~, login/google~~

 

apply와 같이 적용을 하였고 Optional routes 설정으로 매개변수가 없는 경로도 일치하게끔 하여 해결할 수 있었습니다.